DevTools の新機能 (Chrome 97)

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, Pусский

翻訳者の yoichiro さん、レビュアーの lacolaco さんと technohippy さんに感謝いたします。

DevTools の改善に興味がある方はサインアップして Google User Research にご協力ください。

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

新しい Recorder パネルを使用すると、ユーザフローを記録、再生、そして計測できます。

Recorder パネルを開きます。新規に記録を開始するために、画面の指示に従ってください。

例えば、この コーヒー注文のデモ を使って、コーヒーをチェックアウトする処理を記録することができます。コーヒーを追加して決済のための詳細情報を入力した後、記録を終えて処理を再生したり、Performance パネルにて Measure performance ボタンをクリックしてユーザフローの計測を行うことが可能です。

Recorder パネルの ドキュメント に行って、ステップバイステップなチュートリアルにて詳細を学びましょう!

Recorder パネルは、プレビュー機能です。私たちのチームは活発に開発を進めています。更なる改善のために、皆さんからの フィードバック をお待ちしております。

Recorder パネル

Chromium issue: 1257499

デバイスモードでのデバイス一覧の更新

デバイスツールバーを有効にする と、より新しいデバイスがデバイス一覧に追加されているのがわかります。画面サイズをシミュレートするデバイスを選択しましょう。

デバイスモードでのデバイス一覧の更新

Chromium issue: 1223525

Edit as HTML でのオートコンプリート

Edit as HTML はオートコンプリートとシンタックスハイライトをサポートするようになります。Elements パネルにて、要素を右クリックして、Edit as HTML を選択してください。DOM プロパティ(例: id, aria)をタイプしてみましょう。期待しているプロパティ名を探すことをオートコンプリート機能が手伝ってくれるはずです。

Edit as HTML でのオートコンプリート

Chromium issue: 1215072

改善されたコードデバッグ体験

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

エラー出力での列番号

Chromium issue: 1073064

[実験的] デバイスを横断した DevTools 設定の同期

Chrome プロファイル同期を有効にしている際は、DevTools 設定はデバイスを横断してデフォルトで同期されるようになります。Settings > Sync > Enable settings sync から DevTools の同期設定を変更することが可能です。

DevTools 同期設定

この新しい設定は、デバイスを横断して作業を行うことを簡単にしてくれます。例えば、以下の表示設定が同期されることで、一貫した体験をデバイスを横断して得ることができ、同じ設定を何度も再定義する必要がなくなります。DevTools カスタマイズ にて、同期機能の詳細をご覧ください。

表示設定

この機能は現在実験的であり、チームは活発に作業を続けています。もし何かフィードバックがあれば、ぜひ こちら から私たちに共有してください。

Chromium issue: 1245541

プレビューチャンネルのダウンロード

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

Chrome DevTools チームとの交流

新しい機能や、この投稿の変更、その他 DevTools に関することであれば何でも、意見があれば以下のいずれかを使用してご連絡ください。

  • 私たちへの提案やフィードバックはcrbug.comから投稿してください。
  • DevTools の問題は DevTools の More options   More   > Help > Report a DevTools issues を使用してレポートしてください。
  • @ChromeDevTools 宛にTweetしてください。
  • What's new in DevTools YouTubeビデオにコメントを残してください。

More DevTools features

関連する機能の完全なリストは、What's New In DevTools の英語版を参照してください。以下は、日本語に翻訳された内容の一部です。

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.