Web

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

投稿日:2019年10月17日 更新日:

1. はじめに

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

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

2. 主な新機能

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

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

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

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

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

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

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

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

Payment Handler ペイン
Payment Handler ペイン

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

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

LCPの表示
LCPの表示

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

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

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

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

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

Report a DevTools issue
[Help] – [Report a DevTools issue]
報告画面
報告画面

3. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

AMP に関する情報

AMP 本来の目的からずれているように見える。この機能は必要?

Web

CORPヘッダーを使って、自分のサイトの画像を他のサイトから直リンクさせない方法

自分のサイトの画像を他のサイトから直リンクさせない方法について説明します。

DokuWiki

DokuWiki のプラグイン開発に関する情報

DokuWiki をなるべくスマートにカスタマイズしようとすると(設定変更以上のことをやりたい場合です)、テンプレートかプラグインを自作せざるを得ません。他の方法があまり用意されていないためです。 テ …

Web

投稿日時のところに「○時間(前)」と表示されるサービスについての疑問

投稿日時のところに「○時間(前)」と表示されるサービスについての疑問です。

Web

Material の Icons (アイコン)を導入する手順

2020年8月:Material design icons 側に変更があり、手順が変わってしまったようです。 目次1. はじめに2. Icons の導入手順2-1. Google Web Fonts …