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

DevTools の新機能（Chrome 101）

Jecelyn Yeen

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

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

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

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

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

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

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

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）。
[ソース] パネルで複数選択に Alt（オプション）キーを使用するためのサポートを再度有効にしました。（1304070）

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

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

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

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

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

Chromium の問題: 772558

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

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

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

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

フィードバックや機能リクエストは crbug.com から送信してください。
DevTools で [その他] > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
@ChromeDevTools にツイートします。
DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。