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

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

関連記事

DokuWiki

DokuWiki のアクセス設定チェックが面白い

目次1. It seems your data directory is not properly secured.2. 対応方法3. 珍しいアクセスチェックの仕組み4. おわりに 1. It see …

Web

Cookie使用の同意を求めるポップアップを表示する (Cookie Consent by Osano)

Cookie Consent by Osano の使い方について説明します。

Google

Googleマップで調べた経路をホーム画面に追加する (Android)

Android版の Googleマップで調べた経路は、ホーム画面にアイコンとして追加することができます。 手順は以下となります。 Google マップで調べた経路をホーム画面に追加する手順 (1) G …

Web Security

SSLで使用する証明書運用の不便さ

上のどちらも、SSLの証明書が期限を過ぎてしまったことが原因で起きた問題のようです。 前者は詳しく見ていないので分かりませんが、後者はサーバー証明書ではなくデバイス側に保存されているクライアント証明書 …

Web

Flexbox を使ってページ全体を中央寄せにする

目次1. はじめに2. やり方3. デモページ4. おわりに参考 1. はじめに CSS(スタイルシート) の Flexbox を使って ウェブページ全体を中央寄せにする例を紹介します。 2. やり方 …