DevTools の新機能（Chrome 108）

Jecelyn Yeen

無効な CSS プロパティのヒント

DevTools では、有効だが目に見える影響がない CSS スタイルが識別されるようになりました。[Styles] ペインで、非アクティブなプロパティがフェードアウトします。ルールによって効果が見られない理由を確認するには、ルールの横にあるアイコンにカーソルを合わせます。

無効な CSS プロパティのヒント。

Chromium の問題: 1178508

レコーダー パネルで XPath セレクタとテキスト セレクタを自動検出

[レコーダー] パネルで XPath セレクタとテキスト セレクタがサポートされるようになりました。ユーザーフローの記録を開始すると、セレクタとして要素の XPath と最も短い一意のテキストが自動的に選択されます（利用可能な場合）。

[Recorder] パネルの XPath とテキスト セレクタ。

Chromium の問題: 1327206、1327209

カンマ区切り式をステップ実行する

デバッグ中にカンマ区切りの式をステップ実行できるようになりました。これにより、圧縮されたコードのデバッグ性が向上します。

カンマ区切り式をステップ実行します。

これまで、DevTools ではセミコロンで区切られた式のステップ実行のみがサポートされていました。

次のようなコードがあるとします。

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

トランスパイラと圧縮ツールは、それらをカンマ区切りの式に変換する場合があります。

function bar(){return foo(),foo(),42}

ステップ実行の動作が、圧縮されたコードと作成されたコードで異なるため、デバッグ中に混乱が生じます。ソースマップを使用して元のコードに基づいて圧縮されたコードをデバッグする場合は、さらに混乱します。デベロッパーはセミコロン（内部的にはツールチェーンによってカンマに変換されています）を見ていますが、デバッガはそこで停止しません。

Chromium の問題: 1370200

無視リストの設定の改善

[設定] > [無視リスト] に移動します。DevTools の設計が改善され、1 つのスクリプトまたはスクリプト パターンを無視するようにルールを構成しやすくなります。

[無視リスト] タブ。

Chromium の問題: 1356517

その他のハイライト

このリリースでの注目すべき修正は次のとおりです。

  • スペースキーを押すと、[スタイル] ペインで CSS プロパティ名が自動的に入力されます。（1343316）
  • [要素] パネルのパンくずリストで自動スクロールを削除します。（1369734）。

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

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

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

投稿の新機能や変更点、DevTools に関連するその他の点について議論するには、次のオプションを使用します。

DevTools の新機能

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