DevTools の新機能 (Chrome 108)

公開日

翻訳先言語: English, Español, Português, 한국어, 中文, Pусский

翻訳者の lacolaco さん、レビュアーの yoichiro さん、 technohippy さん、 yoshiko-pg さんに感謝いたします。

DevTools の改善に興味がある方はサインアップして Google User Research にご協力ください。

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

DevTools は、有効であるが視覚的な効果がない CSS スタイルを識別するようになりました。Styles ペインで、 DevTools は非アクティブなプロパティをフェードアウトします。その横にあるアイコンにカーソルを合わせると、なぜそのルールが視覚的な効果を持たないのかが分かります。

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

Chromium issue: 1178508

Recorder パネルで XPath とテキストのセレクタ自動検出が可能に

Recorder パネルが XPath とテキストのセレクタをサポートするようになりました。ユーザーフローの記録を開始すると、 要素の XPath と最短ユニークテキストがあればレコーダーは自動的にセレクタとして選択します。

Recorder パネルでXPathとテキストのセレクタの自動検出が可能に

Chromium issues: 1327206,1327209

カンマ区切りの式をステップスルー

デバッグ中にカンマ区切りの式をステップ実行できるようになりました。これにより、ミニファイされたコードのデバッグ性が向上します。

カンマ区切りの式をステップスルー

これまでは、 DevTools はセミコロンで区切られた式のステップ実行のみをサポートしていました。

以下のようなコードを考えてください。

function foo() {}

function bar() {
foo();
foo();
return 42;
}

このようなコードはトランスパイラやミニファイアによって、カンマ区切りの式に変換されることがあります。

function bar(){return foo(),foo(),42}

こうなるとミニファイされたコードと 書かれたコードの間でステップ実行の動作が異なることになるため、デバッグ時に混乱が生じます。ソースマップを使用して、オリジナルのコードを見ながらミニファイされたコードをデバッグする場合は、さらに混乱します。開発者にはセミコロン (ツールチェーンではカンマに変換されていた) が見えていますが、デバッガーはセミコロンで停止しないためです。

Chromium issue: 1370200

無視リスト設定の改善

Settings > Ignore List に移動します。 DevTools は、単一のスクリプトまたはスクリプトのパターンを無視するというルールを設定しやすいようにデザインを改善しています。

Ignore List タブ

Chromium issue: 1356517

その他のハイライト

今回のリリースでは、以下の注目すべき修正点があります。

  • スペースキーを押すと、 Styles ペインに CSS プロパティ名がオートコンプリートされるようになりました。 (1343316)
  • Element パネルのパンくずリストの自動スクロールを削除しました。 (1369734)

プレビューチャンネルのダウンロード

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

Chrome DevTools チームとの交流

新しい機能や、この投稿の変更、その他 DevTools に関することであれば何でも、意見があれば以下のいずれかを使用してご連絡ください。

  • 私たちへの提案やフィードバックはcrbug.comから投稿してください。
  • DevTools の問題は DevTools の More options   More   > Help > Report a DevTools issues を使用してレポートしてください。
  • @ChromeDevTools 宛にTweetしてください。
  • What's new in DevTools YouTubeビデオにコメントを残してください。

More DevTools features

関連する機能の完全なリストは、What's New In DevTools の英語版を参照してください。以下は、日本語に翻訳された内容の一部です。

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

更新日 記事を改善する

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.