DevTools の新機能(Chrome 78)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chromium の問題 #991906

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

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

  1. [アプリケーション] パネルに移動します。
  2. [Payment Handler] ペインを開きます。
  3. [Record] をクリックします。DevTools の Payment Handler イベントが 3 日間記録される(DevTools が 閉じています。

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

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

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

  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 ノードをハイライト表示するには:

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

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

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

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

DevTools の新機能

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