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 ワーキング グループの決定を受け、[スタイル] タブでは解析時にこれらの宣言が「シフトアップ」されないようになっています。

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

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 ドキュメントなど）を開くと、タブごとに個別のレンダラ プロセスが作成されます。プロセスの共有テストでは、複数のタブが同じレンダラ プロセスを共有できるようにすることで、パフォーマンスを改善します。

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 に関連するその他の内容について話し合います。

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

DevTools の新機能

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