このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 122）

Sofia Emelianova

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

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

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

ネットワークの改善

このバージョンでは、[Network] パネルにさまざまな改善を加えました。

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

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

[Status] 列に失敗の理由を表示する前と後。

Chromium の問題: 1506760。

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

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

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

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

Chromium に関する問題: 1267033、1276452、798498。

パフォーマンスの改善

このバージョンでは、[パフォーマンス] パネルにさまざまな改善を加えました。

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

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

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

Chromium に関する問題: 1467739。

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

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

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

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

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

Chromium の問題: 1434596。

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 を含むすべてのブロックコンテナで機能するようになりました。以前は、Grid と Flex でのみ機能していました。

ブロックコンテナでの前後における align-content のサポート。

Chromium の問題: 1500511

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

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

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

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

Chromium の問題: 1486933、1467464。

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

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

形状オプションを含むプルダウンメニュー。

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

Chromium の問題: 1066842

動的テーマ設定

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

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

DevTools は、[表示] で選択したカラーテーマと一致します。

Chromium の問題: 1483276。

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

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

[ネットワーク] で、警告アイコンが表示されているリクエストをクリックして、[Cookie] タブを開きます。

ネットワークパネルでのサードパーティ Cookie の取得前と取得後。

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

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

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

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

Chromium の問題: 1506225、1503961。

Lighthouse 11.4.0

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

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

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

Chromium の問題: 772558。

ユーザー補助

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

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

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 に関するその他のことについて話し合うには、次のオプションを使用します。

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