DevTools の新機能（Chrome 103）

Jecelyn Yeen

[レコーダー] パネルでダブルクリックと右クリックのイベントをキャプチャする

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

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

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

レコーダーがこれらのイベントをキャプチャした方法を確認するには、手順を展開します。

• ダブルクリックは 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] タブに、仮想認証システム用の [Supports large blob] チェックボックスが追加されました。

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

Chromium の問題: 1321803

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

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

• Control / Command+Shift+Y キーを押して、ナビゲーション サイドバー（左側）の表示 / 非表示を切り替えます。
• Control / 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 の新機能シリーズで取り上げられたすべての内容の一覧。