DevTools の新機能（Chrome 77）

Kayce Basques

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

DOM ツリーでノードを右クリックして、その DOM ノードの CSS をクリップボードにコピーします。

スタイルをコピーします。

図 1. 要素スタイルをコピーする。

Adam Argyle 様と VisBug 様、ヒントを提供していただきありがとうございます。

レイアウト シフトを可視化する

お気に入りのウェブサイトでニュース記事を読んでいるとします。ページを読んでいるときに、コンテンツが飛んでしまうため、読みたい場所にたどり着けません。この問題はレイアウト シフトと呼ばれます。これは通常、画像と広告の読み込みが完了したときに発生します。ページには画像と広告用のスペースが予約されていないため、ブラウザは他のすべてのコンテンツを下に移動してスペースを確保する必要があります。解決策は、プレースホルダを使用することです。

DevTools でレイアウトのずれを検出できるようになりました。

  1. コマンド メニューを開きます。
  2. Rendering を入力します。
  3. Show Rendering コマンドを実行します。
  4. [レイアウト シフト領域] チェックボックスをオンにします。ページを操作すると、レイアウト シフトが青色でハイライト表示されます。

レイアウト シフト。

図 2. レイアウト シフト。

Chromium の問題 #961846

[Audits] パネルの Lighthouse 5.1

Audits パネルで Lighthouse 5.1 が実行されるようになりました。新しい監査には以下が含まれます。

  • 有効な apple-touch-icon を指定します。PWA を iOS のホーム画面に追加できることを確認します。
  • リクエスト数とファイルサイズを小さくする。ドキュメント、スクリプト、スタイルシート、画像などのさまざまなカテゴリにおけるネットワーク リクエストの合計数とファイルサイズをレポートします。
  • 初回入力遅延の最大推定時間。ユーザーが最初にページで操作を行った時点から、ブラウザがその操作に応答できた時点までの最大潜在時間を測定します。この指標は、入力レイテンシの推定指標に代わるものです。初回入力遅延の最大推定時間は、パフォーマンス カテゴリのスコアには影響しません。

新しい [監査] パネルの UI。

図 3. 新しい [監査] パネルの UI。

Lighthouse 5.1 の Node バージョンと CLI バージョンには、注目すべき 3 つの新機能があります。

  • パフォーマンス予算。ページで超過してはならないリクエスト数とファイルサイズを指定して、サイトが時間の経過とともに低下しないようにします。
  • プラグイン。独自のカスタム監査で Lighthouse を拡張する。
  • スタックパック。特定のテクノロジー スタックに適した監査を追加します。WordPress Stack Pack が最初にリリースされました。React と AMP のスタック パックは現在開発中です。

OS テーマの同期

OS のダークモードを使用している場合、DevTools は自動的に独自のダークモードに切り替わるようになりました。

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

[ソース] パネルのエディタにフォーカスを合わせた状態で Ctrl+Alt+B キー（または Command+Option+B キー（Mac））を押して、ブレークポイント エディタを開きます。ブレークポイント エディタを使用して、ログポイントと条件付きブレークポイントを作成します。

ブレークポイント エディタ。

図 4. ブレークポイント エディタ。

ネットワーク パネルのプリフェッチ キャッシュ

プリフェッチ キャッシュからリソースが読み込まれた場合は、ネットワーク パネルの [サイズ] 列に (prefetch cache) と表示されるようになります。プリフェッチは、後続のページ読み込みを高速化するための新しいウェブ プラットフォーム機能です。Can I use... によると、2019 年 7 月現在、世界中のブラウザの 83.33% でサポートされています。

[サイズ] 列に、リソースがプリフェッチ キャッシュから取得されたことが示されています。

図 5. [サイズ] 列は、prefetch2.html と prefetch2.css が (prefetch cache) から取得されたことを示しています。

試すには、プリフェッチのデモをご覧ください。

Chromium の問題 #935267

オブジェクトの表示時の非公開プロパティ

コンソールのオブジェクト プレビューにプライベート クラス フィールドが表示されるようになりました。

オブジェクトを検査すると、#color などの非公開フィールドがコンソールに表示されるようになりました。

図 6. 左側の古いバージョンの Chrome では、オブジェクトを検査しても #color フィールドは表示されませんが、右側の新しいバージョンでは表示されます。

[アプリケーション] パネルの通知とプッシュ メッセージ

[アプリケーション] パネルの [バックグラウンド サービス] セクションで、プッシュ メッセージと通知がサポートされるようになりました。プッシュ メッセージは、サーバーが Service Worker に情報を送信するときに発生します。通知は、Service Worker またはページ スクリプトがユーザーに情報を表示するときに行われます。

Chrome 76 のバックグラウンド フェッチ機能とバックグラウンド同期機能と同様に、このページのプッシュ通知と通知は、ページが閉じられても、Chrome が閉じられても、3 日間記録されます。

新しい [通知] ペインと [プッシュ メッセージ] ペイン。

図 7. [アプリケーション] パネルの新しい [プッシュ メッセージ] ペインと [通知] ペイン。

Chromium の問題 #927726

プレビュー チャネルをダウンロードする

デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta のいずれかを使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも早くサイトの問題を見つけることもできます。

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。