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

DevTools の新機能（Chrome 97）

Jecelyn Yeen

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

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

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

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

[レコーダー] パネルのドキュメントで、詳しい手順が記載されたチュートリアルをご覧ください。

[レコーダー] パネルはプレビュー機能です。現在、担当チームがこの機能の改善に取り組んでおります。さらなる機能改善のため、皆様からのフィードバックをお待ちしています。

レコーダーパネル

Chromium の問題: 1257499

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

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

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

Chromium の問題: 1223525

HTML として編集して予測入力

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

HTML として編集して予測入力

Chromium の問題: 1215072

コードのデバッグ体験の改善

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

出力エラーの列番号

Chromium の問題: 1073064

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

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

DevTools の同期設定

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

表示設定

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

Chromium の問題: 1245541

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

デフォルトの開発ブラウザとして 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 動画にコメントを残してください。