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

DevTools の新機能（Chrome 106）

Jecelyn Yeen

[Sources] パネルで、[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 は、サードパーティのスクリプトです。その他メニューをクリックし、[無視リストのソースを非表示] を選択して、ペインで非表示にします。

無視リストに登録されているソースを [ソース] パネルで非表示にする

Chromium のバグ: 1352488

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

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

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

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

Chromium のバグ: 1336604

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

[パフォーマンス] パネルの新しい [インタラクション] トラックを使用すると、インタラクションを視覚化し、応答に関する潜在的な問題を追跡できます。

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

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

Chromium のバグ: 1347390

[パフォーマンス分析情報] パネルでの LCP 時間の内訳

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

[パフォーマンス分析情報] パネルでの LCP 時間の内訳

Chromium のバグ: 1351735

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

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

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

Chromium のバグ: 1351383

その他のハイライト

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

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

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

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

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

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