このページは 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] パネルで作成元 / デプロイ別にファイルをグループ化する

新しい [Group files by Authored / Deployed] オプションを有効にすると、[Sources] パネルでファイルを整理できます。フレームワーク（React、Angular など）を使用してウェブアプリケーションを開発する場合、ビルドツール（Webpack、Vite など）によってファイルが圧縮されるため、ソースファイルを操作するのが難しい場合があります。

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

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

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

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

Chromium の問題: 960909

パフォーマンス分析情報パネルの「新しいユーザー速度」トラック

[パフォーマンスの分析情報] パネルに追加された新しいカスタム速度トラックで、録画内の performance.measure() のマークを視覚的に確認できます。

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

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

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

Chromium の問題: 1322808

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

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

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

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

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

Chromium の問題: 1018906

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

[Performance] パネルの新しい [ハードウェアの同時実行] 設定を使用すると、navigator.hardwareConcurrency によってレポートされる値をデベロッパーが構成できます。

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

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

Chromium の問題: 1297439

CSS 変数の予測入力時に色以外の値をプレビューする

CSS 変数の予測入力の際に、色以外の変数に意味のある値が入力されるようになりました。これにより、その値がノード上でどのような変化を持つかをプレビューできます。

CSS 変数の予測入力時に色以外の値をプレビューする

Chromium の問題: 1285091

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

[Application] パネルの [Back/forward cache] ペインには、新しい [frames] セクションが追加されています。これにより、ページが bfcache の対象にならない可能性のあるブロックしているフレームを特定できます。

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

Chromium の問題: 1288158

JavaScript オブジェクトの予測入力候補の改善

JavaScript オブジェクトプロパティの予測入力は、次の順序で表示されます。

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

以前、この提案では継承されたプロパティよりも自身のプロパティしか優先されず、継承されたすべてのプロパティの優先度が同じであるため、関連するプロパティを見つけるのが困難でした。

JavaScript オブジェクトの予測入力候補の改善

Chromium の問題: 1299241

ソースマップの改善

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

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

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 options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。