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 キーでデバッガのサイドバー（右）を切り替える

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

DevTools の新機能

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