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

DevTools の新機能（Chrome 108）

Jecelyn Yeen

非アクティブな CSS プロパティのヒント

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

無効な 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 の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

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