DevTools の新機能（Chrome 97）

Jecelyn Yeen

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

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

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

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

ステップバイステップのチュートリアルで詳細を確認するには、レコーダー パネルのドキュメントをご覧ください。

[Recorder] パネルはプレビュー機能です。現在、この機能に全力で取り組んでおり、さらなる機能強化のため、皆様からのフィードバックをお待ちしております。

レコーダー パネル

Chromium の問題: 1257499

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

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

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

Chromium の問題: 1223525

HTML として編集によるオートコンプリート

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

HTML として編集によるオートコンプリート

Chromium の問題: 1215072

コードのデバッグ エクスペリエンスの向上

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

出力エラーの列番号

Chromium の問題: 1073064

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

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

DevTools の同期設定

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

表示設定

この機能は現在試験運用中であり、チームは引き続き積極的に取り組んでいます。フィードバックがありましたら、こちらからお寄せください。

Chromium の問題: 1245541

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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