このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 77）

Kayce Basques

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

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

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

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

Adam Argyle と VisBug のアイデアに感謝します。

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

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

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

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

レイアウトシフト。

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

Chromium の問題 #961846

[Audits] パネルでの Lighthouse 5.1

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

有効な apple-touch-icon を提供する。iOS のホーム画面に PWA を追加できることを確認します。
リクエスト数とファイルサイズを小さくする。ドキュメント、スクリプト、スタイルシート、画像など、さまざまなカテゴリのネットワークリクエストの合計数とファイルサイズを報告します。
First Input Delay の最大値。ユーザーの最初のページでのインタラクションから、そのインタラクションに対するブラウザの応答までに発生する可能性のある最長時間を測定します。この指標は、推定入力レイテンシの指標に代わるものです。想定される初回入力遅延の最大値は、パフォーマンスカテゴリのスコアでは考慮されません。

新しい [Audits] パネルの UI。

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

Lighthouse 5.1 の Node バージョンと CLI バージョンには、チェックすべき重要な新機能が 3 つあります。

パフォーマンスバジェット。ページが超えないようにリクエスト数とファイルサイズを指定することで、サイトが時間の経過とともに回帰するのを防ぎます。
プラグイン。独自のカスタム監査で Lighthouse を拡張できます。
スタックパック。特定の技術スタックに合わせた監査を追加できます。最初にリリースされたのは WordPress Stack Pack ですReact と AMP Stack Pack は現在開発中です。

OS のテーマの同期

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

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

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

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

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

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

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

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

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

プリフェッチのデモで試してみる。

Chromium の問題 #935267

オブジェクト表示時のプライベートプロパティ

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

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

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

[Application] パネルの通知とプッシュメッセージ

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

Chrome 76 のバックグラウンドフェッチおよびバックグラウンド同期機能と同様に、録画を開始すると、ページを閉じたり Chrome を閉じたりしても、このページのプッシュメッセージと通知が 3 日間記録されます。

新しい [Notifications] ペインと [Push Messages] ペイン。

図 7. [Application] パネルの新しい [Push Messages] ペインと [Notifications] ペイン。

Chromium の問題 #927726

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。