[요약] Chrome 78 - DevTools의 새로운 기능 정보

이것은 영어의 공부가 테라.

잘못하면 미안해

Audits 패널 내에서 다중 클라이언트 지원(Multi-client support in the Audits panel)

Chrome 78 - What’s New in DevTools - YouTube

Audits 패널을 사용하여 페이지 실적 테스트를 실시할 수 있습니다.

동영상 내에서는 소개로서 jQuery, Lodash, Treejs를 로드하고 있는 스코어가 69의 페이지에 대해서 개선을 시도하고 있습니다.

Option(Cntl) + P에서 Request blocking 를 열고 jquery 를 차단합니다.

Option (Cntl) + P에서 show overrides를 열고 다른 리소스에 비동기 속성을 부여합니다. Folder를 선택하면 변경된 소스 코드가 거기에 저장됩니다. Option(Cntl) + P를 다시 눌러 변경하려는 소스를 선택하고 tree.js 및 loadash에 async 속성을 부여합니다. Option(Cntl) + S를 누르면 저장됩니다.

그 후 다시 감사 패널에서 퍼포먼스 테스트를 하면 스코어가 89점에!

Payment Handler debugging

What's New In DevTools (Chrome 78)  | Web  |  Google Developers

웹에서 Payment Handler API를 사용하여 결제를 할 때 디버깅을 위해 결제 정보를 DevTools에서 확인할 수 있습니다.
결제 정보 기록은 수집을 시작한 후 3일 동안 DevTool을 닫아도 계속 기록됩니다.

기록하려면 DevTool에서 A Apllication를 열고 Paymetn Handler를 엽니다.

왼쪽 상단에 Rec 버튼이 있으므로 눌러서 Dev Tool을 닫습니다.

그런 다음 뭔가 PaymentHandler를 사용하면 DevTool을 열고 Apllication에서 Paymetn Handler를 엽니 다.
그대로는 표시되지 않으므로 show event from other domains 에 체크를 하면 PaymentHander 의 이벤트가 표시됩니다.

Lighthouse 5.2 in the Audits panel

Audits 패널에서 타사 코드의 양을 표시합니다. Third-Parth Usage 에서 각 타사의 코드 양과 메인 스레드를 차단한 시간을 알 수 있습니다.

성능 패널에서 최대 콘텐츠 시각화

Chrome77에서 도입된 Perfomance 패널에서 사이트 내에서 가장 큰 콘텐츠를 마크업하여 표시합니다. 또 LCD를 마우스 오버하면 해당 장소를 색을 붙여 가르쳐 줍니다. 클릭하면 세부 정보를 볼 수 있습니다!

DevTool 메인 메뉴에서 버그 보고 및 기능 요청(File DevTools issues from the main menu)

메인 메뉴에서 Help → Report a devtool issue 로 보고할 수 있습니다.
사용하는 OS 버전, Chrome 버전, 재현하는 방법 등을 알려주세요.