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

DevTools の新機能（Chrome 103）

Jecelyn Yeen

[Recorder] パネルでダブルクリックイベントと右クリックイベントを取得する

[レコーダー] パネルで、ダブルクリックイベントと右クリックイベントをキャプチャできるようになりました。

[Recorder] パネルでダブルクリックイベントと右クリックイベントを取得する

この例では、録画を開始し、次の手順を試します。

カードをダブルクリックすると拡大されます
カードを右クリックして、コンテキストメニューからアクションを選択します

レコーダーがこれらのイベントをキャプチャする仕組みを理解するには、以下のステップを開いてください。

ダブルクリックは type: doubleClick としてキャプチャされます。
右クリック イベントは type: click としてキャプチャされますが、button プロパティは secondary に設定されています。通常のマウスクリックの button 値は primary です。

Chromium の問題: 1300839、1322879、1299701、1323688

Lighthouse パネルの新しいタイムスパンとスナップショットモード

Lighthouse を使用して、ページの読み込み以外のウェブサイトのパフォーマンスを測定できるようになりました。

Lighthouse パネルの新しいタイムスパンとスナップショットモード

[Lighthouse] パネルで、ユーザーフロー測定の 3 つのモードがサポートされるようになりました。

ナビゲーションレポートでは、1 回のページ読み込みが分析されます。ナビゲーションは、最も一般的なレポートタイプです。最新バージョンより前の Lighthouse レポートは、すべてナビゲーションレポートです。
期間レポートでは、任意の期間（通常はユーザーの操作を含む）が分析されます。
スナップショットレポートでは、特定の状態のページ（通常はユーザーが操作した後）のページが分析されます。

たとえば、こちらのデモページで、カートへの商品追加のパフォーマンスを測定してみましょう。[期間] モードを選択し、[期間を開始] をクリックします。スクロールしてアイテムをいくつかカートに追加します。完了したら、[終了期間] をクリックして、ユーザー操作の Lighthouse レポートを生成します。

タイムスパンモード

各モードに固有のユースケース、メリット、制限事項については、Lighthouse のユーザーフローをご覧ください。

Chromium の問題: 1291284

パフォーマンス分析情報の更新

パフォーマンス分析情報パネルのズームコントロールの改善

DevTools は、プレイヘッドの位置ではなくマウスのカーソルに基づいてズームインするようになりました。最新のカーソルベースのズームでは、トラックの任意の場所にマウスを動かし、すぐに目的の領域にズームインできます。

パフォーマンス分析情報では、パネルを使用して行動につながるインサイトを取得し、ウェブサイトのパフォーマンスを改善する方法を確認できます。

Chromium の問題: 1313382

録音の削除の確認

DevTools で、パフォーマンス記録を削除する前に確認ダイアログが表示されるようになりました。

録音の削除の確認

Chromium の問題: 1318087

[要素] パネルでペインを並べ替える

[要素] パネルのペインを必要に応じて並べ替えられるようになりました。

たとえば、幅の狭い画面で DevTools を開くと、[さらに表示] ボタンの下に [ユーザー補助機能] ペインは表示されません。ユーザー補助機能の問題を頻繁にデバッグする場合に、ペインを前面にドラッグして簡単にアクセスできるようになりました。

[要素] パネルでペインを並べ替える

Chromium の問題: 1146146

ブラウザ外で色を選択する

DevTools で、ブラウザ外の色を選択できるようになりました。これまでは、ブラウザ内で色を選択することしかできませんでした。

[スタイル] ペインで、いずれかのカラープレビューをクリックしてカラー選択ツールを開きます。スポイトを使えば、どこからでも色を選択できます。

ブラウザ外で色を選択する

Chromium の問題: 1245191

デバッグ中のインライン値プレビューの改善

デバッガでインライン値のプレビューが正しく表示されるようになりました。

この例では、double 関数に入力パラメータ a と変数 x があります。return 行にブレークポイントを配置してコードを実行します。インラインプレビューで、a と x の値が正しく表示されます。これまで、デバッガはインラインプレビューで値 x を表示していませんでした。

デバッグ中のインライン値プレビューの改善

Chromium の問題: 1316340

仮想認証システムの大規模な blob をサポートする

[WebAuthn] タブに、仮想認証システム用の新しい [大きな blob をサポート] チェックボックスが追加されました。

このチェックボックスはデフォルトでは無効になっています。常駐鍵をサポートする ctap2 プロトコルを使用する認証システムに対してのみ有効にできます。

仮想認証システムの大規模な blob をサポートする

Chromium の問題: 1321803

[Sources] パネルの新しいキーボードショートカット

[ソース] パネルで、2 つの新しいキーボードショートカットを使用できるようになりました。

ナビゲーション サイドバー（左）を切り替えるには、Ctrl / Command+Shift+Y キーを押します
Ctrl / Command+Shift+H キーでdebuggerのサイドバー（右）を切り替える

[Sources] パネルの新しいキーボードショートカット

Chromium の問題: 1226363

ソースマップの改善

これまで、デベロッパーは次の場合にランダムなエラーに遭遇していました。

Codepen サンプルを使用したデバッグ
Codepen サンプルでパフォーマンスの問題があるソースの場所を特定する
React DevTools が有効な場合に [Component] タブが表示されない

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

インラインスクリプトとソースロケーションのロケーションとオフセットの間のマッピングを修正
フレームのテキスト位置に代替情報を使用する
相対 URL をフレームの URL で適切に解決

Chromium の問題: 1319828、1318635、1305475

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。