DevTools の新機能（Chrome 115）

Sofia Emelianova
Sofia Emelianova
GitHub

要素の改善

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

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

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

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

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

Chromium の問題: 1442536。

ツールチップのセレクタの特異性

[Elements] > [Styles] で、セレクタ名にカーソルを合わせると、ツールチップに特異性の重みが表示されます。

セレクタの特異性の重みを示すツールチップ。

Chromium の問題: 1204932。

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

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

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

DevTools チームは、この改善を実現してくれた 一丝氏と Suyan 氏に感謝いたします。

Chromium の問題: 1380779。

ソースの改善

CSS の構文ハイライト表示

[ソース] パネルでは、SASS、SCSS、LESS などのプリプロセスされた CSS ファイルについて、次の情報を取得できます。

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

Chromium の問題: 1302261、1392085。

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

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

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

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。

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

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

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

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

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

また、[無視リスト] のチェックボックスのテキストがより明確になりました。

Chromium の問題: 1440958、1364501。

[ネットワーク] > [デフォルトでレスポンスを整形]

[ネットワーク] > [レスポンス] ペインで、[ソース] パネルと同様に、デフォルトで縮小されたレスポンス本文が整形されて表示されるようになりました。

[Network] タブの [Response] ウィンドウでプリティ プリントを有効にしました。

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

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

Chromium の問題: 1382752、1385374。

その他のハイライト

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

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

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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