DevTools の新機能（Chrome 103）

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

  • ナビゲーション レポートでは、単一ページの読み込みについて分析します。ナビゲーションは最も一般的なレポート タイプです。現在のバージョンより前の Lighthouse レポートはすべて、ナビゲーション レポートです。
  • 期間レポートでは、任意の期間（ユーザーの操作が見込まれる期間など）を分析できます。
  • スナップショット レポートでは、特定の状態（通常はユーザー操作後）のページを分析できます。

たとえば、こちらのデモページで、カートに商品を追加するパフォーマンスを測定しましょう。[期間] モードを選択し、[期間の開始] をクリックします。スクロールして、カートにいくつかの商品を追加します。完了したら、[End timespan] をクリックして、ユーザー操作の 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 / ⌘+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 の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。