DevTools の新機能（Chrome 101）

Jecelyn Yeen

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

[Recorder] パネルで、ユーザーフローの記録を JSON ファイルとしてインポートおよびエクスポートできるようになりました。この追加により、ユーザーフローの共有が容易になり、バグレポートに役立ちます。

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

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

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

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

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

Chromium の問題: 1257499

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

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

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

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

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

Chromium の問題: 1240596

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

DevTools で 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）。
  • [Sources] パネルのコメントのキーボード ショートカットを修正しました。（1296535）。
  • [Sources] パネルで複数選択で Alt（Options）キーを使用できることを再度有効にしました。（1304070）。

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

[Lighthouse] パネルでは、既存のナビゲーション モードに加え、ユーザーフローの測定に関して、timespan と snapshot の 2 つのモードが新たにサポートされるようになりました。

たとえば、期間レポートを使用してユーザーの操作を分析できます。このdemoページを開きます。[期間] モードを選択し、[期間を開始] をクリックします。ページ上でコーヒーをクリックし、タイムスパンを終了します。レポートを読んで、インタラクションに起因する合計ブロック時間と累積レイアウト シフトを確認します。

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

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

Chromium の問題: 772558

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

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

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

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

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

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。