DevTools の新機能（Chrome 103）

Jecelyn Yeen

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

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

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

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

Recorder がこれらのイベントをキャプチャする方法については、次の手順をご覧ください。

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

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

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

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

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

• ナビゲーション レポートでは、単一ページの読み込みについて分析します。ナビゲーションは最も一般的なレポート タイプです。最新バージョンより前の 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 プロトコルの認証システムでのみ有効にできます。

Chromium の問題: 1321803

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

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

• Ctrl / ⌘+Shift+Y キーを押して、ナビゲーション サイドバー（左）を切り替える
• Ctrl / Command+Shift+H キーを押して、デバッガ サイドバー（右側）を切り替える

Chromium の問題: 1226363

ソースマップの改善

以前は、デベロッパーは次のような場合にランダムにエラーが発生していました。

• Codepen を使用したデバッグ例
• Codepen の例でパフォーマンスの問題のソースの場所を特定する
• React DevTools が有効になっているときに [コンポーネント] タブが表示されない

デバッグ全体の利便性を向上させるために、ソースマップに関するいくつかの修正を行いました。

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

Chromium の問題: 1319828、1318635、1305475

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

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

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

次のオプションを使用して、DevTools の新機能、更新、その他のトピックについて話し合います。

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

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。