DevTools가 상시 사용 설정되고 있는 새롭고 간소화된 새로운 Device Mode로 모바일을 우선시하는 방법을 알아보세요. 색상 버튼을 사용하여 선택기에 색상을 빠르게 추가하고 DevTools에 곧 출시될 기능을 확인할 수 있습니다.
저작의 미래 엿보기
Chrome Dev Summit에서 이제 막 DevTools를 사용한 현재와 미래의 모습을 보여드렸습니다. 보통 이 다이제스트에서 아직 실험 중이거나 진행 중인 기능은 언급하지 않지만 이번에는 예외입니다. 전체 강연을 시청할 시간이 없다면 다음 요점을 확인하세요.
기기 모드 버전 2
Google은 이 새롭고 대담한 버전의 Device Mode를 개발하기 위해 계속 노력하고 있지만 모든 사용자에게 체험 기회를 제공하고자 했으며, 오늘 카나리아에서 이 기능을 사용할 수 있도록 했습니다. 이러한 변화를 통해 DevTools는 모바일 개발이 기본이고 데스크톱 개발이 '부가기능'인 모바일 중심의 미래로 나아가고 있습니다. 작업이 완료되면 향후 몇 주에 걸쳐 더 많은 반복 작업을 제공할 예정입니다.
강력한 애니메이션 검사
현재 진행 중인 Animation Inspection을 통해 움직이는 모든 것에 관한 전체적인 그림을 상세하게 파악할 수 있습니다. 한 번에 하나의 요소에 대한 전환을 표시하는 대신 복잡한 애니메이션을 그룹화하는 휴리스틱을 추가했기 때문에 표시되는 모든 요소에 집중할 수 있습니다. 동영상을 살펴보세요. 정식 출시되면 더 크고 독립적인 블로그 게시물을 제공할 예정입니다.
레이아웃 모드 (미리보기)
황금 시간대에는 아직 준비되지 않았지만 새로운 레이아웃 모드가 출시되면 좋을 것 같습니다. 이 기능이 완전히 구현되기를 기대하고 있겠습니다. 레이아웃 모드는 페이지의 모든 요소에 대해 WYSIWYG 편집 기능을 DevTools에 추가합니다. 지금까지는 컨텍스트 내에서 높이, 너비, 패딩, 여백을 수정할 수 있었습니다. 사용해 볼 수 있을 때까지 시간이 조금 더 걸릴 수 있지만 새로운 소식을 계속 전해드리겠습니다.
업데이트된 타임라인 패널을 사용한 성능 프로파일링
새로운 RAIL 성능 모델 도입의 대대적인 노력의 일환으로 Timeline 패널에 크고 작은 수백 가지 변경사항이 발생했으며, 이들이 함께 성능 프로파일링 스토리를 상당히 변형하고 개선합니다. 그래서 폴 아이리시 씨가 각각의 변경사항을 개별적으로 보여 주는 대신, 당사의 사이트(이 경우 Hotel Tonight의 모바일 사이트)의 실적을 적절하게 디버그하는 방법을 보여주었습니다. 새로 발표된 기능에는 로드 및 성능 필름, 포함된 네트워크 폭포식 구조, 트리뷰 요약, 도메인 및 파일별 성능 비용을 볼 수 있는 기능이 있습니다.
모든 요소에 전면 및 배경 색상을 쉽게 추가할 수 있습니다.
요소에 배경 색상이나 색상 속성을 추가할 때마다 색상 선택 도구만 열 수는 없었습니다. 대신 대부분의 사용자는 색상 선택 도구 아이콘이 표시될 때마다 '배경: 빨간색'과 같은 단어를 입력한 다음 원하는 실제 색상을 선택합니다.
Google은 이를 간소화할 수 있다고 생각했습니다. 선택기의 오른쪽 하단에 마우스를 가져가면 표시되는 멋진 버튼 두 개를 추가했습니다. 이제 색상을 추가하고 클릭 한 번으로 선택 도구를 불러올 수 있습니다.
다재다능한
- 일반 미디어 유형을 표시했기 때문에 스타일 패널에서 이전 공간을 상당히 낭비했습니다. 이제 드물지 않은 경우 선택기 앞에 해당 항목이 숨겨집니다.
- 이제 스타일 패널에서 CSS 선택자 위로 마우스를 가져가면 페이지에서 해당 선택 도구가 적용되는 요소 수를 확인할 수 있습니다.
- 아직 인쇄를 포기하지 않으셨나요? 인쇄 미디어 에뮬레이션에서는 페이지가 어떻게 인쇄될지 확인할 수 있습니다. 렌더링 설정으로 이동하였습니다.
- 검사할 요소를 선택할 때 이제 관련 DOM 하위 트리가 자동으로 확장되고 닫힙니다. 설명하기 어렵지만, 보는 것은 믿는 것입니다.
언제나 그렇듯이 트위터나 아래 댓글을 통해 의견을 알려주시고 버그를 crbug.com/new에서 제출해 주세요.
그럼 다음 달까지
폴 바카우스 및 DevTools팀