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