DevTools の新機能（Chrome 104）

Jecelyn Yeen

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

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

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

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

Chromium の問題: 1303521

[Recorder] パネルの [スロー再生] オプション

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

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

[Recorder] パネルの [スロー再生] オプション

Chromium の問題: 1306756

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

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

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

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

Chromium の問題: 1325751

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

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

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

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

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

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

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

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

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

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

Chromium の問題: 1288158

JavaScript オブジェクトの自動入力候補の改善

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

  1. 独自の列挙型プロパティ
  2. 列挙できないプロパティを所有する
  3. 継承された列挙型プロパティ
  4. 継承された列挙不可能なプロパティ

以前は、候補に表示されるプロパティは継承プロパティよりも独自プロパティのみで、すべての継承プロパティに同じ優先度が設定されていたため、関連するプロパティを見つけるのが難しかったのです。

JavaScript オブジェクトの自動入力候補の改善

Chromium の問題: 1299241

ソースマップの改善

デバッグ全体の利便性を向上させるために、ソースマップに関するいくつかの修正を行いました。

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

Chromium の問題: 1329113、1322115

その他のハイライト

このリリースで修正された主な点は次のとおりです。

  • [ソース] パネルの [自動入力] 設定を修正しました。以前は、設定が無効になっている場合でも、自動入力は常にオンになっていました。（1323286）
  • [アプリケーション] パネルの [マニフェスト] タブを更新し、最新のカラーパターン形式を解析できるようにしました。（1318305）
  • [パフォーマンス分析情報] パネルで、<script async> レンダリングのブロックに関する問題の推奨事項を改善しました。以前は、スクリプトがすでに非同期としてマークされているにもかかわらず、DevTools は add async attribute to the script tag を推奨していました。（1334096）
  • [パフォーマンス分析情報] パネルで、レイアウト シフトの考えられる原因として iframe が検出されるようになりました。iframe の詳細は [詳細] ペインで確認できます。（1328873）
  • [Command] メニューで [open file] を選択すると、作成されたファイル（ソースマップによって生成されたファイル）の優先度が上がり、同様の名前のデプロイ済みスクリプトの上に表示されるようになります。（1312929）

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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