DevTools の新機能（Chrome 105）

Jecelyn Yeen

Recorder でのステップごとの再生

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

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

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

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

Recorder でのステップごとの再生

Chromium の問題: 1257499

Recorder パネルでマウスオーバー イベントをサポート

レコーダーで、録画中にマウスオーバー（ホバー）の手順を手動で追加できるようになりました。

このデモでは、ホバーするとポップアップ メニューが表示されます。ユーザーフローを記録してメニュー アイテムをクリックしてみてください。

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

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

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

[マニフェスト] ペインのプロトコル ハンドラ

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

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

[Application] > [Manifest] ペインで [Protocol Handlers] セクションに移動します。利用可能なすべてのプロトコルはこちらで確認、テストできます。

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

[マニフェスト] ペインのプロトコル ハンドラ

Chromium の問題: 1300613

要素パネルのトップレイヤ バッジ

トップレイヤ バッジを使用すると、トップレイヤのコンセプトを理解し、トップレイヤ コンテンツの変化を可視化できます。

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

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

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

最上位レイヤのコンテナ要素から最上位レイヤのツリー要素に移動するには、最上位レイヤのコンテナ内の要素またはその背景の横にある開くボタンをクリックします。

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

要素パネルのトップレイヤ バッジ

Chromium の問題: 1313690

実行時に Wasm デバッグ情報をアタッチする

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

[ソース] パネルで Wasm ファイルを開きます。エディタで右クリックし、[DWARF デバッグ情報を追加...] を選択して、デバッグ情報をオンデマンドでアタッチします。

ALT_TEXT_HERE

Chromium の問題: 1341255

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

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

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

このアップデートにより、デバッガは次の制限付きで関数を自動的に再起動します。

  • 一時停止中に編集できるのは一番上の関数のみ
  • スタック内の下位で同じ関数を再帰的に呼び出していない

デバッグ中のライブ編集

Chromium の問題: 1334484

スタイルペインで @scope at ルールを表示、編集する

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

@scope アットルールは、CSS カスケーディングと継承レベル 6 仕様の一部です。これらのルールにより、デベロッパーは CSS のスタイルルールのスコープを設定できます。

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

スタイルペインでルールの @scope

Chromium の問題: 1337777

ソースマップの改善

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

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

Chromium の問題: 1335338、1333411

その他のハイライト

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

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

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

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

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

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

DevTools の新機能

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