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

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

関連記事

SQLite

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

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

インターネット上での検索方法

Google 画像検索を表すURL http://images.google.com/search?tbm=isch&q=検索キーワード 執筆中

Web

CORS の プリフライト・リクエストを発生させて観察する

CORS の プリフライト・リクエストを発生させて観察するページを作成しました。

Web

ウェブ上の「名前を付けて画像を保存」ができない画像をダウンロードする方法

目次1. 「名前を付けて画像を保存」ができない画像2. この手の画像を保存する方法3. おわりに 1. 「名前を付けて画像を保存」ができない画像 ウェブページに載っている画像をダウンロードしたい場合、 …

Web

Webページ中の特定の文字列をURLで指定する(Text Fragments)

Webページ中の特定の文字列をURLで指定する Text Fragments について説明します。