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

DevTools の新機能（Chrome 100）

Jecelyn Yeen

Chrome 入門ガイド

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

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

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

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

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

Chromium に関する問題: 1222574、1222573

レコーダーパネルの改善

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

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

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

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

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

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

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

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

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

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

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

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

録音の名前を変更する

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

録音の名前を変更する

カーソルを合わせたときにクラス/関数のプロパティをプレビューする

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

カーソルを合わせたときにクラス/関数のプロパティをプレビューする

Chromium の問題: 1049947

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

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

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

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

新しい「一部表示フレーム」は、一部のコンテンツがフレーム内にタイムリーに表示されていないものの、ビジュアルの更新を完全にブロックできるほど重大な問題ではないことをより直感的に示すことを目的としています。

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

Chromium の問題: 1261130

その他のハイライト

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

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

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

Chrome Canary、Dev、Beta を既定の開発ブラウザとして使用することをご検討ください。これらのプレビューチャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブプラットフォーム API をテストしたり、ユーザーが実際に体験する前にサイト上の問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。

crbug.com からご提案やフィードバックをお送りください。
DevTools の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。