DevTools の新機能(Chrome 78)

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

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

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

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

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

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

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

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

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

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

その後、ページを再度監査します。

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

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

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

Chromium の問題 #991906

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

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

  1. [Application] パネルに移動します。
  2. [Payment Handler] ペインを開きます。
  3. [Record] をクリックします。DevTools は、DevTools を閉じても、3 日間は支払いハンドライベントを記録します。

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

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

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

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

    支払いハンドラ イベントの表示。

    図 6. 支払いハンドラ イベントの表示。

Chromium の問題 #980291

[監査] パネルの Lighthouse 5.2

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

Lighthouse のレポート UI に表示された「サードパーティの使用状況」の監査のスクリーンショット。

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

Chromium の問題 #772558

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

[Performance] パネルで負荷のパフォーマンスを分析する際に、[Timings] セクションに Largest Contentful Paint(LCP)のマーカーが表示されるようになりました。LCP は、ビューポートに表示される最大のコンテンツ要素のレンダリング時間をレポートします。

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

図 8. [Timings] セクションの [LCP] マーカー

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

  1. [Timings] の [LCP] マーカーをクリックします。
  2. [Summary] タブの [Related Node] にカーソルを合わせて、ビューポートでノードをハイライト表示します。

    [Summary] タブの [Related Node] セクション。

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

  3. [Related Node] をクリックして、[DOM Tree] 内でそのノードを選択します。

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

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

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

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

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

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

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

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

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

DevTools の新機能

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59