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

DevTools の新機能（Chrome 104）

Jecelyn Yeen

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

フレームの再開機能が復活しました。関数のどこかで一時停止すると、上記のコードを再実行できます。以前は、安定性の問題により、この機能は Chrome 92 でサポートが終了し、削除されました。

この例では、デバッガは最初、toggleColorScheme 関数の最後にあるブレークポイント（343 行目）で一時停止しています。toggleColorScheme 関数の先頭からデバッグを再開するには、[Debugger] ペインの [Call stack] セクションを開き、toggleColorScheme を右クリックして [Restart Frame] を選択します。

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

Chromium の問題: 1303521

[レコーダー] パネルの「遅いリプレイ」オプション

ユーザーフローを遅い速度（遅い、非常に遅い、非常に遅い）で再生できるようになりました。これらのオプションを使用すると、各ステップのリプレイを画面上でより正確に把握できます。

[レコーダー] パネルを開き、新しい録音を開始します。録画が完了したら、[Replay] プルダウンボタンをクリックします。リプレイを開始する速度を選択します。

[レコーダー] パネルの「遅いリプレイ」オプション

Chromium の問題: 1306756

[Recorder] パネルの拡張機能を作成する

Chrome 拡張機能を構築またはインストールして、リプレイスクリプトを任意の形式でエクスポートできるようになりました。作成方法については、レコーダー拡張機能 API のドキュメントをご覧ください。

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

[Recorder] パネルのカスタム拡張機能

Chromium の問題: 1325751

[Sources] パネルで、[Authored / Deployed] 別にファイルをグループ化する

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

このチェックボックスを使用すると、ファイルを 2 つのカテゴリに分類して、ファイルをすばやく検索できます。

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

こちらの React のデモで実際にお試しください。

[Sources] パネルで、[Authored / Deployed] 別にファイルをグループ化する

Chromium の問題: 960909

[パフォーマンス分析情報] パネルの新しいカスタム速度トラック

[パフォーマンス分析情報] パネルの新しい [カスタム速度] トラックを使用すると、記録中の performance.measure() マークを可視化できます。

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

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

[パフォーマンス分析情報] パネルの [カスタム速度] トラック

Chromium の問題: 1322808

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

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

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

<template> 要素と <slot> 要素を使用して、ウェブコンポーネントの Shadow DOM へのデータ入力に使用できる柔軟なテンプレートを作成する方法を学習してください。

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

Chromium の問題: 1018906

パフォーマンス記録でハードウェアの同時実行をシミュレートする

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

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

パフォーマンス記録でハードウェアの同時実行をシミュレートする

Chromium の問題: 1297439

CSS 変数のオートコンプリート時に色以外の値をプレビューする

CSS 変数をオートコンプリートするときに、DevTools で色以外の変数に意味のある値が入力されるようになりました。これにより、値がノードでどのような変更になるかをプレビューできます。

CSS 変数のオートコンプリート時に色以外の値をプレビューする

Chromium の問題: 1285091

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

[アプリケーション] パネルの [バックフォワードキャッシュ] ペインに新しい [frames] セクションが追加され、ページの bfcache の対象を妨げている可能性のあるフレームを特定できるようになりました。

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

Chromium の問題: 1288158

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

JavaScript オブジェクトプロパティのオートコンプリートは、次の順序で表示されるようになりました。

列挙可能なプロパティを所有する
列挙できないプロパティを所有
継承された列挙型プロパティ
継承された列挙不可能なプロパティ

以前、開発者は、関連するプロパティを見つけるのが困難でした。これは、提案が継承されたプロパティよりも自身のプロパティのみを優先し、継承されたすべてのプロパティに同等の優先度が与えられていたためです。

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

Chromium の問題: 1299241

ソースマップの改善

以下では、全体的なデバッグエクスペリエンスを向上させるために、ソースマップにいくつかの修正を加えます。

ブレークポイントが sourceURL アノテーションとインライン <script> で動作するようになりました。
デバッガは、ソースマップを使用して [スコープ] ビューでブロックスコープ変数を解決します。
デバッガは、[スコープ] ビューのアロー関数の変数をソースマップとともに解決するようになりました。

Chromium に関する問題: 1329113、1322115

その他のハイライト

このリリースでの注目すべき修正は次のとおりです。

[ソース] パネルの [オートコンプリート] 設定を修正しました。以前は、設定が無効になっていてもオートコンプリートは常に有効でした。（1323286）
最新のカラーパターン形式を解析するように [Application] パネルの [Manifest] タブを更新しました。（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 の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。