DevTools の新機能（Chrome 100）

Jecelyn Yeen

Chrome 100

Chrome の 100 番目のバージョンを公開します。Chrome DevTools は、デベロッパーがウェブ上で構築するための信頼性の高いツールを引き続き提供します。[新機能] タブをクリックして、マイルストーンを祝いましょう。

いつものように、画像をクリックして最新の DevTools の新機能の動画を視聴できます。

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

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

@supports at ルールを表示、編集する

Chromium の問題: 1222574、1222573

レコーダー パネルの改善

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

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

  • data-testid
  • data-test
  • data-qa
  • データサイ
  • data-test-id
  • データクエリ ID
  • data-testing

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

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

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

デフォルトで一般的なセレクタをサポートする

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

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

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

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

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

録画の名前を変更する

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

録画の名前を変更する

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

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

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

Chromium の問題: 1049947

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

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

以前は、[フレーム] タイムラインに、メインスレッドの処理が遅れたフレームが「フレームのドロップ」として可視化されていました。ただし、コンポジタ スレッドによって視覚的な更新（スクロールなど）が引き続き発生するフレームもあります。

これらの「フレーム落ち」のスクリーンショットには視覚的な更新が反映されているため、ユーザーが混乱する可能性があります。

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

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

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 の新機能、更新、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。