Chrome 130 の DevTools の新機能

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

ネットワーク フィルタの見直し

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

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

プルダウンの下に表示される、非表示、ブロック、第三者関連のフィルタの前後。

以前のフィルタデザインに戻すには、[設定] > [テスト] > [] [ネットワーク] パネルのフィルタバーの再設計を解除します。

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

Chromium の問題: 362672528。

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

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

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

HAR エクスポートにセンシティブ データを含むエクスポート オプションとセンシティブ データを含まないエクスポート オプションを追加する前後。

Chromium の問題: 361717594。

要素パネルの改善

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

text-emphasis-* プロパティの値の予測入力

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

「text-emphasis-*」プロパティに自動入力オプションを追加する前と後。

Chromium の問題: 361471205

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

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

マークの前後に、スクロールがバッジでオーバーフローします。

Chromium の問題: 40670442。

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

ベア宣言をネストされたルールの後に配置できるようにするという CSS ワーキング グループの決定を受け、[スタイル] タブでは解析時にこれらの宣言が「シフトアップ」されないようになっています。

次のコードサンプルでは、ネストされたルールの後ろの単純な宣言によってカスケード内のスタイルが予期せず並べ替えられることがなくなりました。

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

  background-color: green;
}

ネストされたルールの後に宣言を配置できるようにする前と後。

Chromium の問題: 358119261。

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

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

ライブ指標の推奨事項

ライブ指標では、ユーザー エクスペリエンスに可能な限り近い開発環境を構成するのに役立つ、指標固有の推奨事項が提供されるようになりました。

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

推奨事項が表示されているセクションを展開しました。

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

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

メモリパネルの改善

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

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

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

[メモリ] パネルに [Detached elements] プロファイル タイプを追加する前と後。

Chromium の問題: 350519222。

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

ヒープ スナップショットの Object カテゴリを整理、整理するために、プレーン JavaScript オブジェクトが追加されました。

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

ヒープスナップショットでオブジェクト カテゴリを整理する前と後。

Chromium の問題: 350519222。

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

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

動的なテーマ設定をオフにするには、[設定] > [設定] > [デザイン] > [Chrome のカラーパターンに合わせる] をクリアして、DevTools を再読み込みします。

動的テーマ設定をオフにした前と後。

Chromium の問題: 328472696

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

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

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）。
  • メモリ: Service Worker があるページでのデフォルトの選択を修正しました。メインスレッドが選択されるようになりました（40669896）。
  • セキュリティ: 送信元のセキュリティ ステージが変更されると、ハイライト表示の URL スキームが正しく更新されるようになりました（359920086）。

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

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

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

以下のオプションを使用して、新機能、アップデート、DevTools に関連するその他の内容について話し合います。

DevTools の新機能

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