DevTools の新機能（Chrome 105）

Jecelyn Yeen

レコーダーでのステップごとの再生

[レコーダー] パネルでブレークポイントを設定し、ユーザーフローをステップごとに再生できるようになりました。

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

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

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

レコーダーでのステップごとの再生

Chromium の問題: 1257499

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

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

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

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

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

Chromium の問題: 1257499

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

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

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

[パフォーマンス分析情報] をご覧になり、実用的な分析情報を取得して、パネルでウェブサイトのパフォーマンスを改善する方法をご確認ください。

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

Chromium の問題: 1326481

レイアウト シフトの根本原因の候補としてテキストの点滅（FOIT、FOUT）を特定

[パフォーマンス分析情報] パネルで、レイアウト シフトの潜在的な根本原因として FOIT（Flash of Invisible Text）と FOUT（Flash of Unstyled Text）が検出されるようになりました。

レイアウト シフトの考えられる根本原因を表示するには、[レイアウト シフト] トラックのスクリーンショットをクリックします。

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

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

Chromium の問題: 1334628、1328873

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

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

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

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

たとえば、このデモ PWA をインストールします。[Protocol Handlers] セクションで「americano」と入力し、[Test protocol] をクリックして 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 ルールを表示、編集する

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

@scope at ルールは、CSS Cascading and Inheritance Level 6 仕様の一部です。これらのルールを使用すると、CSS でスタイルルールをスコープ設定できます。

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

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

Chromium の問題: 1337777

ソースマップの改善

ソースマップに関する修正をいくつかご紹介します。これにより、デバッグ環境が全体的に改善されます。

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

Chromium の問題: 1335338、1333411

その他のハイライト

このリリースでの重要な修正は次のとおりです。

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

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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