DevTools の新機能（Chrome 104）

Jecelyn Yeen

デバッグ中にフレームを再起動する

フレームを再起動機能が復活しました。関数内のどこかで一時停止したときに、上記のコードを再実行できます。この機能は、以前は安定性の問題により Chrome 92 で非推奨となり、削除されました。

この例では、デバッガは最初に toggleColorScheme 関数の末尾付近のブレークポイント（343 行目）で一時停止しました。toggleColorScheme 関数の先頭からデバッグを再開するには、[デバッガ] ペインの [コールスタック] セクションを開き、toggleColorScheme を右クリックして [フレームを再起動] を選択します。

Chromium の問題: 1303521

[Recorder] パネルの低速再生オプション

ユーザーフローを低速（遅い、非常に遅い、極めて遅い）で再生できるようになりました。これらのオプションを使用すると、画面上で各ステップの再生をより詳細に確認できます。

Recorder パネルを開いて、新しい録音を開始します。録画が完了したら、[Replay]（再生）プルダウン ボタンをクリックします。速度を選択してリプレイを開始します。

Chromium の問題: 1306756

Recorder パネルの拡張機能をビルドする

Chrome 拡張機能をビルドまたはインストールして、お好みの形式で再生スクリプトをエクスポートできるようになりました。ビルド方法については、Recorder 拡張機能 API のドキュメントをご覧ください。

デモ拡張機能をインストールするには、ドキュメントに記載されているこちらの手順に沿って操作します。

Chromium の問題: 1325751

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

[ソース] パネルでファイルを整理するには、新しい [作成者 / デプロイでファイルをグループ化] オプションを有効にします。フレームワーク（React、Angular など）を使用してウェブ アプリケーションを開発する場合、ビルドツール（Webpack、Vite など）によって生成された最小化ファイルが原因で、ソースファイルのナビゲーションが困難になることがあります。

このチェックボックスをオンにすると、ファイルを 2 つのカテゴリにグループ化して、ファイルをすばやく検索できます。

• 作成済み。IDE で表示するソースファイルと同様です。DevTools は、ビルドツールによって提供されるソースマップに基づいてこれらのファイルを生成します。
• デプロイ済み。ブラウザが読み取る実際のファイル。通常、これらのファイルは最小化されています。

React のデモでご自身でお試しください。

Chromium の問題: 960909

[パフォーマンス分析情報] パネルの新しい [ユーザー タイミング] トラック

[パフォーマンス分析情報] パネルの新しい [ユーザー タイミング] トラックを使用して、記録内の performance.measure() マークを視覚化します。

たとえば、このウェブページでは、performance.measure() メソッドを使用してテキストの読み込みにかかった時間を計算しています。

ページの読み込みの測定を開始すると、ユーザー タイミング トラックが記録に表示されます。[タイミング] 項目をクリックすると、サイドペインに詳細が表示されます。

Chromium の問題: 1322808

要素の割り当てられたスロットを表示する

[要素] パネルのスロット付き要素に、新しい slot バッジが表示されます。レイアウトの問題をデバッグする際に、この機能を使用すると、ノードのレイアウトに影響する要素をすばやく特定できます。

この例には、名前付きスロットがいくつかあるカードが含まれています。カードの person-occupation スロットを調べ、その横にある slot バッジをクリックして、割り当てられたスロットを表示します。

<template> 要素と <slot> 要素を使用して、ウェブ コンポーネントのシャドー DOM の入力に使用できる柔軟なテンプレートを作成する方法を学習します。

Chromium の問題: 1018906

パフォーマンス レコーディングのハードウェアの同時実行をシミュレートする

[パフォーマンス] パネルの新しい [ハードウェアの同時実行数] 設定により、デベロッパーは navigator.hardwareConcurrency によって報告される値を構成できます。

一部のアプリケーションでは、navigator.hardwareConcurrency を使用してアプリケーションの並列処理の程度を制御します（たとえば、Emscripten pthread プールサイズを制御します）。この機能を使用すると、デベロッパーはさまざまなコア数でアプリケーションのパフォーマンスをテストできます。

Chromium の問題: 1297439

CSS 変数の自動補完時に色以外の値をプレビュー

CSS 変数を自動補完する際に、DevTools で色以外の変数に意味のある値が入力されるようになりました。これにより、値がノードにどのような変更をもたらすかをプレビューできます。

Chromium の問題: 1285091

[バックフォワード キャッシュ] ペインでブロックしているフレームを特定する

[アプリケーション] パネルの [戻る/進むキャッシュ] ペインに、新しい [フレーム] セクションが追加されました。これにより、ページが bfcache の対象外となる原因となっているブロック フレームを特定できます。

Chromium の問題: 1288158

JavaScript オブジェクトのオートコンプリート候補の改善

JavaScript オブジェクト プロパティの自動補完が、次の順序で表示されるようになりました。

1. Own enumerable properties
2. Own non-enumerable properties
3. 継承された列挙可能なプロパティ
4. 継承された列挙不可能なプロパティ

以前は、提案で継承されたプロパティよりも独自のプロパティが優先され、継承されたすべてのプロパティに同じ優先順位が付けられていたため、関連性の高いプロパティを見つけるのが困難でした。

Chromium の問題: 1299241

ソースマップの改善

ソースマップに関する修正をいくつかご紹介します。これにより、デバッグ環境が全体的に改善されます。

• ブレークポイントが、sourceURL アノテーションを含むインライン <script> で機能するようになりました。
• デバッガで、ソースマップを使用して Scope ビューのブロック スコープ変数に解決できるようになりました。
• デバッガで、ソースマップを使用して Scope ビューの arrow 関数内の変数が解決されるようになりました。

Chromium の問題: 1329113、1322115

その他のハイライト

このリリースでの重要な修正は次のとおりです。

• [ソース] パネルの [オートコンプリート] 設定を修正しました。以前は、設定が無効になっていても自動補完が常にオンになっていました。（1323286）
• [アプリケーション] パネルの [マニフェスト] タブを更新し、最新のカラースキーム形式を解析するようにしました。（1318305）
• [パフォーマンス分析情報] パネルの <script async> レンダリング ブロックの問題に関する提案を改善しました。以前は、スクリプトがすでに非同期としてマークされている場合でも、DevTools で add async attribute to the script tag が提案されていました。（1334096）
• パフォーマンス分析情報パネルで、レイアウト シフトの原因となる可能性のある iframe が検出されるようになりました。iframe の詳細は、[詳細] ペインで確認できます。（1328873）
• コマンド メニューで [ファイルを開く] を選択すると、作成されたファイル（ソースマップによって生成されたファイル）の優先順位が上がり、同様の名前のデプロイされたスクリプトよりも上に表示されるようになりました。（1312929）

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

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

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

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

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

DevTools の新機能

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