DevTools の新機能（Chrome 100）

Jecelyn Yeen

Chrome 100

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

いつものように、画像をクリックすると、最新の DevTools の新機能の動画をご覧いただけます。

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

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

@supports ルールを表示して編集する

Chromium の問題: 1222574、1222573

[Recorder] パネルの改善

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

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

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

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

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

メール要素には 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 の新機能シリーズで取り上げたすべての内容のリスト。