DevTools の新機能 (Chrome 100)

公開日 2022年3月8日火曜日 • 更新日 2022年3月8日火曜日

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

Google で Chrome DevTools に取り組んでいる Developer Advocate です。

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

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

Chrome 100

これが 100 番目の Chrome バージョンです！Chrome DevTools は、開発者がウェブを構築するための信頼できるツールを引き続き提供します。このマイルストーンを祝うために、少し時間を頂いて、What's New タブの中で周りをクリックしてみてください。

いつものように、画像をクリックすることで、最新の What’s New in DevTools 動画を見ることができます。

Styles ペインでの @supports アットルールの表示と編集

Styles ペインにて、CSS の @supports アットルールを表示および編集することができるようになりました。これらの変更によって、アットルールをリアルタイムで簡単に試すことができます。

このデモページを開いて、 <div class=”box”> 要素を inspect すると、 Styles ペインの中で @supports アットルールが表示されます。編集するには、そのルールの宣言をクリックしてください。

Chromium issues: 1222574, 1222573

Recorder パネルの改善

デフォルトで共通セレクタをサポート

レコーディング中に特定のセレクタを決定するときに、 Recorder パネルは以下の属性を持つ要素を自動的に優先するようになりました。

data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing

上記の属性は、テストの自動化で使用される一般的なセレクタです。

例えば、このデモページで新規にレコーディングを開始します。メールアドレスを入力して、セレクタの値を確認してみてください。

email 要素には data-testid が定義されているので、 id や class 属性の代わりに、自動的にセレクタとして使用されます。

レコーディングのセレクタをカスタマイズする

一般的なセレクタを使用していない場合は、レコーディングのセレクタをカスタマイズできます。

例えば、このデモページは、セレクタとして data-automate 属性を使用しています。新規にレコーディングを開始して、セレクタとして data-automate と入力します。メールアドレスを入力して、セレクタの値 ( [data-automate=email-address] ) を確認してみてください。

レコーディングのリネーム

レコーディングのタイトルの隣りにある編集ボタン（鉛筆のアイコン）を使って、 Recorder パネルでレコーディングの名前を変更することができるようになりました。

ホバーでクラスや関数のプロパティをプレビューする

デバッグ中に、 Source パネルにてクラスや関数にカーソルを合わせることで、そのプロパティをプレビューできるようになりました。以前は、関数名やソースコード内の位置へのリンクのみが表示されていました。

Chromium issue: 1049947

Performance パネルでの Partially presented frames

Performance レコーディングでは、 Frames タイムラインの中で新しいフレームカテゴリ "Partially presented frames" が表示されます。

以前は、 Frames タイムラインは、メインスレッドの動作を遅延させたフレームを "dropped frames" として表示していました。しかし、一部のフレームでは、コンポジタスレッドによって駆動される視覚的な更新（スクロールなど）が依然として生成されるケースがあります。

これらの "Dropped frames" のスクリーンショットはまだ視覚的な更新を反映しているため、これはユーザの混乱につながります。

新しい "Partially presented frames" は、一部のコンテンツがフレーム内でタイムリーに表示されていないものの、視覚的な更新を完全にブロックするほど深刻ではないことをより直感的に示すことを目的にしています。

Performance パネルでの Partially presented frames

Chromium issue: 1261130

その他のハイライト

以下は、今回のリリースにおいて注目すべき修正となります。

エミュレートされたデバイスの iPhone ユーザエージェント文字列が変更されました。 5 以降の全ての iPhone バージョンでは、 iPhone OS 13_2_3 を user-agent 文字列に含みます。 (1289553)

スニペットを JavaScript ファイルとして直接保存できるようになりました。以前は、手動で .js ファイル拡張子を追加する必要がありました。 (1137218)

ソースマップを使ってデバッグするときに、 Sources パネルに正しくスコープ変数名が表示されるようになりました。以前は、ソースマップが提供されているにも関わらず、 Sources パネルには短縮されたスコープ変数名が表示されていました。 (1294682)

Sources パネルは、ページの読み込み時にスクロール位置を正しく復元するようになりました。以前は、位置が正しく復元されなかったために、デバッグ時に不便さがありました。 (1294682)

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

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

Chrome DevTools チームとの交流

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

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

More DevTools features

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

DevTools の新機能 (Chrome 100)

Chrome 100

Styles ペインでの @supports アットルールの表示と編集