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

1. はじめに
2. 主な新機能
3. 参考

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 コード」のサイズと、それらのコードがメインスレッドをブロックした時間が表示されます。

詳細はこちら → 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)」と表示されます。

参考

rel=”prefetch” のテストページ | misc.laboradian.com

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

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