ラボラジアン 目次
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 アカウントでログインする必要があります。
