DevTools の新機能（Chrome 77）

Kayce Basques

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

[DOM Tree] のノードを右クリックして、その 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 を提供する。iOS のホーム画面に PWA を追加できることを確認します。
• リクエスト数とファイルサイズを小さくする。ネットワーク リクエストの合計数と ドキュメント、スクリプト、スタイルシート、画像など、さまざまなカテゴリのファイルサイズ。
• First Input Delay の最大値。ユーザーが ユーザーの最初のページインタラクションと そのインタラクションに対するブラウザの応答ですこの指標は は推定入力レイテンシの指標に代わるものです。可能性のある初回入力遅延の最大値は考慮されません。 パフォーマンスカテゴリのスコアです

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

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

• パフォーマンス バジェット。リクエストを指定してサイトの回帰を防ぐ 数とファイルサイズの上限を指定します。
• プラグイン。独自のカスタム監査で Lighthouse を拡張できます。
• スタックパック。特定の技術スタックに合わせた監査を追加できます。WordPress スタックパック 最初に発送されます。React と AMP Stack Pack は現在開発中です。

OS のテーマの同期

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

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

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

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

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

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

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

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

Chromium の問題 #935267

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

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

図 6. 左側の Chrome の旧バージョンでは、#color これに対して右側の新しいバージョンは存在します。

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

[Application] パネルの [Background Services] セクションで、push メッセージと 通知。push メッセージは、サーバーが Service Worker に情報を送信したときに発生します。 通知は、Service Worker またはページのスクリプトがユーザーに情報を表示したときに発生します。

Chrome 76 のバックグラウンド フェッチおよびバックグラウンド同期機能と同様、 そのページのプッシュ通知と通知は、たとえそのページであっても、 Chrome を閉じても、閉じられます。

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

Chromium の問題 #927726

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

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

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

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

• ご提案やフィードバックは、crbug.com からお送りください。
• DevTools の問題を報告するには、その他のオプション（） >ヘルプ >DevTools で DevTools の問題を報告します。
• @ChromeDevTools でツイートしてください。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。