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

DevTools の新機能（Chrome 97）

Jecelyn Yeen

プレビュー機能: 新しいレコーダーパネル

新しい [Recorder] パネルでは、ユーザーフローの記録、再生、測定を行えます。

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

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

[レコーダー] パネルのドキュメントにアクセスして、詳細なチュートリアルをご確認ください。

[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 に関するその他のことについて話し合うには、次のオプションを使用します。

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