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

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

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

このデモを開き、増分ボタンをクリックします。コンソールでエラー メッセージを展開します。スタック トレースには、コードのみが表示されます（例: 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

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

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

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

Chromium のバグ: 1336604

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

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

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

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

Chromium のバグ: 1347390

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

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

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

Chromium のバグ: 1351735

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

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

[Recorder] パネルの録画のデフォルト名

Chromium のバグ: 1351383

その他のハイライト

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

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

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

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

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

DevTools の新機能

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