Chrome 78 デベロッパーツールの新機能

1. はじめに

Chrome 78 のデベロッパーツールにおいて、主な新機能を紹介します。

Chrome 78 – What’s New in DevTools – YouTube で紹介されていた内容を自分なりにまとめてみました。

2. 主な新機能

Audits パネルにおけるマルチクライアントサポート

Audits パネルでは、ウェブページの品質を検査することができますが、デベロッパーツールの他の機能と合わせて利用することができるようになりました。

例えば、以下の機能を利用した状態で、Audits を実行することができます。

• Request Blocking 機能を使い、特定のファイル名のリソースをブロックする。
• Local Overrides 機能を使い、特定のリソースをローカルにコピーして修正を加え、ウェブページアクセス時にはサーバー上ではなくローカル側のファイルを読み込ませる。

これにより、「元のウェブページの品質」に対して「何かしら修正を適用した後での品質」がどう変わるか簡単に試すことができます。

Application パネルに Payment Handler ペインが追加

Payment Handler イベントを記録することができます。

詳しくないので詳細は省きます。

Performance パネルに LCP (Largest Contentful Paint) の表示が追加

Performace パネルで パフォーマンスを記録した場合、Timings セクションのところに「ビューポート内で一番大きなコンテンツを持つ要素が表示されたとき」の部分に「LCP」と表示されます。

LCP についての詳細はこちら → Largest Contentful Paint  |  web.dev

デベロッパーツールの問題を報告する

デベロッパーツールのバグ報告や、新機能のリクエストが、デベロッパーツールのメニューから行えるようになりました。

デベロッパーツールのメニューから [Help] – [Report a DevTools issue] を選択すると、報告画面が表示されます。

※ Google アカウントでログインする必要があります。

3. 参考

• Chrome 78 – What’s New in DevTools – YouTube
• What’s New In DevTools (Chrome 78)  |  Web  |  Google Developers