DevTools の新機能（Chrome 100）

Jecelyn Yeen

Chrome 100

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

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

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

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

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

Chromium の問題: 1222574、1222573

レコーダー パネルの改善

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

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

  • data-testid
  • data-test
  • data-qa
  • データサイ
  • data-test-id
  • data-qa-id
  • データテスト

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

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

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

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

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

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

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

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

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

録音の名前を変更する

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

録音の名前を変更する

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

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

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

Chromium の問題: 1049947

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

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

これまでは、[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 の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。