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 の新機能シリーズで取り上げられたすべての内容の一覧。