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

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

最上位レイヤ要素を可視化できるように、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 を表示します。ルールの宣言をクリックして編集します。

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

Chromium の問題: 1337777

ソースマップの改善

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

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

Chromium の問題: 1335338、1333411

その他のハイライト

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

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

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

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