모바일 개발도 데스크톱 개발만큼 쉬워야 합니다. 우리는 Chrome DevTools를 쉽게 사용할 수 있도록 열심히 노력해 왔으며, 이제 모바일 웹 개발을 획기적으로 개선할 몇 가지 새로운 기능을 공개할 때입니다. 먼저 원격 디버깅입니다. 그런 다음 적절한 모바일 에뮬레이션을 공개합니다.
기기 화면을 데스크톱으로 스크린캐스트
지금까지는 원격 디버깅을 하는 동안 기기와 개발 도구 사이를 오가야 했습니다. 이제 스크린캐스트에서 devtools 바로 옆에 기기 화면을 표시합니다. 보는 것도 좋지만 상호작용하면 훨씬 더 좋습니다.
- 스크린캐스트 클릭은 탭으로 변환되며 기기에서 적절한 터치 이벤트가 실행됩니다.
- 데스크톱 포인터로 기기의 요소 검사
- 데스크톱 키보드에서 입력합니다. 모든 키 입력은 기기로 전송됩니다. 엄지손가락으로 텍스트를 입력할 때보다 시간을 크게 절약할 수 있습니다.
- 포인터로 스와이프하거나 노트북 트랙패드에서 슬라이드하여 페이지를 스크롤하세요.
스크린캐스트에 관한 전체 문서에서는 손가락을 모으거나 확대/축소 동작을 전송하는 등 이 모든 것을 캡처합니다. Android용 Chrome 베타 (m32)가 필요합니다.
손쉬운 원격 디버깅
18개월 전 Chrome은 WebKit 브라우저에 적합한 원격 디버깅을 도입했지만, 그때까지 사용해 본다면 adb 바이너리를 $PATH에 추가하고 마법 같은 명령줄 명령을 추가하는 등 400MB의 Android SDK 다운로드를 처리해야 했습니다.
이제 이 모든 것을 잊어버리셔도 됩니다. 이제 Chrome에서 기본적으로 USB 연결 기기를 찾아서 대화할 수 있습니다. Chrome의 USB를 통해 adb 프로토콜을 직접 구현했으므로 간편하게 Menu > Tools > Inspect Devices로 이동하여 원격 디버깅 세션을 즉시 시작할 수 있습니다.
Chrome OS를 포함한 모든 플랫폼에서 잘 작동하지만, Windows에서는 먼저 적절한 USB 드라이버를 설치해야 기기와 통신할 수 있습니다. 한 번도 사용해본 적이 없다면 기기에서 USB 디버깅을 사용 설정하고 Android용 Chrome 베타를 사용 중인지 확인해야 합니다. 전체 문서 읽기
로컬 프로젝트의 포트 전달
localhost:8000에서 개발 중이지만 휴대전화가 여기에 연결할 수 없습니다. 그래서 우리는 포트 포워딩을 원격 디버깅 워크플로에 직접 추가했습니다. 이제 터널링 해킹 없이도 전체 프로젝트를 손쉽게 작업할 수 있습니다. about:inspect에서 포트 포워딩을 클릭하여 사용할 포트를 설정합니다. 사용할 수 있는 포트는 녹색으로 켜집니다.
모바일 에뮬레이션
호환성을 테스트해야 하는 기기가 항상 있는 것은 아니신가요? 실제 기기를 원격 디버깅하면 성능과 터치에서 최상의 경험을 제공할 수 있지만, 이제 데스크톱에서 많은 기기 특성을 현실적으로 에뮬레이션하여 시간을 절약하고 반복 루프를 훨씬 더 빠르게 만들 수 있습니다.
풀 터치 이벤트 시뮬레이션으로 화면 크기, devicePixelRatio, <meta viewport> 에뮬레이션
이전에 기기 측정항목 기능을 본 적이 있으시다면 이제 큰 업그레이드만 하시면 됩니다. 팀은 새로운 모바일 에뮬레이션에서 실제 기기에서 보는 것과 거의 비슷한 효과를 얻을 수 있도록 하기 위해 노력했습니다. 예를 들어 WebKit 브라우저는 복잡한 텍스트 자동 크기 조절 알고리즘을 유지하며, 실제로 각 기기에는 텍스트 가독성을 유지하기 위해 변경되는 텍스트 자동 크기 조절을 위한 특정 '퍼지 요소'가 있습니다. 에뮬레이션 모드에서는 이 동작이 적용되는지 확인하고 결과를 볼 수 있습니다.
기기 픽셀 비율
지금까지는 DPI가 낮은 기기에서 Hi-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를 사용한 모바일 에뮬레이션에 관한 전체 문서를 확인하세요.
데모
이러한 모든 기능의 실제 작동 방식에 대한 전체 데모를 보려면 모바일용 DevTools의 Chrome Dev Summit에서 발표한 23분간의 강연을 확인해 보세요.