DevTools の新機能（Chrome 115）

Sofia Emelianova
Sofia Emelianova
GitHub

要素の改善

新しい CSS サブグリッド バッジ

[要素] パネルに、サブグリッドの新しい subgrid バッジが追加されます。この機能は現在、Chrome Canary で試験運用版です。

サブグリッドであるネストされたグリッドを検査してデバッグするには、バッジをクリックします。サブグリッドは、親からトラックの数とサイズを継承します。ビューポート内の要素の上に列、行、その数を表示するオーバーレイを切り替えます。

サブグリッド バッジとビューポートのオーバーレイ。

[要素] パネルのすべてのバッジの一覧については、バッジのリファレンスをご覧ください。

Chromium の問題: 1442536。

ツールチップのセレクタの特定度

[要素] > [スタイル] で、セレクタ名にカーソルを合わせると、ツールチップに固有性重みが表示されます。

セレクタの特定度重みを含むツールチップ。

Chromium の問題: 1204932。

ツールチップのカスタム CSS プロパティの値

[要素] > [スタイル] で、カスタム CSS プロパティ名にカーソルを合わせると、その値がツールチップに表示されます。

カスタム CSS プロパティの値を含むツールチップ。

この改善をリリースしてくれた 一丝 と Suyan に、DevTools チームから感謝の意を表します。

Chromium の問題: 1380779。

ソースの改善

CSS 構文のハイライト表示

[ソース] パネルには、SASS、SCSS、LESS などのプリプロセッサ処理済み CSS ファイルについて、次の情報が表示されます。

[ソース] の CSS 構文のハイライト表示とインライン エディタのサポートを改善しました。

Chromium の問題: 1302261、1392085。

条件付きブレークポイントを設定するショートカット

ショートカットを使用して条件付きブレークポイントをすばやく設定できるようになりました。ブレークポイント ダイアログを開くには、Command（macOS）または Control（Windows / Linux）を押しながら、[ソース] > [エディタ] の左側の列にある行番号をクリックします。

左側の列とブレークポイント ダイアログの行番号。

Chromium の問題: 1405767。

[アプリケーション] > [バウンス トラッキング対策]

Chrome のバウンス トラッキング対策テストでは、バウンス トラッキング手法を使用してクロスサイト トラッキングを行っていると思われるサイトの状態を特定して削除できます。[アプリケーション] > [バックグラウンド サービス] ペインに、[バウンス トラッキング緩和策] タブが新しく追加されました。このタブでは、トラッキング緩和策を手動で強制的に適用したり、状態が削除されたサイトを一覧表示したりできます。

次のセキュリティ機能をご確認ください。

  1. Chrome でサードパーティ Cookie をブロックする。その他メニュー。 > [設定] > セキュリティ。 [プライバシーとセキュリティ] > [Cookie と他のサイトデータ] > ラジオボタンがオンになっている。 [サードパーティ Cookie をブロックする] に移動して有効にします。
  2. chrome://flags で、バウンス トラッキング対策テストを [削除ありで有効] に設定します。
  3. このデモページを検証し、[Application] > [Background Services] > [Bounce Tracking Mitigations] を開き、ページ上の離脱リンクをクリックします。Chrome が離脱を記録するのを待ってから（10 秒ほど）、[Force run] をクリックして状態をすぐに削除します。

[バウンス トラッキング対策] に、状態の削除が表示されます。

また、[問題] タブに、今後のステータスの削除に関する警告が表示されます。

Chromium の問題: 1432303。

Lighthouse 10.2.0

[Lighthouse] パネルで Lighthouse 10.2.0 が実行されるようになりました。特に、Largest Contentful Paint チェックでは、シミュレートされたスロットルと DevTools スロットルのフェーズ計算を含む表が取得されます。変更点の完全なリストもご覧ください。

LCP フェーズ表。

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

Chromium の問題: 772558。

コンテンツ スクリプトをデフォルトで無視する

設定] をタップします。 [設定] > [無視リスト] > チェックボックス。 [拡張機能によって挿入されたコンテンツ スクリプト] がデフォルトで有効になりました。

この設定を有効にすると、次のようになります。

  • デバッガは、このようなスクリプトを無視し、スクリプトがスローした例外で停止しません。
  • [ソース] > [コールスタック] ペインでは、無視されたフレームはスキップされます。ここでスキップをオフにするには、[チェックボックス。 無視リストのフレームを表示] をオンにします。
  • コンソールでは、スタック トレース内の無視されたフレームが折りたたまれます。[さらに N フレーム表示] をクリックして展開し、[一部を表示] をクリックして再び閉じます。

拡張機能によって挿入されたコンテンツ スクリプトはデフォルトで有効になっています。[設定]、[無視リスト] の順に選択すると確認できます。

また、[無視リスト] のチェックボックスのテキストをわかりやすくしました。

Chromium の問題: 1440958、1364501。

[ネットワーク] > [デフォルトでレスポンスの美しい表示]

[Network] > [Response] ペインで、[Sources] パネルと同様に、デフォルトで圧縮されたレスポンス本文が美しく表示されるようになります。

[Network] タブの [Response] ウィンドウで、美しい出力を有効にしました。

また、SVG ファイルの構文がハイライト表示されます。

SVG 構文のハイライト表示。

Chromium の問題: 1382752、1385374。

その他のハイライト

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

  • 設定] をタップします。 [設定] > [デバイス]: エージェント文字列のリストに Google Pixel 6 の Android 版 Facebook v407 を追加しました。
  • ネットワーク: [ネットワーク ログを消去] ショートカットを追加しました（1444991）。
    • macOS: Command+K
    • Windows/Linux: Ctrl+L
  • [Recorder] > [Recording N] > [Performance insights panel] プルダウン オプションを削除しました（1414773）。
  • 読み込みに失敗したスタイルシートがナビゲーター ツリーに表示されなくなりました（1386059）。
  • パフォーマンス: 展開可能なインタラクション トラックの誤った表示を修正しました（1432510）。
  • 要素: 読み込みに失敗したスタイルシートが波線で下線付きになりました（1440626）。
  • 対応する言語のプラグインがない場合、デバッガが WebAssembly で自動的にステップしません（1443342）。
  • [ソース] > [エディタ] で、CSS ファイルのカーソルを 1 単語ずつ移動するショートカットが復元されました（1241848）。
    • macOS: Alt+矢印
    • Windows/Linux: Ctrl+矢印

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

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

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

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

DevTools の新機能

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