Chrome 130 の DevTools の新機能

Sofia Emelianova

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

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

ネットワーク フィルタの再考

ネットワーク パネルに、フィードバックに基づいて再設計された新しいフィルタが追加されました。タイプ固有のフィルタは、すっきりとした複数選択バーのバッジのセットとして、そのまま残ります。

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

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

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

Chromium の問題: 362672528。

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

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

センシティブ データを含む HAR 形式でログをエクスポートするには、設定 [設定] > [設定] > [ネットワーク] > check_box [センシティブ データを含む 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 の新機能シリーズで取り上げたすべての内容のリスト。