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

未ログイン状態で Facebook を開いた時に表示されるログインウィンドウを消す

目次1. Facebook の仕様変更?2. ブックマークレットの使い方3. 仕組み4. 注意点5. おわりに 1. Facebook の仕様変更? 未ログイン状態で Facebook のページを開く …

Web

ブラウザをキーボードで操作するための拡張機能 Vimium

ブラウザをキーボードで操作するための拡張機能 Vimium について説明します。

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …

Chrome

Webページが読み込まれる際、HTMLは分割されてパースされます

Webページが読み込まれる際、HTMLが分割されて段階的にパースされる様子を観察します。

Web

Chrome で SameSite=None に関する Cookieについての警告が表示される

Chrome で SameSite=None に関する Cookieについての警告が表示される理由について説明します。