DevTools の新機能（Chrome 97）

Jecelyn Yeen

プレビュー機能: 新しい [Recorder] パネル

新しい [Recorder]（レコーダー）パネルを使用して、ユーザーフローを記録、再生、測定できます。

[レコーダー] パネルを開きます。画面上の手順に沿って、新しい録画を開始します。

たとえば、このコーヒー注文のデモ アプリケーションを使用して、コーヒーの購入手続きを記録できます。コーヒーを追加して支払い情報を入力したら、記録を終了するか、プロセスを再生するか、[Measure performance]（パフォーマンスを測定）ボタンをクリックして [パフォーマンス] パネルでユーザーフローを測定できます。

詳しくは、レコーダー パネルのドキュメントでチュートリアルをご覧ください。

[Recorder] パネルはプレビュー機能です。担当チームは引き続きこの機能の開発に取り組んでおります。機能のさらなる改善に向けて、皆様からのフィードバックをお待ちしております。

レコーダー パネル

Chromium の問題: 1257499

デバイスモードでデバイスリストを更新する

デバイス ツールバーを有効にする: 最新のデバイスがデバイスリストに追加されるようになりました。デバイスを選択して、その寸法をシミュレートします。

デバイスモードでデバイスリストを更新する

Chromium の問題: 1223525

HTML として編集による自動入力

[HTML として編集] UI で、オートコンプリートと構文のハイライト表示がサポートされるようになりました。[要素] パネルで要素を右クリックし、[HTML として編集] を選択します。DOM プロパティ（id、aria など）を入力すると、目的のプロパティ名がオートコンプリートされます。

HTML として編集による自動入力

Chromium の問題: 1215072

コードのデバッグ機能の改善

コンソールの出力エラーに列番号が含まれるようになりました。列番号に簡単にアクセスできることは、特に圧縮された JavaScript のデバッグに不可欠です。

出力エラーの列番号

Chromium の問題: 1073064

[試験運用版] デバイス間での DevTools 設定の同期

Chrome プロフィールの同期をオンにすると、デフォルトで DevTools の設定がデバイス間で同期されるようになりました。DevTools の同期設定は、[設定] > [同期] > [設定の同期を有効にする] で変更できます。

DevTools の同期設定

この新しい設定により、複数のデバイスで作業しやすくなります。たとえば、次の外観設定は同期されるため、デバイス間で一貫したエクスペリエンスが提供され、同じ設定を再度定義する必要はありません。同期機能の詳細については、DevTools のカスタマイズをご覧ください。

表示設定

この機能は現在試験運用中であり、チームは引き続き積極的に取り組んでいます。ご意見やご要望がありましたら、こちらからお寄せください。

Chromium の問題: 1245541

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

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

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

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

DevTools の新機能

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