DevTools の新機能（Chrome 122）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

Recorder からコレクションを直接開くには、Recorder パネルの上部にあるアクションバーで、アイコン [Export] > [Get extensions...] を選択します。

ネットワークの改善

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

[ステータス] 列の失敗した理由

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

失敗した理由が [ステータス] 列に表示される前と後。

Chromium の問題: 1506760。

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

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

コピー サブメニューの改善前と改善後。

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

Chromium の問題: 1267033、1276452、798498。

パフォーマンスの改善

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

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

[パフォーマンス] パネルの上部にある [タイムライン] で、パンくずリストを設定したり、パンくずリスト間を移動したりできるようになりました。

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

Chromium の問題: 1467739。

メイントラックのイベント開始者

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

  • スタイルまたはレイアウトの無効化 -> [スタイルを再計算] または [レイアウト]
  • アニメーション フレームのリクエスト -> アニメーション フレームの呼び出し
  • アイドル状態のコールバックをリクエストする -> アイドル状態のコールバックを実行する
  • タイマーのインストール -> タイマーの呼び出し
  • WebSocket の作成 -> [送信...]、[WebSocket handshake の受信]、または [WebSocket の破棄]

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

リクエストからの矢印とアイドル状態のコールバックの呼び出し。

Chromium の問題: 1434596。

Node.js DevTools の JavaScript VM インスタンス選択メニュー

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

JavaScript VM インスタンスを選択できる新しいメニューを追加する前と後。

Chromium の問題: 1511813。

要素の改善

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

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

::view-transition 疑似要素をスタイルで編集できるようになりました

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

ビュー遷移の疑似要素の編集前と編集後のサポート。

詳細については、View Transitions API によるスムーズでシンプルな遷移をご覧ください。

Chromium の問題: 1511233。

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

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

ブロック コンテナでの align-content のサポート（前後）。

Chromium の問題: 1500511。

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

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

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

ナビゲータのサイドバーにアクティブなファイルを表示する新しいコマンド。

Chromium の問題: 1486933、1467464。

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

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

姿勢のオプションが表示されたプルダウン メニュー。

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

Chromium の問題: 1066842。

動的テーマ設定

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

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

DevTools の色は、[外観] で選択したカラーテーマと一致します。

Chromium の問題: 1483276。

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

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

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

ネットワーク パネルでサードパーティ Cookie をキャプチャする前と後。

[Application] で、[Storage] > [Cookies] に移動し、ドメインをクリックします。黄色でハイライト表示された Cookie はブラウザに保存されません。

[Application] パネルでサードパーティ Cookie をハイライト表示する前と後。

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

また、テーブル内の Cookie はデフォルトで名前で並べ替えられるようになりました。

Chromium の問題: 1506225、1503961。

Lighthouse 11.4.0

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

サードパーティ Cookie を検出する監査。

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

Chromium の問題: 772558。

ユーザー補助

このバージョンでは、ユーザー補助機能が次のように改善されています。

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

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

その他のハイライト

このリリースの主な修正と改善点は次のとおりです。

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

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

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

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

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

DevTools の新機能

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