DevTools Digest, 2016년 8월

안녕하세요, 저는 DevTools의 테크니컬 라이터인 Kayce입니다. 저는 DevTools 분야의 최신 소식을 알려드리고자 합니다.

리소스 패널은 이제 Application 패널입니다.

Chrome 52부터 리소스 패널이 중단됩니다. Application 패널에서 이름이 변경되었습니다. 리소스 패널의 이전 기능은 모두 그대로 사용할 수 있으며, 프로그레시브 웹 앱을 디버그할 수 있는 새로운 기능도 다양하게 제공됩니다. 이제 개발자도 서비스 워커 수명 주기와 캐시 타이밍 문제를 디버깅할 수 있습니다.

새로운 기능에 대해 자세히 알아보려면 실제로 직접 작성한 새 가이드인 프로그레시브 웹 앱 디버그를 참조하세요.

ChromeLens

Chrome 렌즈입니다.

ChromeLens는 시각 장애가 있는 사용자가 웹사이트에 더 쉽게 액세스할 수 있도록 도와주는 훌륭한 새 확장 프로그램입니다.

추신 롭 도슨은 접근성에 관한 새로운 동영상 시리즈인 a11ycasts를 출시했습니다.

Canary의 새로운 기능

Canary는 현재 Chrome 54입니다. 앞으로 Chrome 54 이상 사용자는 이러한 기능을 사용할 수 있습니다

색상 선택 도구는 Sources 패널에 있습니다.

소스 패널 색상 선택 도구

Network 패널에서 Resources 창을 마우스 오른쪽 버튼으로 클릭하면 cURL 요청 문자열을 복사하여 모든 리소스를 다운로드할 수 있습니다.

모두 curl로 복사합니다.

명령 메뉴에서 자바스크립트를 사용 중지할 수 있습니다. 이전에는 설정에서만 사용할 수 있었습니다.

자바스크립트를 사용 중지합니다.

이제 console.warn()에 스택 트레이스가 포함됩니다.

console.warn() 스택 트레이스.

이 마지막 기능은 몇 개월 전부터 제공되었지만 다시 한번 언급할 가치가 있습니다. JS 프로필 옵션이 사용 설정된 상태에서 타임라인 기록을 만들면 소스 패널에서 실행 시간의 함수별 분석을 확인할 수 있습니다.

소스 패널의 함수 실행 시간

커뮤니티의 새로운 아이디어

다음은 가까운 지역의 DevTools에서 향후 제공될 수 있는 몇 가지 새로운 아이디어입니다.

  • @matthewcp: 증가하는 객체의 간단한 목록을 표시하여 메모리 누수 디버깅 속도를 높입니다.
  • @jonathanbingram: 증가/감소 단축키를 사용하여 font-weight 값을 늘리거나 줄입니다.
  • @_bl4de: 쿠키를 수정합니다 (실제로는 오랫동안 기다려온 요청이지만 다시 알려주셔서 감사합니다). @kdzwinel이 PR을 준비 중이라는 소문이 있습니다.
  • @kienzle_s: 네트워크 패널 필터에 OR 필터를 추가합니다.

새로운 아이디어가 있나요? 여러분의 의견을 기다립니다. 트위터(@ChromeDevTools)를 통해 의견을 보내 주세요.

관심을 가지는 동안 수정이 필요한 문서나 설명이 필요한 기능이 있는 경우 언제든지 문서 저장소에서 문제를 열어보세요.

다음 달까지!