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