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 参照によって保持されたオブジェクトが表示されます。

「接続解除された要素」の追加前と追加後[Memory] パネルにプロファイル タイプが表示されます。

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

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

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

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

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

DevTools の新機能

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