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

DevTools の新機能（Chrome 105）

Jecelyn Yeen

レコーダーで段階を追って再生

[Recorder] パネルで、ブレークポイントを設定してユーザーフローを段階的に再生できるようになりました。

ブレークポイントを設定するには、ステップの横にある青い点をクリックします。ユーザーフローを再生できます。リプレイはステップを実行する前に一時停止します。ここから、リプレイの続行、ステップの実行、リプレイのキャンセルができます。

この機能を使用すると、ユーザーフローを簡単に完全に可視化してデバッグできます。

詳しくは、レコーダー機能のリファレンスをご覧ください。

レコーダーで段階を追って再生

Chromium の問題: 1257499

[レコーダー] パネルでのマウスオーバーイベントのサポート

レコーダーで、録画にマウスオーバー（カーソルを合わせる）ステップを手動で追加できるようになりました。

このデモでは、カーソルを合わせるとポップアップメニューが表示されます。ユーザーフローを記録して、メニュー項目をクリックしてみましょう。

ユーザーフローをもう一度再生すると、レコーダーは記録中にマウスオーバーイベントを自動的にキャプチャしないため、失敗します。この問題を解決するには、ステップを手動で追加して、メニュー項目をクリックする前にセレクタにカーソルを合わせます。

レコーダーでのマウスオーバーイベントのサポート

Chromium の問題: 1257499

パフォーマンス分析情報パネルの Largest Contentful Paint（LCP）

LCP は、ユーザーが認識した読み込み速度を測定するための、ユーザー中心の重要な指標です。Largest Contentful Paint（LCP）のクリティカルパスと根本原因を確認できるようになりました。

パフォーマンスの記録で、タイムラインの LCP バッジをクリックします。[詳細] ペインでは、LCP スコアを表示して、LCP を低下させるリソースを修正する方法、LCP リソースのクリティカルパスを確認できます。

パフォーマンス分析情報では、パネルを使用して行動につながるインサイトを取得し、ウェブサイトのパフォーマンスを改善する方法を確認できます。

パフォーマンス分析情報パネルの LCP

Chromium の問題: 1326481

レイアウトシフトの潜在的な根本原因として短時間のテキスト（FOIT、FOUT）を特定する

[パフォーマンス分析情報] パネルで、レイアウトシフトの根本原因として、非表示テキストのフラッシュ（FOIT）とスタイルなしテキスト（FOUT）の点滅が検出されるようになりました。

レイアウトシフトの潜在的な原因を確認するには、[レイアウトシフト] トラックのスクリーンショットをクリックします。

レイアウトシフトを防ぐ方法については、WebFont の読み込みとレンダリングを最適化するをご覧ください。

パフォーマンス分析情報パネルの FOUT

Chromium の問題: 1334628、1328873

[Manifest] ペインのプロトコルハンドラ

DevTools を使用して、プログレッシブウェブアプリ（PWA）の URL プロトコルハンドラ登録をテストできるようになりました。

URL プロトコルハンドラ登録を使用すると、インストール済みの PWA で特定のプロトコル（magnet、web+example など）を使用するリンクを処理して、より統合されたエクスペリエンスを実現できます。

[アプリケーション] > [マニフェスト] ペインから [プロトコルハンドラ] セクションに移動します。ここでは、使用可能なすべてのプロトコルを表示してテストできます。

たとえば、こちらのデモ PWA をインストールします。[プロトコルハンドラ] セクションで「americano」と入力し、[プロトコルをテスト] をクリックして PWA でコーヒーのページを開きます。

[Manifest] ペインのプロトコルハンドラ

Chromium の問題: 1300613

[要素] パネルの最上層のバッジ

最上位レイヤのバッジを使用すると、最上位レイヤのコンセプトを理解し、最上位レイヤのコンテンツがどのように変化するかを視覚的に確認できます。

最近、<dialog> 要素がブラウザで安定版になりました。ダイアログを開くと、最上位レイヤに配置されます。最上位コンテンツは、他のすべてのコンテンツの上に表示されます。

こちらのデモでは、[ダイアログを開く] をクリックします。

最上位レイヤ要素を可視化できるように、DevTools は DOM ツリーに最上位レイヤコンテナ（#top-layer）を追加します。これは </html> 終了タグの後に配置されます。

最上位レイヤのコンテナ要素から最上位レイヤのツリー要素にジャンプするには、最上位レイヤコンテナ内の要素またはその背景の横にある [表示] ボタンをクリックします。

最上位レイヤのツリー要素（ダイアログの要素など）の横にある最上位レイヤのバッジをクリックすると、最上位レイヤのコンテナに移動します。

Chromium の問題: 1313690

実行時に Wasm デバッグ情報を追加する

実行時に Wasm の DWARF デバッグ情報をアタッチできるようになりました。これまでは、[Sources] パネルでは、JavaScript ファイルと Wasm ファイルへのソースマップのアタッチのみをサポートしていました。

[Sources] パネルで Wasm ファイルを開きます。オンデマンドでデバッグ情報をアタッチするには、エディタ内で右クリックし、[Add DWARFDebugging info...] を選択します。

ALT_TEXT_HERE

Chromium の問題: 1341255

デバッグ中のライブ編集をサポート

デバッガを再起動せずに、スタックの一番上の関数を編集できるようになりました。

Chrome 104 では、DevTools に再起動フレーム機能が導入されます。現在一時停止されている関数を編集することはできませんでした。デベロッパーが関数を分割し、その関数を一時停止している間に編集することはよくあります。

この更新により、デバッガは次の制限とともに関数を自動的に再起動します。

一時停止中は、一番上の関数のみ編集できます
スタックの下位にある同じ関数で再帰呼び出しを行わない

デバッグ中のライブ編集

Chromium の問題: 1334484

[Styles] ペインのルールで @scope の表示と編集を行う

CSS @scope アットルールを [スタイル] ペインで表示、編集できるようになりました。

ルールの @scope は、CSS カスケードと継承レベル 6 の仕様の一部です。このルールを使用すると、CSS でスタイルルールのスコープを設定できます。

こちらのデモページを開き、<div class=”dark-theme”> 要素内のハイパーリンクを調べます。[スタイル] ペインで、@scope at-rules を表示します。ルールの宣言をクリックして編集します。

注: CSS @scope は現在開発中です。この機能をテストするには、chrome://flags/#enable-experimental-web-platform-features で試験運用版ウェブプラットフォーム機能フラグを有効にします。

[スタイル] ペインのルールの @scope

Chromium の問題: 1337777

ソースマップの改善

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

DevTools で、ソースマップ識別子を句読点によって適切に解決するようになりました。最新の圧縮ファイル（esbuild など）の中には、識別子とそれに続く句読点（カンマ、かっこ、セミコロン）をマージするソースマップが生成されるものがあります。
DevTools で、super 呼び出しによってコンストラクタのソースマップ名が解決されるようになりました。
重複する正規 URL に対するソースマップ URL のインデックス登録を修正しました。以前は、正規 URL が重複しているため、一部のファイルでブレークポイントが有効になっていませんでした。

Chromium の問題: 1335338、1333411

その他のハイライト

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

ローカルストレージの Key-Value ペアを削除したら、[Application] > [Local Storage] ペインのテーブルから適切に削除します。（1339280）。
[ソース] パネルで CSS ファイルを表示するときに、カラープレビューが正しく表示されるようになりました。以前は、ポジションがずれていました。（1340062）。
[レイアウト] ペインに CSS のフレックスアイテムとグリッドアイテムを一貫して表示し、[要素] パネルにバッジとして表示します。以前は、Flex と Grid のアイテムが両方の場所にランダムに欠けていました。（1340441、1273992）。
フレームが広告としてラベル付けされる原因となったスクリプトが DevTools で検出された場合、広告フレームに対して新しい [クリエイター広告スクリプト] リンクを使用できます。[Application] > [Frames] からフレームを開くことができます。（1217041）。

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

デフォルトの開発ブラウザとして 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 動画にコメントを残してください。