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

DevTools の新機能（Chrome 101）

Jecelyn Yeen

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

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

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

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

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

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

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

Chromium の問題: 1257499

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

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

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

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

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

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）
[ソース] パネルのコメントのキーボードショートカットを修正しました。（1296535）
[Sources] パネルで複数選択に Alt（Options）キーを使用できるようになりました。（1304070）

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

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

たとえば、timespan レポートを使用してユーザー操作を分析することができます。このデモページを開きます。[期間] モードを選択し、[期間の開始] をクリックします。ページでコーヒーをクリックして、期間を終了します。レポートをお読みになり、インタラクションによって発生した Total Blocking Time と Cumulative Layout Shift をご確認ください。

各モードには、それぞれ固有のユースケース、利点、制限事項があります。詳しくは、Lighthouse のドキュメントをご覧ください。

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

Chromium の問題: 772558

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

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

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

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

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