안녕하세요. DevTools의 기술 작가인 Kayce입니다. DevTools의 최신 소식을 전해드리겠습니다.
리소스 패널이 애플리케이션 패널로 변경됨
Chrome 52부터 리소스 패널이 더 이상 제공되지 않습니다. 이름이 애플리케이션 패널로 변경되었습니다. 리소스 패널의 기존 기능은 모두 계속 사용할 수 있으며 프로그레시브 웹 앱을 디버그하는 데 도움이 되는 여러 가지 새로운 기능도 사용할 수 있습니다. 이제 여러분도 서비스 워커 수명 주기 및 캐시 타이밍 문제를 디버깅하는 즐거움을 누릴 수 있습니다.
새로운 기능에 대해 자세히 알아보려면 제가 직접 작성한 새로운 가이드인 프로그레시브 웹 앱 디버깅을 확인하세요.
ChromeLens
ChromeLens는 시각 장애인이 웹사이트에 더 쉽게 액세스할 수 있도록 도와주는 훌륭한 새로운 확장 프로그램입니다.
추신: 롭 도슨이 접근성에 관한 새로운 동영상 시리즈인 a11ycasts를 방금 시작했습니다.
Canary의 새로운 기능
현재 카나리아는 Chrome 54입니다. 따라서 향후 Chrome 54 이상을 사용하는 독자는 이러한 기능을 사용할 수 있습니다.
색상 선택 도구는 소스 패널에 있습니다.
네트워크 패널에서 리소스 창을 마우스 오른쪽 버튼으로 클릭하면 cURL 요청 문자열을 복사하여 모든 리소스를 다운로드할 수 있습니다.
JavaScript는 명령 메뉴에서 사용 중지할 수 있습니다. 이전에는 설정에서만 이 기능을 사용할 수 있었습니다.
이제 console.warn()에 스택 트레이스가 포함됩니다.
이 마지막 기능은 몇 개월 전부터 제공되고 있지만 다시 한번 언급할 만한 가치가 있습니다. JS 프로필 옵션을 사용 설정하여 타임라인 녹화를 만들면 소스 패널에서 함수별 실행 시간 분석을 확인할 수 있습니다.
커뮤니티의 새로운 아이디어
다음은 향후 DevTools Near You에 추가될 수 있는 커뮤니티의 새로운 아이디어입니다.
- @matthewcp: 늘어나는 객체의 간단한 목록을 표시하여 메모리 누수 디버깅 속도를 높입니다.
- @jonathanbingram: 증분/감소 키보드 단축키를 사용하여
font-weight값을 늘리거나 줄입니다. - @_bl4de: 쿠키 수정 (오래된 요청이지만 다시 제기해 주셔서 감사합니다). @kdzwinel님이 PR을 준비하고 있다는 소문이 있습니다.
- @kienzle_s: 네트워크 패널 필터에 OR 필터를 추가합니다.
새로운 아이디어가 있나요? 소중한 의견을 기다리고 있습니다. 트위터에서 @ChromeDevTools를 핑하여 문제를 알려주세요.
문서를 수정하거나 설명이 필요한 기능이 있는 경우 언제든지 문서 저장소에서 문제를 열어 문의해 주세요.
다음 달에 뵙겠습니다.