Chrome 130 の DevTools の新機能

Sofia Emelianova

ネットワーク パネルの改善

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

ネットワーク フィルタの刷新

[ネットワーク] パネルに、ユーザーのフィードバックに基づいて再設計された新しいフィルタが追加されました。種類固有のフィルタは、すっきりとした複数選択バーに表示されるバッジのセットとして引き続き使用できます。

UI の整理を図るため、非表示、ブロック、サードパーティ関連のチェックボックスはプルダウン リストの下に移動されます。リストのプルダウンの下に、チェックされているフィルタの数が表示されます。

以前のフィルタ デザインに戻すには、設定 [設定] > [試験運用版] > check_box_outline_blank [[ネットワーク] パネルのフィルタバーのデザイン変更] をオフにします。

新デザインについてご意見をお聞かせください。

Chromium の問題: 362672528。

HAR エクスポートでセンシティブ データがデフォルトで除外されるようになりました

機密情報が誤って漏洩する可能性を減らすため、HAR 形式でエクスポートされたネットワーク ログに、デフォルトで Cookie、Set-Cookie、Authorization ヘッダーが含まれなくなります。

センシティブ データを含む HAR 形式でログをエクスポートするには、設定 [設定] > [設定] > [ネットワーク] > チェックボックス [センシティブ データを含む HAR の生成を許可する] をオンにします。[ネットワーク] パネルのダウンロード [エクスポート] ボタンに矢印が表示されます。ボタンを長押しして、プルダウン メニューから [HAR をエクスポート（機密データを含む）] を選択します。

Chromium の問題: 361717594。

要素パネルの改善

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

text-emphasis-* プロパティの値の自動補完

[スタイル] タブの自動入力に、次の CSS プロパティの値が候補として表示されるようになります。

• text-emphasis の省略形
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

Chromium の問題: 361471205。

スクロール オーバーフローにはバッジが表示されます

[要素] パネルに、オーバーフローするコンテンツを含む要素と overflow: scroll または overflow: auto を持つ要素に新しい「スクロール」バッジが表示されるようになりました。これにより、スクロール オーバーフローを簡単に見つけることができます。他のバッジと同様に、このバッジは現在の DOM を反映し、サイズ変更などによりコンテンツがオーバーフローしなくなった場合は消えます。

Chromium の問題: 40670442。

ネストされたルールの後の宣言が「上へシフト」しない

ネストされたルールの後に宣言を配置できるようにするという CSS ワーキング グループの決定に従い、[スタイル] タブでは、解析中にこれらの宣言が「上に移動」しなくなりました。

次のコードサンプルでは、ネストされたルールの後の宣言が単独で記述されている場合でも、Chrome がカスケード内のスタイルを予期せず並べ替えることはありません。

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

Chromium の問題: 358119261。

[パフォーマンス] パネルの改善

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

ライブ指標の推奨事項

ライブ指標で、指標固有の推奨事項を取得できるようになりました。これにより、開発環境をユーザー エクスペリエンスにできるだけ近づけて構成できます。

推奨事項を取得するには、Chrome UX レポート（CrUX）でフィールドデータの取得を設定し、各指標カード（該当する場合）の [ローカルテストの条件を検討する] セクションと [環境設定] の [実際のユーザー環境を検討する] を開きます。

推奨事項に沿って、ユーザー エクスペリエンスを近似します。

パンくずリストを操作する

パフォーマンス レコーディングのタイムラインでパンくずリストを操作できるようになりました。パンくずリスト間を「ジャンプ」したり、子パンくずリストを上書きしたり、複数の子パンくずリストを削除したりできます。これまで、親のパンくずリストを選択すると、その子が表示されなくなりました。

メモリパネルの改善

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

新しい「デタッチされた要素」プロファイル

[メモリ] パネルに新しいプロファイル タイプ「分離された要素」が追加されました。JavaScript 参照によって保持されたオブジェクトが表示されます。

Chromium の問題: 350519222。

単純な JS オブジェクトの名前付けを改善

ヒープ スナップショットの Object カテゴリを整理して整理するために、単純な JavaScript オブジェクトは次のように変更されました。

• 含まれるプロパティに基づいて名前が付けられます（例: {firstProperty, secondProperty, ..., *nthProperty}）。
• DevTools によって作成されたこれらの名前で検索できます。
• 同じプロパティを持つ場合は、まとめてグループ化されます。

Chromium の問題: 350519222。

動的テーマ設定をオフにする

Chrome で、DevTools の色とカスタムテーマの色の自動的な照合をオフにできるようになりました。

動的テーマ設定をオフにするには、設定 [設定] > [設定] > [外観] > check_box_outline_blank [Chrome のカラーパターンに合わせる] をオフにして、DevTools を再読み込みします。

Chromium の問題: 328472696。

Chrome 試験運用版: プロセス共有

通常、同じウェブサイト（Google ドキュメントなど）から複数のタブを開くと、Chrome はそれぞれに個別のレンダラ プロセスを作成します。プロセスの共有テストでは、複数のタブが同じレンダラ プロセスを共有できるようにすることで、パフォーマンスを改善します。

DevTools を開いているときに「このタブは他のタブとリソースを共有しています...」という情報バーが表示される場合は、プロセス共有の試験運用版が有効になっている少数のユーザーのグループに属しています。

プロセス共有は、ブレークポイントのデバッグとパフォーマンス分析に影響する可能性があります。詳しくは、Chrome 試験運用版: プロセス共有をご覧ください。

Lighthouse 12.2.1

[Lighthouse] パネルで Lighthouse 12.2.1 が実行されるようになりました。

このアップデートでは、リソース圧縮の候補に対して < 20 KB 無視しきい値が導入され、ファイルサイズの大幅な削減にのみ集中できるようになりました。変更点の詳細なリストをご覧ください。

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

Chromium の問題: 772558。

その他のハイライト

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

• 要素:
  • ネストされた CSS の編集に関する複数の修正を行いました。（41486635、361477264、328263458、41487826）
  • 定義されているが空の値のカスタム プロパティが未定義として解析される問題を修正しました（365578428）。
• コンソール: cURL コマンドの複数行の文字列でエスケープされていないアンパサンドの問題を修正しました（352651673）。
• メモリ: サービス ワーカーを含むページのデフォルトの選択を修正し、メインスレッドが選択されるようになりました（40669896）。
• セキュリティ: オリジンのセキュリティ ステージが変更されると、URL スキームのハイライト表示が正しく更新されるようになりました（359920086）。

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

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

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

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

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

DevTools の新機能

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