DevTools の新機能（Chrome 106）

Jecelyn Yeen

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

[Group files by Authored / Deployed] がその他メニューに表示されるようになりました。これまでは、ナビゲーション パネルに直接表示されていました。

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

Chromium のバグ: 1352488

スタック トレースの改善

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

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

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

// application.component.ts

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

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

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

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

わかりにくいですね。問題ございません。ほとんどの場合、使用しているフレームワークがスケジューリングと非同期実行を処理します。その場合、フレームワーク次第で API を使用できるので、気にする必要はありません。（例: Angular がこれらの変更を実装）。

Chromium のバグ: 1334585

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

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

こちらのdemoを開き、増分ボタンをクリックします。コンソールでエラー メッセージを開きます。スタック トレースにはコードのみが表示されます（例: app.component.ts button.component.ts）。[Show moreframe] をクリックしてフルスタック トレースを表示します。

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

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

必要に応じて、常に完全なスタック トレースを表示したい場合は、[設定] >無視リスト >既知のサードパーティのスクリプトを無視リストに自動追加する。

Chromium のバグ: 1323199

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

[自動的に既知のサードパーティ スクリプトを無視してリストにする] 設定を使用すると、コールスタックにはコードに関連するフレームのみが表示されるようになりました。

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

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

Chromium のバグ: 1352488

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

[無視リストに載っているソースを非表示] を有効にすると、[ナビゲーション] ペインで無関係なファイルを非表示にできます。こうすることで、開発者はコードだけに集中できます。

こちらのdemoを開きます。[ソース] パネル。node_modules と webpack は、サードパーティのスクリプトです。その他メニューをクリックし、[無視リストに載っているソースを非表示] を選択すると、そのソースがペインに表示されなくなります。

Chromium のバグ: 1352488

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

[無視リストに載っているソースを非表示] に設定すると、コマンド メニューでファイルをすばやく見つけることができます。これまでは、コマンド メニューでファイルを検索すると、自分とは関係のないサードパーティのファイルが返されていました。

たとえば、[無視リストに載っているソースを非表示] 設定を有効にして、その他メニューをクリックします。[ファイルを開く] を選択します。「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）。
• [Performance Insights] パネルで、レイアウト シフトの根本原因としてレイアウト スラッシングを引き起こしているスクリプトを特定します。（1343019）。
• [パフォーマンス分析情報] パネルに、LCP ウェブフォントのクリティカル パスを表示します。（1350390）。

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

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

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

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

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

DevTools の新機能

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