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

DevTools の新機能（Chrome 100）

Jecelyn Yeen

Chrome 100

Chrome の 100 番目のバージョンを公開します。Chrome DevTools では引き続き、デベロッパーがウェブで開発するための信頼性の高いツールが提供されます。[What's New] タブ内をじっくりクリックしながら、マイルストーンを祝いましょう。

通常どおり、画像をクリックすると、最新の DevTools の新機能の動画を見ることができます。

[Styles] ペインのルールで @supports を表示、編集する

これで、[スタイル] ペインで CSS @supports アットルールを表示、編集できるようになりました。これらの変更により、at ルールをリアルタイムで簡単にテストできます。このデモページを開き、<div class=”box”> 要素をinspectして、[スタイル] ペインで @supports の at-rules を確認します。ルールの宣言をクリックして編集します。

ルールでの @supports の表示と編集

Chromium の問題: 1222574、1222573

レコーダーパネルの改善

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

録画中に一意のセレクタを決定する際に、[レコーダー] パネルで次の属性を持つ要素が自動的に優先されるようになりました。

データのテスト ID
データテスト
data-qa
data-cy
data-test-id
data-qa-id
データテスト

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

たとえば、こちらのデモページから新しい録画を開始します。メールアドレスを入力し、セレクタの値を確認します。

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

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

録音のセレクタをカスタマイズする

共通セレクタを使用しない場合は、録音のセレクタをカスタマイズできます。

たとえば、このデモページでは data-automate 属性をセレクタとして使用しています。新しい録画を開始し、セレクタ属性として data-automate を入力します。メールアドレスを入力し、セレクタ値（[data-automate=email-address]）を確認します。

録音のセレクタをカスタマイズする

カスタムセレクタの選択結果

録音の名前を変更する

[Recorder] パネルの録音のタイトルの横にある編集ボタン（鉛筆アイコン）を使用して、録音の名前を変更できるようになりました。

録音の名前を変更する

カーソルを合わせてクラスまたは関数のプロパティをプレビューする

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

カーソルを合わせてクラスまたは関数のプロパティをプレビューする

Chromium の問題: 1049947

[パフォーマンス] パネルに部分的に表示されたフレーム

パフォーマンス録画の [フレーム] タイムラインに新しいフレームカテゴリ「部分的に表示されたフレーム」が表示されるようになりました。

これまでは、[Frames] タイムラインでは、メインスレッドの処理が遅延しているフレームを「ドロップしたフレーム」として可視化していました。ただし、一部のフレームでは、コンポジタスレッドによって駆動される視覚的な更新（スクロールなど）が引き続き生成される場合があります。

これらの「ドロップしたフレーム」のスクリーンショットには視覚的な更新がまだ反映されているため、ユーザーの混乱を招くことになります。

新しい「部分的に表示されたフレーム」は、一部のコンテンツがフレーム内に適時に表示されないものの、視覚的な更新を完全にブロックするほどの深刻な問題ではないことを、より直感的に示すことを目的としています。

[パフォーマンス] パネルに部分的に表示されたフレーム

Chromium の問題: 1261130

その他のハイライト

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

エミュレートされたデバイスの iPhone ユーザーエージェント文字列を更新しました。iPhone 5 以降のバージョンには、iPhone OS 13_2_3 のユーザーエージェント文字列があります。（1289553）。
スニペットを JavaScript ファイルとして直接保存できるようになりました。以前は、.js ファイル拡張子を手動で追加する必要がありました。（1137218）。
ソースマップを使用してデバッグするときに、[ソース] パネルにスコープ変数名が正しく表示されるようになりました。以前は、ソースマップが提供されていても、[ソース] パネルには圧縮されたスコープ変数名が表示されていました。（1294682）。
[ソース] パネルで、ページの読み込み時にスクロール位置を正しく復元できるようになりました。以前は、位置が正しく復元されず、デバッグで不便でした。（1294422）。

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

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