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

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 つのモードが新たにサポートされるようになりました。

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

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

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

Chromium の問題: 772558

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。