DevTools の新機能（Chrome 78）

Kayce Basques

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

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

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

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

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

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

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

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

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

別の方法として、ローカル オーバーライドを使用して、各スクリプトタグに async 属性を追加することもできますが、ここでは説明しません。動画によるガイドをご希望の場合は、こちらのツイートをご覧ください。

Chromium の問題 #991906

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

[アプリケーション] パネルの [バックグラウンド サービス] セクションで、支払いハンドラ イベントがサポートされるようになりました。

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

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

   

   図 5. Payment Handler イベントを記録します。

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

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

   

   図 6. Payment Handler イベントを表示する。

Chromium の問題 #980291

監査パネルの Lighthouse 5.2

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

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

Chromium の問題 #772558

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

DevTools の新機能

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