DevTools の新機能（Chrome 115）

Sofia Emelianova
Sofia Emelianova
GitHub

要素の改善

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

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

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

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

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

Chromium の問題: 1442536。

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

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

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

Chromium の問題: 1204932。

ツールチップに表示されるカスタム CSS プロパティの値

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

カスタム CSS プロパティの値に関するツールチップ。

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

Chromium の問題: 1380779。

ソースの改善

CSS 構文のハイライト表示

[Sources] パネルには、SASS、SCSS、LESS などの前処理された CSS ファイルについて、次の内容が表示されます。

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

Chromium の問題: 1302261、1392085。

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

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

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

Chromium の問題: 1405767。

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

Chrome のバウンス トラッキング対策のテストでは、バウンス トラッキングの手法を使用して、クロスサイト トラッキングを実行していると考えられるサイトの状態を特定し、削除できます。アプリケーション >[Background Services] ペインに追加される [Bounce Tracking Mitigations] タブでは、トラッキング対策を手動で強制適用したり、状態が削除されたサイトの一覧を取得したりできます。

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

  1. Chrome でサードパーティ Cookie をブロックするその他メニュー。 に移動して有効にする >[設定] >セキュリティ。 プライバシーとセキュリティ >Cookie と他のサイトデータ >ラジオボタンがオンになっています。 サードパーティの Cookie をブロックする
  2. chrome://flags で、[Bounce Tracking Mitigations] テストを [Enabled With Deletion] に設定します。
  3. こちらのデモページで [アプリケーション] を開きます >バックグラウンド サービス >[バウンス トラッキング対策] で、ページ上のバウンスリンクをクリックし、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 は、このようなスクリプトを無視し、例外がスローされても停止しません。
  • 出典 >[Call Stack] ペインは、無視されたフレームをスキップします。ここでスキップをオフにするには、チェックボックス。 [無視リストのフレームを表示する] チェックボックスをオンにします。
  • コンソールでは、スタック トレースで無視されたフレームが閉じられます。[さらに N 個のフレームを表示] をクリックすると、展開して [一部を表示] をクリックすると閉じます。

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

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

Chromium の問題: 1440958、1364501。

ネットワーク >レスポンスのプリティ プリントをデフォルトに設定

ネットワーク >[Response] ペインで、[Sources] パネルと同様に、圧縮されたレスポンス本文がデフォルトでプリティ プリントされるようになりました。

[ネットワーク] タブの [レスポンス] ウィンドウでプリティ プリントを有効にしました。

また、SVG ファイルの構文をハイライト表示することもできます。

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

Chromium の問題: 1382752、1385374。

その他のハイライト

このリリースにおける注目すべき修正と改善は次のとおりです。

  • 設定] をタップします。 設定 >デバイス: エージェント文字列のリストに Google Pixel 6 の Facebook for Android v407 を追加しました。
  • ネットワーク: ネットワーク ログを消去するのショートカットを追加しました（1444991）。
    • macOS: command+K
    • Windows/Linux: Ctrl+L
  • レコーダーを削除しました >録音番号 >[パフォーマンス分析情報パネル] プルダウン オプション（1414773）。
  • 読み込みに失敗したスタイルシートは、ナビゲータ ツリーに表示されないようになりました（1386059）。
  • パフォーマンス: 展開可能なインタラクション トラックが正しく表示されない問題を修正しました（1432510）。
  • 要素: 読み込みに失敗したスタイルシートは、下線が波線で示されるようになりました（1440626）。
  • 該当する言語のプラグインがない場合、Debugger は WebAssembly を自動的にステップ実行しません（1443342）。
  • 一度に 1 単語ずつカーソルを移動するショートカットが、[Sources >] の CSS ファイルに対して復元されます編集者（1241848）: <ph type="x-smartling-placeholder">
      </ph>
    • macOS: Alt+矢印
    • Windows/Linux: Ctrl+矢印キー

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

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

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

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

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

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