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 パネルでユーザーフローの測定に timespan と snapshot の 2 つのモードがサポートされるようになりました。

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

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

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

Chromium の問題: 772558

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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