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

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …

Web

Web Components: CSS Shadow Parts の使い方

CSS Shadow Parts の使い方を説明します。

Chrome

Chrome 78 の新機能

ome 78 の新機能について簡単に説明します。

HTML

HTML の基礎

HTML の各タグに関する情報を提供します。主に HTML5 の情報を扱います。 (HTML5の仕様書である HTML Standard を翻訳している部分も多くあります) 後半では、タグ毎に使い方な …

ただ今、本ウェブサイトを改造しています

現在、このウェブサイトを改造しています。 今回、WordPress の「Attitude」というテーマを使ってみたのですが、評判が良いだけあって使いやすいです。デザインがすっきりしていてシンプルなのも …