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

DevTools の新機能（Chrome 103）

Jecelyn Yeen

レコーダーパネルでダブルクリックおよび右クリックイベントをキャプチャする

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

レコーダーパネルでダブルクリックおよび右クリックイベントをキャプチャする

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

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

レコーダーがこれらのイベントをどのようにキャプチャしたかを理解するには、以下の手順を展開してください。

Doubleclick は 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

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

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

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

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

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