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