DevTools の新機能（Chrome 108）

Jecelyn Yeen

無効な CSS プロパティに関するヒント

DevTools で、有効であるものの目に見える効果がない CSS スタイルが特定されるようになりました。[スタイル] ペインでは、無効なプロパティがフェードアウトします。ルールに目に見える効果がない理由を確認するには、その横にあるアイコンにカーソルを合わせます。

無効な 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 の設計が改善され、単一のスクリプトまたはスクリプトのパターンを無視するルールを構成できるようになりました。

[無視リスト] タブ。

Chromium の問題: 1356517

その他のハイライト

このリリースで修正された主な点は次のとおりです。

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

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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