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

DevTools の新機能（Chrome 108）

Jecelyn Yeen

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

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

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

Chromium の問題: 1178508

[Recorder] パネルで XPath とテキストセレクタを自動検出する

[Recorder] パネルで 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

その他のハイライト

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

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

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

デフォルトの開発ブラウザとして 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 動画にコメントを残してください。