このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 106）

Jecelyn Yeen

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

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

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

作成元 / デプロイ別にファイルをグループ化

Chromium のバグ: 1352488

スタックトレースの改善

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

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

たとえば、こちらのデモを開いて、[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 で既知のサードパーティスクリプトが無視リストに自動的に追加されるようになりました。これにより、デバッグ中にコードの問題をより迅速に特定できます。

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

以前のスタックトレースには、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

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

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

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

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

Chromium のバグ: 1352488

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

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

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

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

Chromium のバグ: 1336604

[掲載結果] パネルで新しいインタラクションをトラッキング

[掲載結果] パネルの新しい [インタラクション] トラックを使用すると、インタラクションを可視化し、反応性の潜在的な問題を追跡できます。

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

[掲載結果] パネルでインタラクションをトラッキング

Chromium のバグ: 1347390

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

[パフォーマンス分析情報] パネルに、Largest Contentful Paint（LCP）のタイミングの内訳が表示されるようになりました。これらのタイミングに関する情報を使用して、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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。