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

メールアドレスが公開されることはありません。

関連記事

Google

Google マップの便利な機能

目次1. はじめに2. Googleマップの便利な機能3. 経路検索(ルート検索)経路をホーム画面に追加4. 運転モード5. マイプレイス6. 印刷 1. はじめに Googleマップ はとても便利な …

Web

Webページの見出しレベルが分かりづらいときないですか?

Webページの見出しレベルが分かりづらい問題を解決します。

Let's Encrypt

Let’s Encrypt: ホスト名毎に証明書を分けて発行する

ホスト名毎に証明書を分けて発行すると便利です。

Web

Mastodon(OStatus) を参考にして、理想の標準情報発信プラットフォームを考えてみました

話題の Mastodon を参考にして、私の理想とする情報発信プラットフォームについて考えてみました。 Mastodonとは? 見た目は、Twitterとほとんど同じサービスです。しかし、Twitte …

Web Security

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

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