DevTools の新機能（Chrome 78）

Kayce Basques

[Audits] パネルでのマルチクライアント サポート

[Audits] パネルを、Request（リクエスト）機能などの他の DevTools 機能と組み合わせて使用できるようになりました。 ブロック設定とローカル オーバーライド。

たとえば、[監査] パネルレポートにページのパフォーマンス スコアが 70 と表示されたとします。 また、パフォーマンス向上の最大の機会の 1 つは、レンダリングをブロックするリソースの排除です。

図 1. 最初のパフォーマンス スコア。

図 2. 最初のレポートでは、レンダリングをブロックするスクリプトが 3 つ問題になっています。

リクエストのブロックと組み合わせて [監査] パネルを使用できるようになったため、 レンダリングをブロックするスクリプトが読み込みパフォーマンスに及ぼす影響を測定するために、 次のスクリプトを実行します。

図 3. [Request Blocking]（リクエストのブロック）タブを使用して、問題のあるスクリプトをブロックします。

次に、ページを再度監査します。

図 4. 問題のあるスクリプトをブロックした後、パフォーマンス スコアは 97 に改善されました。

また、ローカル オーバーライドを使用して、各スクリプトに async 属性を追加することもできます。 タグがありますが、「これは読者のために演習として残しておきます」。マルチクライアント デモに移動して試す できます。または、こちらのツイートで動画デモをご覧いただけます。

Chromium の問題 #991906

支払いハンドラのデバッグ

[アプリケーション] パネルの [バックグラウンド サービス] セクションで [Payment Handler] がサポートされるようになりました できます。

1. [アプリケーション] パネルに移動します。
2. [Payment Handler] ペインを開きます。

3. [Record] をクリックします。DevTools の Payment Handler イベントが 3 日間記録される（DevTools が 閉じています。

   

   図 5. 支払いハンドラ イベントの記録。

4. 支払いハンドラのイベントが異なるドメインで発生する場合は、[他のドメインの予定を表示する] を有効にします。 含まれます。

5. 支払いハンドラのイベントをトリガーしたら、イベントの行をクリックしてイベントの詳細を確認します。

   

   図 6. Payment Handler イベントの表示。

Chromium の問題 #980291

[Audits] パネルでの Lighthouse 5.2

これで [Audits] パネルで Lighthouse 5.2 が実行されるようになりました。新しいサードパーティ使用状況の診断 リクエストされたサードパーティのコードの量と、そのサードパーティのコードがブロックした時間 メインスレッドから移動します。詳しくは、サードパーティのリソースを最適化するをご覧ください。 サードパーティのコードが読み込みのパフォーマンスを低下させる可能性について学びました。

図 7. サードパーティの使用状況の監査。

Chromium の問題 #772558

パフォーマンス パネルの Largest Contentful Paint

[パフォーマンス] パネルで負荷パフォーマンスを分析する際に、[タイミング] セクションに表示されるようになりました。 Largest Contentful Paint（LCP）のマーカーが配置されています。LCP は ビューポートに表示される最大のコンテンツ要素です。

図 8. [タイミング] セクションの LCP マーカー。

LCP に関連する DOM ノードをハイライト表示するには:

1. [タイミング] セクションで LCP マーカーをクリックします。

2. [概要] タブの [関連ノード] にカーソルを合わせると、ビューポートでノードがハイライト表示されます。

   

   図 9. [概要] タブの [関連ノード] セクション。

3. [関連ノード] をクリックして、[DOM Tree] で選択します。

メインメニューから DevTools の問題の報告

DevTools でバグを見つけた場合に問題を報告する場合や、 DevTools を改善し、新機能をリクエストする場合は、メインメニュー > に移動します。ヘルプ >不適切な動画を報告する DevTools issue を使用して、DevTools エンジニアリング チームのトラッカーに問題を作成します。Google Cloud の Glitch の最小限で再現可能な例により、チームが修正する能力を大幅に向上させる バグ修正や機能リクエストの実装です

ヘルプ >Report a DevTools の問題を報告してください。」width="800"height="604">

図 10. メインメニュー >ヘルプ >DevTools の問題を報告します。

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

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

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

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

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

DevTools の新機能

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