모바일 개발도 데스크톱용으로 개발하는 것만큼이나 쉬워야 합니다. 우리는 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> 에뮬레이션
이전에 기기 측정항목 기능을 사용 중이라면 이제 엄청난 업그레이드 기능을 사용할 수 있습니다. 개발팀에서는 새 모바일 에뮬레이션이 실제 기기에서 표시되는 것과 거의 비슷하게 재현할 수 있도록 하기 위해 열심히 노력해 왔습니다. 예를 들어 WebKit 브라우저는 복잡한 텍스트 자동 크기 조절 알고리즘을 유지하며, 실제로 각 기기에는 텍스트를 쉽게 읽을 수 있도록 변경 내용을 자동 조정하는 특정 '퍼지 계수'가 있습니다. 에뮬레이션 모드에서는 이 동작이 적용되고 있는지 확인하고 결과를 볼 수 있습니다.
기기 픽셀 비율
지금까지는 저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분 길이의 강연을 확인하세요.