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

DevTools の新機能（Chrome 78）

Kayce Basques

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

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

たとえば、[監査] パネルレポートにページのパフォーマンススコアが 70 と表示され、レンダリングをブロックするリソースの排除がパフォーマンスの改善の大きなチャンスの一つであるとします。

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

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

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

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

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

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

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

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

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

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

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

Chromium の問題 #991906

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

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

[アプリケーション] パネルに移動します。
[Payment Handler] ペインを開きます。
[Record] をクリックします。DevTools は、DevTools が閉じている場合でも、Payment Handler イベントを 3 日間記録します。

図 5. 支払いハンドライベントの記録。
Payment Handler のイベントの発生元が異なる場合は、[他のドメインのイベントを表示] を有効にします。
支払いハンドラのイベントをトリガーしたら、イベントの行をクリックしてイベントの詳細を確認します。

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

Chromium の問題 #980291

[Audits] パネルでの 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 ノードをハイライト表示するには:

[タイミング] セクションで LCP マーカーをクリックします。
[概要] タブの [関連ノード] にカーソルを合わせると、ビューポートでノードがハイライト表示されます。

図 9. [概要] タブの [関連ノード] セクション。
[関連ノード] をクリックして、[DOM Tree] で選択します。

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

DevTools でバグに遭遇して問題を報告する場合や、DevTools の改善方法のアイデアを得て新機能をリクエストしたい場合は、[Main Menu] > [Help] > [Report a DevTools issue] に移動し、DevTools エンジニアリングチームのトラッカーで問題を作成します。Glitch で最小限の再現可能なサンプルを提供することで、バグ修正や機能リクエストの実装を行うチームの能力が飛躍的に向上します。

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

図 10. メインメニュー > [Help] > [Report a DevTools issue] をクリックします。

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

デフォルトの開発ブラウザとして 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 動画にコメントを残してください。