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

DevTools の新機能（Chrome 105）

Jecelyn Yeen

レコーダーでの詳細なリプレイ

[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）が検出されるようになりました。

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

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

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

Chromium に関する問題: 1334628、1328873

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

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

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

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

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

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

Chromium の問題: 1300613

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

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

最近、<dialog> 要素がどのブラウザでも利用可能になりました。ダイアログを開くと、最上位レイヤに配置されます。トップレベルコンテンツは、他のすべてのコンテンツの上にレンダリングされます。

このデモで、[Open dialog] をクリックします。

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

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

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

Chromium の問題: 1313690

Wasm デバッグ情報を実行時に添付

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

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

ALT_TEXT_HERE

Chromium の問題: 1341255

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

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

Chrome 104 では、DevTools にフレームの再起動機能が復活します。一時停止中の関数を編集できませんでした。関数を中断して一時停止した状態でその関数を編集するのはよくあることです。

このアップデートにより、デバッガは関数を自動的に再起動しますが、次の制限が適用されます。

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

デバッグ中のライブ編集

Chromium の問題: 1334484

[Styles] ペインで @scope のルールを表示、編集する

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

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

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

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

[Styles] ペインのルールの @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 の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。