모바일용 개발은 데스크톱용 개발만큼이나 간단해야 합니다. Google은 개발자 여러분의 작업을 더 쉽게 지원하기 위해 Chrome DevTools를 개선하기 위해 노력해 왔으며, 이제 모바일 웹 개발을 크게 개선할 수 있는 몇 가지 새로운 기능을 공개할 때가 되었습니다. 먼저 원격 디버깅을 살펴본 다음 적절한 모바일 에뮬레이션을 살펴보겠습니다.
기기 화면을 데스크톱으로 화면 전송
지금까지 원격 디버깅을 할 때는 기기와 devtools 간에 눈을 왔다 갔다 옮겨야 했습니다. 이제 스크린캐스트가 디버그 도구 바로 옆에 기기 화면을 표시합니다. 보는 것도 좋지만 상호작용하는 것이 더 좋습니다.
- 스크린캐스트의 클릭이 탭으로 변환되고 기기에서 적절한 터치 이벤트가 실행됩니다.
- 데스크톱 포인터를 사용하여 기기에서 요소 검사
- 데스크톱 키보드로 입력합니다. 모든 키 입력이 기기로 전송됩니다. 엄지손가락으로 입력하는 것보다 훨씬 시간을 절약할 수 있습니다.
- 포인터로 페이지를 튕기거나 노트북 트랙패드에서 밀어서 페이지를 스크롤합니다.
스크린캐스팅에 관한 전체 문서에서 핀치 줌 동작 전송과 같은 이 모든 내용을 확인할 수 있습니다. Android용 Chrome 베타 (m32)가 필요합니다.
간편한 원격 디버깅
18개월 전 Chrome에서 WebKit 브라우저에 적절한 원격 디버깅을 도입했지만 당시 이를 사용해 보려면 400MB의 Android SDK를 다운로드하고 $PATH에 adb 바이너리를 추가하고 몇 가지 마법 같은 명령줄 주문을 실행해야 했습니다.
이제 그런 걱정은 접어두셔도 됩니다. 이제 Chrome에서 USB 연결 기기를 기본적으로 검색하고 통신할 수 있습니다. Chrome에서 USB를 통해 adb 프로토콜을 직접 구현했으므로 Menu > Tools > Inspect Devices로 쉽게 이동하여 원격 디버깅 세션을 즉시 시작할 수 있습니다.
이 방법은 Chrome OS를 비롯한 모든 플랫폼에서 잘 작동하지만 Windows에서는 먼저 적절한 USB 드라이버를 설치해야 기기와 통신할 수 있습니다. 이전에 시도한 적이 없는 경우 기기에서 USB 디버깅을 사용 설정하고 Android용 Chrome 베타를 사용하고 있는지 확인해야 합니다. 전체 문서 읽기
로컬 프로젝트의 포트 전달
localhost:8000에서 개발 중이지만 휴대전화에서 이 주소에 연결할 수 없습니다. 이에 따라 포트 전달을 원격 디버깅 워크플로에 직접 추가했습니다. 이제 터널링 해킹 없이 전체 프로젝트를 쉽게 작업할 수 있습니다. about:inspect에서 포트 전달을 클릭하여 사용하려는 포트를 설정합니다. 포트가 제대로 설정되면 녹색으로 표시됩니다.
모바일 에뮬레이션
호환성을 테스트하는 데 필요한 기기가 항상 있는 것은 아닙니다. 실제 기기를 원격 디버그하면 성능과 터치에 대한 최상의 느낌을 얻을 수 있지만 이제 데스크톱에서 여러 기기 특성을 사실적으로 에뮬레이션하여 시간을 절약하고 반복 루프를 훨씬 더 빠르게 실행할 수 있습니다.
전체 터치 이벤트 시뮬레이션으로 화면 크기, devicePixelRatio, <meta viewport> 에뮬레이션
이전 기기 측정항목 기능을 사용해 본 적이 있다면 이제는 대폭 업그레이드된 기능을 사용할 수 있습니다. Google은 새로운 모바일 에뮬레이션이 실제 기기에서 표시되는 것과 거의 동일한 환경을 제공할 수 있도록 노력했습니다. 예를 들어 WebKit 브라우저는 복잡한 텍스트 자동 크기 조절 알고리즘을 유지하며, 실제로 각 기기에는 텍스트를 읽기 쉽게 유지하기 위해 변경되는 텍스트 자동 크기 조절을 위한 특정 '조정 계수'가 있습니다. 에뮬레이션 모드에서는 이 동작이 적용되고 있는지 확인하고 결과를 확인할 수 있습니다.
기기 픽셀 비율
지금까지는 HiDPI 기기에서 표시되는 내용을 저DPI 기기에서 확인하는 것이 거의 불가능했습니다. 이제 DevTools의 dPR 에뮬레이션이 뷰를 조정하여 깊은 DPI 시나리오를 확대할 수 있습니다. 또한 window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) 등이 설정을 반영하므로 다양한 dpi별 애셋 로드 등 앱이 어떻게 적응하는지 확인할 수 있습니다.
기기 에뮬레이션은 브라우저 기능이나 버그까지 확장되지는 않습니다. 따라서 iOS를 에뮬레이션하는 동안 WebGL이 계속 작동하고 iOS 5 방향 줌 버그가 발생하지 않습니다. 이러한 가변성을 경험하려면 기기로 이동하세요.
<meta viewport> (및 @viewport)의 적절한 에뮬레이션
이전에는 width=device-width 및 minimum-scale:1.0의 동작을 테스트하는 것이 기기 전용 게임이었습니다. 이제 다양한 뷰포트를 빠르게 사용해 보고 렌더링되는 방식을 관찰할 수 있습니다.
터치 이벤트 시뮬레이션
터치 스크린 에뮬레이션 설정을 사용하면 클릭이 touchstart 등으로 해석됩니다. 또한 확대/축소, 스크롤, 화면 이동과 같은 합성 이벤트도 작동합니다. 손가락을 벌리거나 모아 콘텐츠를 확대하려면 shift+드래그 또는 shift+스크롤하기만 하면 됩니다. 표시 영역을 벗어난 콘텐츠 크기 조절을 잘 볼 수 있습니다.
마지막으로 사용자 에이전트 스푸핑 (요청 헤더 및 window.navigator 수준 모두), 위치정보, 방향 에뮬레이션을 사용하면 기기의 모든 기능을 살펴볼 수 있습니다.
기기 사전 설정
에뮬레이션 사전 설정을 사용하면 휴대전화나 태블릿을 선택하고 올바른 화면 크기, dPR, 해당 기기에 적용된 UA를 가져올 수 있으며, 전체 터치 이벤트와 에뮬레이션된 뷰포트도 가져올 수 있습니다. 특정 사전 설정을 사용해 보거나 이러한 특성을 하나씩 쉽게 조정할 수 있습니다.
devtools.chrome.com에서 DevTools를 사용한 모바일 에뮬레이션에 관한 전체 문서를 확인하세요.
데모
이러한 모든 기능이 작동하는 모습을 확인하려면 Chrome Dev Summit에서 모바일용 DevTools에 대해 다룬 23분 분량의 강연을 시청하세요.