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

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 など）を使用するリンクを処理して、より統合されたエクスペリエンスを実現できます。

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

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

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

Chromium の問題: 1300613

[要素] パネルの最上位レイヤバッジ

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

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

このデモで、[Open 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 @ ルールは、CSS カスケーディングと継承レベル 6 の仕様の一部です。これらのルールを使用すると、デベロッパーは CSS でスタイルルールをスコープ設定できます。

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

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

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

Chromium の問題: 1337777

ソースマップの改善

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

DevTools で、句読点を含むソースマップ識別子が正しく解決されるようになりました。最新のミニファイア（esbuild など）では、識別子と後続の句読点（カンマ、かっこ、セミコロン）を結合したソースマップが生成されます。
DevTools で、super 呼び出しを含むコンストラクタのソースマップ名が解決されるようになりました。
重複する正規 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 の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

フィードバックや機能リクエストは、crbug.com からお送りください。
DevTools の その他のオプション > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
@ChromeDevTools にツイートします。
DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。