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 オブジェクト プロパティの予測入力は、次の順序で表示されます。

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

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

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

Chromium の問題: 1299241

ソースマップの改善

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

  • ブレークポイントは、sourceURL アノテーションを使用してインライン <script> で機能するようになりました。
  • デバッガは、ソースマップを含む [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 の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。