Web

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

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

1. はじめに

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

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

2. 主な新機能

要素のスタイルをコピーする

[Elements]タブ内で、特定の要素を右クリックし [Copy] – [Copy styles] を選択することで、要素のスタイルをコピーすることができます。

例えば、エディタ上で Ctrl + V キーを押すと、以下のようにスタイルを貼り付けることができます。

レイアウトシフト (layouts shifts) を表示する

ウェブページを表示した際に、少し遅れて広告などのコンテンツが追加表示されることで、既に表示されていたコンテンツが少し移動することがあります。これを「レイアウト シフト (layouts shifts)」と呼びます。

このレイアウトシフト、つまり場所を移動させられたコンテンツを一時的に青色表示することができます。

使い方

(1) デベロッパーツールを開いて Ctrl + Shift + P キー(Mac の場合は、Command + Shift + P キー)を入力し、コマンドメニューを表示します。

(2) “render” と入力すると、[Show Rendering] という項目が表示されるので選択します。

(3) [Rendering] タブが表示されるので、その中にある [Layout Shift Regions] にチェックを入れます。

(4) ウェブページをリロードすると、レイアウトシフトが起きた部分が一時的に青色(紫色?)で表示されます。

Audits パネルの Lighthouse 5.1

[Audits] パネルでは Webページの問題を解析してくれる Lighthouse というアプリケーションを実行することができますが、ここに新たに追加された項目があります。

[Performance] セクション [Max Potential First Input Delay]

Performance セクションに「Max Potential First Input Delay」が追加されました( 「Estimated Input Latency metric」が置き換えられた)。

詳細はこちら → First Input Delay  |  Web  |  Google Developers

[Performance] セクション [Keep request counts low and transfer sizes small]

Performance セクションに「Keep request counts low and transfer sizes small」が追加されました。

詳細はこちら → Performance Budgets (Keep Request Counts Low And File Sizes Small)

[Performance] セクション [Third-Party Usage]

Performance セクションに「Third-Party Usage」が追加されました

リクエストされた「サードパーティの JavaScript コード」のサイズと、それらのコードがメインスレッドをブロックした時間が表示されます。

Third-Party Usage

詳細はこちら → Loading Third-Party JavaScript  |  Web Fundamentals  |  Google Developers

[PWA] セクション [Provides a valid apple-touch-icon]

[PWA] セクションに「Provides a valid apple-touch-icon」が追加されました。

詳細はこちら → アイコンとブラウザの色  |  Web  |  Google Developers

OS テーマとの同期

デベロッパーツールの色が、OS レベルの「テーマ」に同期するようになりました。

例えば Windows の場合、[設定] – [個人用設定] – [色を選択する] において「」を選択します。

Chrome のデベロッパーツールを一旦閉じて開き直すと、 黒テーマ用の色に変更されます。

ブレークポイントエディターを開くキーボードショートカット

[Sources]タブ内の JavaScript コードにおいて、目的の行にカーソルを置いた状態で、Ctrl + Alt + B キー(Mac の場合は Command + Option + B キー)を押すと、ブレークポイントエディタが表示されます。そのまま Shift + Tab キーを押すと選択メニューにフォーカスが移り Space キーを押すと「Breakpoint」「Conditional breakpoint」「Logpoint」といった3つの選択肢が表示されます。

参考

Network パネルにおける Prefetch キャッシュ表示

あるリソースにアクセスした際、そのリソースが既に rel="prefetch" でキャッシュ済みであり、そのキャッシュを利用していた場合は、[Network] タブの [Size] 列に「(prefetch cache)」と表示されます。

参考

NetworkタブのSize列
prefetched.php は prefetch のキャッシュから取得されました

Console パネルで、プライベート プロパティも表示される

Console パネルでオブジェクトの内容を表示した場合、プライベートなプロパティも表示されるようになりました。

private properties
[Console] タブでプライベートプロパティが表示されます

Application パネルの Notifications と Push messages

※ この機能は、Notification API の知識を前提としています。

ブラウザが、ある Application Server の提供する情報を購読しているとします。この Application Server が ブラウザに対してメッセージを送信した場合、このメッセージは Application Server → Push Service → ブラウザ という順番で送信されます。

[Application] パネルの [Push Messaging] では、ブラウザが Push Service からメッセージを受け取った際のイベントや、その直後に発火される Service Worker の push イベントに関する記録が表示されます。

Application パネルの Push Messaging

[Application] パネルの [Notification] では、受け取ったメッセージをデスクトップ通知した記録が表示されます。

Application パネルの Notifications

デベロッパーツールを閉じていてもこの記録は行われますが、購読対象のウェブサイトを表示している必要があります。

3. 参考

📂-Web

執筆者:labo


comment

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

関連記事

Web

AMP for WordPress プラグインを利用した AMP対応をやめる方法

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順 では、AMP for WordPress プラグインの利用方法について説明しましたが、今回のその逆 …

Web

WordPressの記事ページ (それ以外でも多分OK) に、Google Charts を使って生成したグラフを表示する方法

目次1. はじめに2. やりたいこと3. やり方(1) Google Charts の JavaScript ファイルを読み込ませる(2) グラフを表示させたい箇所に div タグを記述する(3) グ …

Chrome

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

Chrome で拡張機能を使わずにスクリーンショットを撮る方法について説明します。

SQLite

PHP + SQLite を利用してアクセスカウンターを作る

PHP + SQLite を利用してアクセスカウンターを作ります。

Chrome

Chrome のアドレスバーから任意のサイトの検索機能を使用する方法

目次1. Chrome の検索エンジン管理機能2. 任意サイトの検索機能を Chrome に追加して使用する1. アルクのサイトで検索したときの URL を調査する2. 検索エンジンとして追加する3. …