DevTools の新機能（Chrome 106）

Jecelyn Yeen

[ソース] パネルで作成元 / デプロイ元別にファイルをグループ化する

[作成元 / 実装元別にファイルをグループ化する] が、その他メニューの下に表示されるようになります。これまでは、ナビゲーション ペインに直接表示されていました。

こちらのデモを開きます。[Group files by Authored / Deployed] 設定を有効にすると、元のソースコード（作成済み）が最初に表示され、そのコードにすばやく移動できるようになります。

作成元 / 実装元別にファイルをグループ化する

Chromium のバグ: 1352488

スタック トレースの改善

非同期オペレーションのリンクされたスタック トレース

一部のオペレーションが非同期的に実行されるようにスケジュールされている場合、DevTools のスタック トレースでオペレーションの「全体像」を把握できるようになりました。これまでは、ストーリーの一部しかわかりませんでした。

たとえば、このデモを開き、増分ボタンをクリックします。コンソールでエラー メッセージを展開します。ソースコードでは、オペレーションに非同期の timeout オペレーションが含まれています。

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

以前は、スタック トレースにはタイムアウト オペレーションのみが表示されていました。オペレーションの「根本原因」は表示されませんでした。

最新の変更により、DevTools では、ボタン コンポーネントの onClick イベント、increment 関数、タイムアウト オペレーションの順に操作が行われたことが表示されるようになりました。

非同期オペレーションのリンクされたスタック トレース

バックグラウンドでは、DevTools に新しい「非同期スタック タグ付け」機能が導入されました。非同期コードの両方の部分を新しい console.createTask() メソッドでリンクすると、オペレーション全体を把握できます。詳細については、DevTools での最新のデバッグをご覧ください。

複雑に聞こえますか？問題ございません。ほとんどの場合、使用しているフレームワークがスケジューリングと非同期実行を処理します。その場合、API の使用はフレームワークに任せられるため、心配する必要はありません。（例: Angular ではこれらの変更が実装されています）。

Chromium のバグ: 1334585

既知のサードパーティ スクリプトを自動的に無視する

DevTools で既知のサードパーティ スクリプトが無視リストに自動的に追加されるようになりました。これにより、デバッグ中にコード内の問題をより迅速に特定できます。

このデモを開き、増分ボタンをクリックします。コンソールでエラー メッセージを開きます。スタック トレースにはコードのみが表示されます（例: app.component.ts button.component.ts）。[フレームをもっと表示] をクリックすると、スタック トレース全体が表示されます。

以前は、スタック トレースには zone.js や core.mjs などのサードパーティ スクリプトが含まれていました。これらはソースコードではなく、バンドラ（Webpack など）またはフレームワーク（Angular など）によって生成されます。エラーの根本原因を特定するのに時間がかかった。

スタック トレース内で既知のサードパーティ スクリプトを自動的に無視する

バックグラウンドでは、DevTools はソースマップの新しい x_google_ignoreList プロパティに基づいてサードパーティ スクリプトを無視します。この情報はフレームワークとバンドラが提供する必要があります。事例紹介: DevTools による Angular デバッグの改善をご覧ください。

必要に応じて、常に完全なスタック トレースを確認する場合は、[設定] > [無視リスト] > [既知の第三者のスクリプトを無視リストに自動追加] でこの設定を無効にできます。

既知の第三者のスクリプトを無視リストに自動追加する設定

Chromium のバグ: 1323199

デバッグ中のコールスタックを改善

[既知の第三者のスクリプトを無視リストに自動追加] の設定により、呼び出しスタックにコードに関連するフレームのみが表示されるようになりました。

このデモを開き、app.component.ts の increment() 関数にブレークポイントを設定します。ページの増分ボタンをクリックして、ブレークポイントをトリガーします。コールスタックには、コードのフレーム（app.component.ts と button.component.ts など）のみが表示されます。

すべてのフレームを表示するには、[無視リストのフレームを表示] を有効にします。これまで、DevTools はデフォルトですべてのフレームを表示していました。

デバッグ中のコールスタックを改善

Chromium のバグ: 1352488

[ソース] パネルで無視リストのソースを非表示にする

[無視リストに載っているソースを非表示] を有効にすると、[ナビゲーション] ペインで無関係なファイルを非表示にできます。これにより、コードのみに集中できます。

こちらのデモを開きます。[ソース] パネルnode_modules と webpack はサードパーティ スクリプトです。その他メニューをクリックし、[無視リストに登録されたソースを非表示にする] を選択して、ペインから非表示にします。

無視リストにあるソースを [Sources] パネルで非表示にする

Chromium のバグ: 1352488

[無視リストに登録されたソースを非表示にする] 設定を使用すると、コマンド メニューでファイルをすばやく見つけることができます。これまで、コマンド メニューでファイルを検索すると、関連性のないサードパーティ ファイルが返されることがありました。

たとえば、[無視リストに載っているソースを非表示] 設定を有効にして、その他メニューをクリックします。[Open file] を選択します。「ton」と入力して、ボタン コンポーネントを検索します。以前は、結果に node_modules のファイルが含まれ、node_modules ファイルの 1 つが最初の結果として表示されていました。

コマンド メニューで無視リストに登録されたファイルを非表示にする

Chromium のバグ: 1336604

パフォーマンス パネルの新しいインタラクション トラック

[パフォーマンス] パネルの新しい [インタラクション] トラックを使用して、インタラクションを可視化し、潜在的な応答性の問題を特定します。

たとえば、こちらのデモページでパフォーマンスの録画を開始してください。コーヒーをクリックして録画を停止します。[インタラクション] トラックに 2 つのインタラクションが表示されます。どちらの操作も同じ ID を持ちます。つまり、両方の操作が同じユーザー操作からトリガーされたものであることを示します。

[パフォーマンス] パネルのインタラクション トラック

Chromium のバグ: 1347390

[パフォーマンス分析情報] パネルの LCP タイミングの内訳

[パフォーマンス分析] パネルに、Largest Contentful Paint（LCP）のタイミングの内訳が表示されるようになりました。これらのタイミング情報を使用して、LCP のパフォーマンスを改善する機会を把握し、特定します。

[パフォーマンス分析情報] パネルの LCP のタイミングの内訳

Chromium のバグ: 1351735

Recorder パネルで録音のデフォルト名を自動生成

[レコーダー] パネルで、新しい録音の名前が自動的に生成されるようになりました。

[レコーダー] パネルの録音のデフォルト名

Chromium のバグ: 1351383

その他のハイライト

  • これまで、レコーダー拡張機能が [レコーダー] パネルに表示されないことがあります。（1351416）
  • [スタイル] ペインに、SVG <stop> 要素の stop-color プロパティのカラー選択ツールが表示されるようになりました。（1351096）。
  • [Performance Insights] パネルで、レイアウト シフトの根本原因としてレイアウト スラッシングを引き起こしているスクリプトを特定します。（1343019）
  • [パフォーマンス分析情報] パネルに、LCP ウェブフォントのクリティカル パスを表示します。（1350390）

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

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

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

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

DevTools の新機能

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