DevTools の新機能（Chrome 122）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

レコーダーから直接コレクションを開くには、[ダウンロード] [エクスポート] >[Get Extensions...] をクリックします。

ネットワークの改善

このバージョンでは、[ネットワーク] パネルにいくつかの改善が行われています。

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

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

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

Chromium の問題: 1506760

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

リクエストの [コピー] サブメニューがよりわかりやすくなりました。

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

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

Chromium の問題: 1267033、1276452、798498。

パフォーマンスの改善

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

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

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

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

Chromium の問題: 1467739。

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

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

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

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

リクエストからの矢印とアイドル状態のコールバックの起動。

Chromium の問題: 1434596

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

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

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

Chromium の問題: 1511813

要素の改善

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

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

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

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

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

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

Chromium の問題: 1511233

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

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

ブロック コンテナにおける、アラインメント コンテンツの前後のサポート。

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 の取得前と取得後。

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

[アプリケーション] パネルでサードパーティ Cookie がハイライト表示される前と後。

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

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

Chromium の問題: 1506225、1503961。

Lighthouse 11.4.0

[Lighthouse] パネルで Lighthouse 11.4.0 が実行されるようになりました。変更点の一覧をご覧ください。注目すべき変更点として、ウェブサイトで現在もサードパーティ Cookie が使用されているかどうかを検出できる新しい監査があります。

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

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

Chromium の問題: 772558。

ユーザー補助

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

  • 設定 [設定] >検索ボックスにフォーカスが自動的に移るようになりました。
  • [ネットワーク] > [キャンセル 入力の消去] ボタン[フィルタ] がフォーカス可能になりました。
  • [ソース] >高コントラスト モードでページが正しく表示されるようになりました。
  • スクリーン リーダーで以下が正しく読み上げられるようになりました。 <ph type="x-smartling-placeholder">
      </ph>
    • [ソース] > [チェックボックスの状態]ブレークポイント。
    • 候補のリストの位置とインデックスの情報。
    • 設定の [設定] で場所を追加または削除した場合のアクションの結果地域。
    • [設定] の [設定] >無視リスト。

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

その他のハイライト

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

  • アニメーション: <ph type="x-smartling-placeholder">
      </ph>
    • スクリーンショットのポップオーバーが境界外にレンダリングされるバグを修正しました（1506991）。
    • 削除されたアニメーション ノードが削除済みとしてマークされないバグを修正しました（1506561）。
  • ネットワーク: <ph type="x-smartling-placeholder">
      </ph>
    • ヘッダーのオーバーライド: [ヘッダー] タブに紫色のドットのアイコンが表示されるバグを修正しました（1507856）。
    • プレビュー: 不要な二重デコードのバグを修正しました（1509336）。
    • 短いリクエストが表示されないバグを修正しました（1509862）。
  • アプリケーション >IndexedDB: 他のパネルとの整合性を保つため、アクションバーのボタンを再配置しました（1393800）。
  • センサー: 位置情報が利用できないときに正しくコールバックされないバグを修正しました（1486859）。
  • パフォーマンス: <ph type="x-smartling-placeholder">
      </ph>
    • [Collect garbage] ボタンに適切なアイコン「mop」が追加されました。「bin」ではなく（1507530）。
    • about:blank に移動したときにパフォーマンス トレースがデータを保持するようになりました（1509947）。

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

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