このページは 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 の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。