このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 115）

Sofia Emelianova

要素の改善

新しい 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）を押したまま、[Sources] > [Editor] の左側の列にある行番号をクリックします。

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

Chromium の問題: 1405767。

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

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

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

Chrome でサードパーティの Cookie をブロックする > [設定] > [プライバシーとセキュリティ] > [Cookie と他のサイトデータ] > [サードパーティの Cookie をブロックする] に移動して有効にします。
chrome://flags で、[バウンストラッキング対策] テストを [削除で有効化] に設定します。
このデモページを確認し、[アプリケーション] > [バックグラウンドサービス] > [バウンストラッキング対策] を開き、ページ上のバウンスリンクをクリックして、Chrome がバウンスを記録するまで（10 秒）待ち、[強制実行] をクリックして状態をすぐに削除します。

バウンストラッキング対策には、状態の削除が記載されます。

また、[Issues] タブには、状態の削除が予定されている旨の警告が表示されます。

Chromium の問題: 1432303

Lighthouse 10.2.0

[Lighthouse] パネルでは Lighthouse 10.2.0 が実行されます。特に注目すべきは、Largest Contentful Paint チェックで、シミュレートされたスロットリングと DevTools スロットリングのフェーズ計算を含むテーブルを取得していることです。変更点の一覧もご覧ください。

LCP フェーズテーブル。

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

Chromium の問題: 772558。

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

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

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

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

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

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

Chromium の問題: 1440958、1364501。

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

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

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

また、SVG ファイルは構文をハイライト表示できます。

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

Chromium の問題: 1382752、1385374。

その他のハイライト

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

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

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

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

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

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

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