DevTools の新機能（Chrome 106）

Jecelyn Yeen

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

[作成元 / 実装元別にファイルをグループ化する] が 3 つのドットのメニューに表示されるようになりました。以前は、ナビゲーション パネルに直接表示されていました。

こちらのデモを開きます。[作成 / デプロイでファイルをグループ化] 設定を有効にすると、元のソースコード（作成）が最初に表示され、よりすばやく移動できます。

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 はサードパーティ スクリプトです。その他メニューをクリックして [無視リストに登録されたソースを非表示にする] を選択すると、ペインから非表示になります。

Chromium のバグ: 1352488

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

[hide ignore-listed sources] 設定を使用すると、コマンド メニューでファイルをすばやく見つけることができます。以前は、コマンド メニューでファイルを検索すると、ユーザーに関連しない可能性のあるサードパーティのファイルが返されていました。

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

Chromium のバグ: 1336604

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

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

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

Chromium のバグ: 1347390

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

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

Chromium のバグ: 1351735

[レコーダー] パネルで録音のデフォルト名を自動生成

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

Chromium のバグ: 1351383

その他のハイライト

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

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

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

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

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

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

DevTools の新機能

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