DevTools の新機能（Chrome 100）

Jecelyn Yeen

Chrome 100

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

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

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

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

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

Chromium の問題: 1222574、1222573

レコーダー パネルの改善

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

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

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

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

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

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

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

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

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

たとえば、このデモページでは、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 の新機能シリーズで取り上げられたすべての内容のリスト。