모바일 우선 세대의 새로운 기기 모드
Google에서는 1년 전부터 기기를 에뮬레이션하고 반응형 디자인을 사용하는 방법인 기기 모드를 도입했습니다. 이제 Chrome 49부터 첫 번째 주요 업그레이드가 시작됩니다. 새로운 기능은 무엇인가요?
모바일이 Chrome DevTools의 시작점이 되고 있습니다. 이전에는 모바일을 에뮬레이션하는 방법을 제공했지만 개발 기본값은 데스크톱이었습니다. 모바일 에뮬레이션은 항상 사용 설정되어야 했습니다. 이제 많은 곳에서 모바일 사이트 사용이 데스크톱을 추월했으므로 DevTools에서도 위치를 전환하고 있습니다.
새로운 기능
무엇보다도 UI가 간소화되어 공간을 훨씬 적게 사용합니다. 새로운 기기 모드가 대부분의 경우 기본 개발 모드가 될 것으로 예상되므로 기본 DevTools 탐색 메뉴를 확장하는 깔끔하고 간단한 디자인이 필요했습니다.
미디어 쿼리 위에 있는 새로운 빠른 이동 기기 눈금자
또한 뷰포트를 가운데에 배치하고 상단에 새로운 빠른 이동 기기 눈금자를 추가했습니다. 이 눈금자는 반응형으로 디자인할 때 가장 일반적인 기기 크기를 파악하는 데 큰 도움이 됩니다.
마지막으로, 가능한 경우 많은 옵션이 번들로 묶이거나 전환 버튼 뒤에 숨겨져 있습니다. 이러한 새로운 합성 옵션을 사용하면 모드 간에 훨씬 쉽게 전환할 수 있습니다. 특정 컨트롤을 전환하거나 툴바 환경을 맞춤설정하려면 작은 점 3개로 된 메뉴 아이콘을 누르세요.
기본적으로 반응형
이제 기본 DevTools 툴바가 브라우저 창의 왼쪽으로 확장되며 다양한 모바일 및 데스크톱 기기를 에뮬레이션하는 데 가장 중요한 도구가 포함됩니다. 다음 두 가지 개발 모드 중에서 선택할 수 있습니다.
- 반응형
- 특정 기기
두 모드 모두 뷰포트는 Chrome 내에서 크기를 조절할 수 있는 자체 창에 있습니다. 이렇게 하면 브라우저 창과 DevTools를 원하는 방식으로 최대화할 수 있고 여러 크기의 페이지를 테스트하고 앞뒤로 이동할 때 창이 갑자기 튀어나오지 않는 큰 이점이 있습니다.
Responsive는 사이트가 몇몇 특정 기기가 아닌 모든 종류의 기기에서 작동하는지 확인하기 위해 능동적인 반복 중에 사용해야 하는 모드입니다. 이 모드에서는 표시 영역 옆의 핸들을 자유롭게 크기 조절할 수 있습니다.
특정 기기는 특정 기기를 선택하고 표시 영역을 해당 크기로 고정하는 경우를 말합니다. 출시가 가까워지면 몇 가지 인기 기기에 대한 최종 수정사항을 적용하고 조정할 때 유용합니다. 따라서 드롭다운에는 모든 종류의 기기가 대량으로 표시되는 것이 아니라 현재 가장 인기 있는 기기가 표시됩니다. 개발자가 하나를 선택하면 실제 기기와 최대한 유사하게 작동하도록 최선을 다합니다. 터치 이벤트, 사용자 에이전트, 뷰포트, 기기 크롬, UI (제공되는 경우)가 모두 에뮬레이션됩니다.
통합 원격 디버깅
최선의 에뮬레이션도 한계가 있습니다. 현재 에뮬레이션으로 할 수 없는 작업이 있습니다. 예를 들면 다음과 같습니다.
- 버튼이 엄지손가락에 맞을 만큼 큰지 확인합니다.
- 느린 휴대전화에서 사이트의 성능을 테스트합니다.
- 특정 기기의 임의의 버그 및 제한사항을 디버그합니다.
이러한 모든 시나리오를 충분히 테스트하려면 실제 기기를 사용하여 테스트, 작업, 디버그해야 합니다.
한동안 chrome://inspect로 이동하여 USB를 통해 기기를 연결하고 DevTools를 통해 원격 디버깅 세션을 열 수 있었습니다. 이제 한 단계 더 나아가 원격 디버깅의 모양과 동작 방식을 리팩터링하여 DevTools의 핵심에 삽입했습니다. 이제 다른 페이지로 이동하는 대신 새 기본 메뉴에서 직접 기기 검사를 대화상자로 열 수 있습니다. 이렇게 하면 워크플로에 물리적 디버깅을 훨씬 쉽게 포함할 수 있습니다. DevTools를 종료할 필요 없이 휴대전화를 연결하기만 하면 됩니다.
이전 에뮬레이션 제어의 나머지 항목을 위한 새로운 공간
이제 DevTools 전반에서 모바일이 기본값이므로 네트워크 제한과 같은 기능이 적절한 홈(이 경우 네트워크 패널)으로 이동했습니다.
센서 에뮬레이션이나 인쇄 미디어 에뮬레이션과 같은 렌더링 설정과 같은 일부 기능이 드로어의 일관된 위치로 이동했습니다. 모든 추가 기능은 새 메인 메뉴의 '도구 더보기'에서 확인할 수 있습니다.
이번 변경사항은 모두가 적응해야 하는 중요한 변화임을 잘 알고 있습니다. 방금 업데이트된 기기 모드 문서에서 기기 모드에 관한 모든 정보를 확인할 수 있습니다. 트위터에서 의견을 보내 주세요. 140자 이상이 필요한 경우 버그 추적기를 사용하세요 (기능 요청도 가능).