DOM 패널의 새 컨텍스트 메뉴를 사용하여 노드를 효율적으로 수정합니다. Resources 패널을 통해 직접 서비스 워커를 디버그할 수 있습니다. 색상 선택 도구에서 모든 Material Design 색조 중에서 선택합니다. 블랙박스 JS 라이브러리를 더 쉽게 사용할 수 있습니다.
DOM 패널의 새로운 개선된 컨텍스트 메뉴
DOM 패널에서 가장 많이 사용되는 작업을 분석한 결과, 오른쪽 클릭 컨텍스트 메뉴를 정리하고 재구성해야 한다고 결론지었습니다.
이제 훨씬 더 쉽게 요소를 숨기거나 삭제하고, :active 또는 :hover와 같은 특정 상태를 트리거하거나, HTML을 수정할 수 있습니다. 트랙패드를 사용 중이고 마우스 오른쪽 버튼을 클릭하고 싶지 않다면 선택한 요소 옆에 있는 점 세 개를 클릭하세요.
리소스 패널을 통해 서비스 워커 디버그
서비스 워커는 설정하고 나면 매우 유용하지만 초기에는 이해하기 어려울 수 있습니다. 디버깅을 하려면 DevTools를 종료하고 새 브라우저 창에서 chrome://serviceworker-internals/ 를 열어야 한다는 점 때문에 문제가 더 악화되었습니다.
이제는 더 이상 그러지 마세요! 이제 리소스 패널에서 현재 도메인의 서비스 워커를 직접 디버그할 수 있습니다. 아직 개발은 진행 중이지만 이전의 현상에 비해 이미 많이 개선된 상태입니다.
모든 색상: 색상 선택 도구의 Material Design 색조
몇 주 전 색상 선택 도구에 Material Design 팔레트를 추가하여 기본 굵은 색상을 즉시 사용할 수 있도록 했습니다. 전체 페이지를 실제로 디자인하려면 모든 Material Design 색조에 대한 전체 액세스 권한이 필요하므로 이를 내장했습니다.
색조를 표시하려면 기본 색상 중 하나를 길게 누른 다음 색조를 클릭합니다.
설정에서 JavaScript 라이브러리를 더 쉽게 블랙박스 처리
JavaScript 블랙박싱은 오래 전부터 있었지만 발견하기가 쉽지 않았습니다. 페이지에서 스크립트를 블랙박스 처리하여 작성된 코드에만 집중하고 모든 래핑 코드를 숨길 수 있는 기능입니다.
이제 설정으로 이동했습니다. 다음을 사용해 보세요.
나머지 중 최고
- 렌더링 전환 버튼에 액세스할 수 없나요? 렌더링 설정이 DevTools 기본 메뉴로 이동했습니다('기타 도구' 아래). 일반적인 문제 (예: FPS 측정기) 외에도 '인쇄 미디어 에뮬레이션'도 이동했습니다.
- 검색창에 chrome://inspect를 입력하기가 번거로우신가요? 이제 기기 검사를 새 기본 메뉴의 '도구 더보기'에서 찾을 수도 있습니다.
- 렌더링 또는 검색과 같이 닫을 수 있는 Drawer 탭 중 하나를 실수로 닫으셨나요? 이제 왼쪽의 새 메뉴를 사용하여 다시 열 수 있습니다.
언제나 그렇듯이 트위터 또는 아래 댓글을 통해 의견을 보내 주시고 crbug.com/new에 버그를 제출해 주세요.
그럼 다음 달까지
폴 바카우스 및 DevTools팀