DevTools の新機能（Chrome 122）

レコーダーの拡張機能の公式コレクションがリリースされました

エクスポートと再生の レコーダー拡張機能の公式コレクションが公開されました。

レコーダーから直接コレクションを開くには、レコーダー パネルの上部にあるアクションバーで、ダウンロード エクスポート > [拡張機能を取得...] を選択します。

ネットワークの改善

このバージョンでは、[ネットワーク] パネルにさまざまな改善が加えられています。

[ステータス] 列に表示される失敗の理由

[ステータス] 列に、常に失敗の理由が表示されるようになりました。以前は、check_box [Big request rows] をオンにするか、表でリクエストを選択する必要がありました。

Chromium の問題: 1506760。

[コピー] サブメニューの改善

リクエストの [コピー] サブメニューが整理されました。

また、[cURL としてコピー] オプションで、Windows のクリップボードに正しいコマンドがコピーされるようになりました。

Chromium の問題: 1267033、1276452、798498。

パフォーマンスの改善

このバージョンでは、[パフォーマンス] パネルにさまざまな改善が加えられています。

タイムラインのパンくずリスト

[パフォーマンス] パネルの上部にある [タイムライン] で、ブレッドクラムを設定してブレッドクラム間を移動できるようになりました。

パンくずリストを設定するには、[タイムライン] で範囲を選択し、その上にカーソルを置いて、[N ミリ秒] zoom_in ボタンをクリックします。ネストされたパンくずリストを連続して複数作成できます。ズームレベルを切り替えるには、[タイムライン] の上にあるチェーンの対応するパンくずをクリックします。パンくずリストの動作については、次の動画をご覧ください。

Chromium の問題: 1467739。

メイン トラックのイベント イニシエータ

[パフォーマンス] > [メイン] トラックに、デフォルトで、イニシエータとそれによって発生したイベントを結ぶ矢印が表示されるようになりました。

• スタイルまたはレイアウトの無効化 -> スタイルの再計算またはレイアウト
• アニメーション フレームのリクエスト -> アニメーション フレームの呼び出し
• Request Idle Callback -> Fire Idle Callback
• タイマーのインストール -> タイマーの呼び出し
• WebSocket の作成 -> 送信... と WebSocket handshake の受信または WebSocket の破棄

矢印を表示するには、トレースでそのようなイベントを見つけてクリックします。以前はこの機能は試験運用版でした。

Chromium の問題: 1434596。

Node.js DevTools の JavaScript VM インスタンス セレクタ メニュー

Node.js DevTools の [パフォーマンス] パネルで、アクションバーの対応するプルダウン メニューから JavaScript VM インスタンスを選択できるようになりました。同様の機能は、まもなく非推奨となる JavaScript プロファイラでも利用できました。

Chromium の問題: 1511813。

要素の改善

このバージョンでは、[要素] パネルにさまざまな改善が加えられています。

次の 2 つの機能に加えて、[要素] パネルで最後に開いたタブ（[計算値] や [プロパティ] など）が記憶されるようになりました。

::view-transition 疑似要素がスタイルで編集可能になりました

インスペクタ スタイルシートを使用して、[スタイル] で ::view-transition CSS 擬似要素を編集できるようになりました。

詳細については、View Transitions API を使用したスムーズでシンプルなトランジションをご覧ください。

Chromium の問題: 1511233。

ブロック コンテナの align-content プロパティのサポート

align-content プロパティが、table-caption や table-cell などの任意のブロック コンテナで動作するようになりました。以前は、グリッドとフレックスでのみ機能していました。

Chromium の問題: 1500511。

[ソース] の新しいショートカットとコマンド

Cmd（Mac）/ Ctrl（Win）+ Shift キーを押しながら [ソース] の行番号をクリックして、ログポイントを作成できるようになりました。このショートカットは、条件付きブレークポイントの Cmd（Mac）/ Ctrl（Win）+ クリックに加えて追加されたものです。

コマンド メニューに、エディタのプルダウン メニューにある対応するオプションと同じ動作をする ナビゲータのサイドバーにアクティブなファイルを表示コマンドが追加されました。

Chromium の問題: 1486933、1467464。

エミュレートされた折りたたみ式デバイスの姿勢サポート

デバイスモードで、エミュレートされた折りたたみ式デバイスの姿勢（連続または折りたたみ）を設定できるようになりました。連続した姿勢とは「平ら」な位置を指し、折りたたむとディスプレイのセクション間に角度ができます。

また、デバイスのリストに、新しいエミュレートされた折りたたみ式デバイス（Asus Zenbook Fold）が追加されました。

Chromium の問題: 1066842。

動的テーマ設定

DevTools が Chrome のカラーテーマに自動的に一致するようになりました。テーマを設定するには:

1. 新しいタブを開き、右下の [編集] [Chrome をカスタマイズ] をクリックします。
2. [デザイン] で、[壁紙] [テーマを変更] からテーマを選択するか、カラーパレットを選択します。

Chromium の問題: 1483276。

[ネットワーク] パネルと [アプリケーション] パネルでのサードパーティ Cookie の段階的廃止に関する警告

[ネットワーク] パネルと [アプリケーション] パネルの両方で、トラッキング防止によるサードパーティ制限の影響を受ける Cookie がハイライト表示され、警告が表示されるようになりました。

[ネットワーク] で、警告アイコンが付いたリクエストを見つけてクリックし、[Cookie] タブを開きます。

[アプリケーション] で、[ストレージ] > [Cookie] に移動し、ドメインをクリックします。黄色でハイライト表示された Cookie はブラウザに保存されません。

警告アイコンにカーソルを合わせると、問題の説明が表示されます。アイコンをクリックすると、[問題] タブが開き、詳細情報が表示されます。

また、表の Cookie がデフォルトで名前順に並べ替えられるようになりました。

Chromium の問題: 1506225、1503961。

Lighthouse 11.4.0

[Lighthouse] パネルで Lighthouse 11.4.0 が実行されるようになりました。変更点の詳細なリストをご覧ください。主な変更点としては、ウェブサイトでサードパーティ Cookie がまだ使用されているかどうかを検出できる新しい監査機能が追加されたことが挙げられます。

DevTools の Lighthouse パネルの基本的な使用方法については、Lighthouse: ウェブサイトの速度を最適化するをご覧ください。

Chromium の問題: 772558。

ユーザー補助

このバージョンでは、アクセシビリティが次のように改善されています。

• 設定 [設定] > [テスト] を開くと、[検索] ボックスに自動的にフォーカスが移動するようになりました。
• [ネットワーク] > [フィルタ] の [キャンセル] 入力のクリアボタンにフォーカスできるようになりました。
• [ソース] > [ページ] のファイルツリーが、ハイコントラスト モードで正しく表示されるようになりました。
• スクリーン リーダーで次の内容が正しく読み上げられるようになりました。
  • [Sources] > [Breakpoints] のチェックボックスの状態。
  • 候補リストの位置とインデックス情報。
  • 設定 設定 > 位置情報で位置情報を追加または削除したときのアクションの結果。
  • 除外ルールのグループ（一般的なルールまたはカスタムルール）は、設定 設定 > 無視リストにあります。

Chromium の問題: 1504938、1499868、1512161、1515224、1515418、1516998、1517015。

その他のハイライト

このリリースにおける注目すべき修正と改善点は次のとおりです。

• アニメーション:
  • スクリーンショットのポップオーバーが範囲外にレンダリングされるバグを修正しました（1506991）。
  • 削除されたアニメーション ノードが削除済みとしてマークされないバグを修正しました（1506561）。
• ネットワーク:
  • ヘッダーのオーバーライド: [ヘッダー] タブに誤った紫色のドット アイコンが表示されるバグを修正しました（1507856）。
  • プレビュー: 不要な二重デコードに関するバグを修正しました（1509336）。
  • ショート動画のリクエストが表示されないバグを修正しました（1509862）。
• アプリケーション > IndexedDB: 他のパネルとの整合性を保つため、アクションバーのボタンを並べ替えました（1393800）。
• センサー: 位置情報が利用できない場合にコールバックが誤って成功するバグを修正しました（1486859）。
• パフォーマンス:
  • [ガベージを収集] ボタンのアイコンが、[ゴミ箱] ではなく [モップ] になりました（1507530）。
  • about:blank に移動しても、パフォーマンス トレースでデータが保持されるようになりました（1509947）。

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

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

DevTools の新機能

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