DevTools の新機能（Chrome 101）

Jecelyn Yeen

記録されたユーザーフローを JSON ファイルとしてインポートおよびエクスポートする

[レコーダー] パネルで、ユーザーフロー レコーディングを JSON ファイルとしてインポートおよびエクスポートできるようになりました。この追加により、ユーザーフローを簡単に共有できるため、バグレポートに役立ちます。

たとえば、このJSON ファイルをダウンロードします。インポート ボタンを使用してインポートし、ユーザーフローを再生できます。

また、録音をエクスポートすることもできます。ユーザーフローを記録した後、エクスポート ボタンをクリックします。エクスポートには次の 3 つのオプションがあります。

  • JSON ファイルとしてエクスポートする。録音を JSON ファイルとしてダウンロードします。
  • @puppeteer/replay スクリプトとしてエクスポートします。録画を Puppeteer Replay スクリプトとしてダウンロードします。
  • Puppeteer スクリプトとしてエクスポートします。録画を Puppeteer スクリプトとしてダウンロードします。

これらのオプションの違いについては、ドキュメントをご覧ください。

[Recorder] パネルのエクスポート オプション

Chromium の問題: 1257499

スタイルペインでカスケード レイヤを表示する

カスケード レイヤを使用すると、CSS ファイルをより明示的に制御し、スタイルの限定性の競合を防ぐことができます。これは、大規模なコードベース、デザイン システム、アプリでサードパーティのスタイルを管理する場合に特に便利です。

この例では、page、component、base の 3 つのカスケード レイヤが定義されています。[スタイル] ペインには、各レイヤとそのスタイルが表示されます。

レイヤ名をクリックすると、レイヤの順序が表示されます。page レイヤの特定度が最も高いため、box の背景は緑色になっています。

スタイルペインでカスケード レイヤを表示する

Chromium の問題: 1240596

hwb() カラー関数のサポート

デベロッパー ツールで HWB カラー形式を表示、編集できるようになりました。

[スタイル] ペインで Shift キーを押しながら任意のカラー プレビューをクリックして、色形式を変更します。HWB カラー形式が追加されました。

または、カラー選択ツールで色の形式を HWB に変更することもできます。

hwb() カラー関数

非公開プロパティの表示を改善しました

DevTools で、非公開アクセサが適切に評価され、表示されるようになります。これまで、コンソールと [ソース] パネルで、プライベート アクセサラを持つクラスを開くことはできませんでした。

コンソールの非公開プロパティ

Chromium の問題: 1296855、https://crbug.com/1303407

その他のハイライト

このリリースで修正された主な点は次のとおりです。

  • [バックフォワード キャッシュ] に、bfcache をブロックした拡張機能 ID（存在する場合）が表示されるようになりました。（1284548）
  • 配列型オブジェクト、CSS クラス名、map.get、HTML タグの自動補完のサポートを修正しました。（1297101、1297491、1293807、1296983）
  • 単語をダブルクリックして自動補完を取り消す際の誤ったハイライト表示を修正しました。（1298437、1298667）
  • [ソース] パネルのコメント キーボード ショートカットを修正しました。（1296535）
  • [ソース] パネルで複数選択に Alt（オプション）キーを使用するためのサポートを再度有効にしました。（1304070）

[試験運用版] Lighthouse パネルの新しいタイムスパン モードとスナップショット モード

既存のナビゲーション モードに加えて、Lighthouse パネルで、ユーザーフローの測定に期間とスナップショットの 2 つのモードがサポートされるようになりました。

たとえば、期間レポートを使用してユーザー操作を分析できます。こちらのデモページを開きます。[時間範囲] モードを選択し、[時間範囲の開始] をクリックします。ページでコーヒーをクリックして、期間を終了します。レポートで、インタラクションによって発生した合計ブロック時間と累積レイアウト シフトを確認します。

各モードには、独自のユースケース、メリット、制限事項があります。詳しくは、Lighthouse のドキュメントをご覧ください。

Lighthouse パネルハウスのタイムスパン モードとスナップショット モード

Chromium の問題: 772558

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

デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta を使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも早くサイトの問題を見つけることもできます。

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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