DevTools の新機能（Chrome 77）

Kayce Basques

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

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

図 1. 要素のスタイルをコピーします。

インスピレーションを与えてくれた Adam Argyle と VisBug に感謝します。

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

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

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

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

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

Chromium の問題 #961846

[監査] パネルの Lighthouse 5.1

[監査] パネルで Lighthouse 5.1 が実行されるようになりました。新しい監査には次のものがあります。

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

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

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

• パフォーマンス予算。ページが超えてはならないリクエスト数とファイルサイズを指定することで、サイトのパフォーマンスが時間の経過とともに低下するのを防ぎます。
• プラグイン。独自のカスタム監査で Lighthouse を拡張します。
• Stack Packs。特定のテクノロジー スタックに合わせて調整された監査を追加します。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

オブジェクトを表示する際の非公開プロパティ

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

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

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

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

Chrome 76 のバックグラウンド取得とバックグラウンド同期の機能と同様に、記録を開始すると、このページのプッシュ メッセージと通知は、ページが閉じられた場合や Chrome が閉じられた場合でも、3 日間記録されます。

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

Chromium の問題 #927726

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能のリクエストは、crbug.com からお送りください。
• DevTools の more_vert その他アイコン > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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