このページは 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 のバウンストラッキング対策のテストでは、バウンストラッキングの手法を使用して、クロスサイトトラッキングを実行していると考えられるサイトの状態を特定し、削除できます。[Application] > [Background Services] ペインには新しい [Bounce Tracking Mitigations] タブが表示され、トラッキング対策を手動で強制適用したり、状態が削除されたサイトの一覧を取得したりできます。

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

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

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

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

Chromium の問題: 1440958、1364501。

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

[Network] > [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）。
CSS ファイルの [Sources] > [Editor] で、一度に 1 単語ずつカーソルを移動するショートカットが復元されます（1241848）。
- macOS: Alt+矢印
- Windows/Linux: Ctrl+矢印キー

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。