DevTools の新機能（Chrome 78）

Kayce Basques

監査パネルでのマルチクライアント サポート

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

たとえば、[監査] パネルのレポートで、ページのパフォーマンス スコアが 70 で、パフォーマンスを高めるための最大の機会の 1 つがレンダリングをブロックするリソースの削除であるとします。

初期のパフォーマンス スコアは 70 です。

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

最初の報告では、レンダリングをブロックする 3 つのスクリプトが問題であるとされています。

図 2. 最初の報告では、レンダリングをブロックする 3 つのスクリプトが問題であるとされています。

リクエスト ブロッキングと組み合わせて監査パネルを使用できるようになったため、まずレンダリング ブロック スクリプトのリクエストをブロックすることで、レンダリング ブロック スクリプトが読み込みパフォーマンスに与える影響をすばやく測定できます。

[リクエストのブロック] タブを使用して、問題のあるスクリプトをブロックします。

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

ページを再度監査すると、次のように表示されます。

リクエストのブロックを有効にすると、パフォーマンス スコアが 97 に改善されました。

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

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

Chromium の問題 #991906

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

[Application] パネルの [Background Services] セクションで、Payment Handler イベントがサポートされるようになりました。

  1. [Application] パネルに移動します。
  2. [支払いハンドラ] ペインを開きます。

  3. [録音] をクリックします。DevTools を閉じていても、Payment Handler イベントは 3 日間記録されます。

    Payment Handler イベントの記録。

    図 5. Payment Handler イベントの記録。

  4. 支払いハンドラのイベントが別のオリジンで発生する場合は、[他のドメインのイベントを表示] を有効にします。

  5. Payment Handler イベントをトリガーしたら、イベントの行をクリックしてイベントの詳細を確認します。

    Payment Handler イベントを表示しています。

    図 6. Payment Handler イベントを表示しています。

Chromium の問題 #980291

監査パネルの Lighthouse 5.2

[Audits] パネルで Lighthouse 5.2 が実行されるようになりました。新しいサードパーティの使用状況診断監査では、サードパーティ コードがリクエストされた回数と、ページの読み込み中にそのサードパーティ コードがメインスレッドをブロックした時間を確認できます。サードパーティ コードが負荷のパフォーマンスを低下させる仕組みについて詳しくは、サードパーティ リソースを最適化するをご覧ください。

Lighthouse レポート UI の [サードパーティの使用状況] 監査のスクリーンショット。

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

Chromium の問題 #772558

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

[パフォーマンス] パネルで読み込みパフォーマンスを分析する際、[タイミング] セクションに Largest Contentful Paint（LCP）のマーカーが表示されるようになりました。LCP は、ビューポート内に表示される最大のコンテンツ要素のレンダリング時間を測定する指標です。

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

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

LCP に関連付けられている DOM ノードをハイライト表示するには:

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

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

    [サマリー] タブの [関連ノード] セクション。

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

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

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

DevTools でバグが発生し、問題を報告する場合や、DevTools の改善方法を思いついたうえで新機能をリクエストする場合は、[メインメニュー] > [ヘルプ] > [DevTools の問題を報告] に移動して、DevTools エンジニアリング チームのトラッカーに問題を作成します。Glitch で再現可能な最小限の例を提供するだけで、バグを修正したり、機能リクエストを実装したりするチームの能力が大幅に向上します。

[ヘルプ] > [DevTools の問題を報告] を選択します。" width="800" height="604">

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

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

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

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

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

DevTools の新機能

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