DevTools の新機能 (Chrome 110)

公開日 2023年2月13日月曜日

翻訳先言語： English, Português, 中文, Pусский

Jecelyn Yeen

Google で Chrome DevTools に取り組んでいる Developer Advocate です。

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

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

再読み込み時の Performance パネルのクリア

Start profiling and reload page ボタンをクリックすると、 Performance パネルでスクリーンショットとトレースの両方がクリアされるようになりました。

今までは、 Performance パネルには以前のレコーディングのスクリーンショットを含むタイムラインが表示されていました。これにより、実際の測定がいつ開始されたかを確認することが難しくなっていました。これからは、レコーディングが空白のトレースで開始されることを保証するために、パネルは常に最初に about:blank ページに移動します。これは、すでに同じことを行っている Performance Insights パネルの動作と一致します。

Chromium issues: 1101268, 1382044

Recorder の更新

Recorder でのユーザーフローコードの表示およびハイライト

Recorder は分割コードビューを提供するようになり、ユーザーフローコードをより簡単に表示できるようになりました。コードビューにアクセスするには、ユーザーフローを開き、 Show Code をクリックします。

Recorder では、左側の各ステップにカーソルを合わせると対応するコードを強調表示することで、フローを簡単に追跡できるようにします。ドロップダウンを使用してコードの書式を変更できます。これにより、 Nightwatch Test スクリプトなどの書式を切り替えることができます。

Chromium issue: 1385489

レコーディング時のセレクタタイプのカスタマイズ

重要なセレクタタイプのみをキャプチャするレコーディングを作成できます。新しいレコーディングの作成時にセレクタタイプをカスタマイズする新しいオプションを使用すると、XPath などのセレクタを含めたり除外したりできるため、ユーザーフローに必要なセレクタのみを確実にキャプチャできます。

Chromium issue: 1384431

レコーディング中のユーザーフローの編集

Recorder では、レコーディング中に編集できるようになり、リアルタイムで柔軟に変更できるようになりました。調整のためにレコーディングを終了する必要はなくなりました。

Chromium issue: 1381971

自動的な直接のプリティプリント

Sources パネルは、ミニファイされたソースファイルを所定の位置に自動的にプリティプリントするようになりました。 pretty print ボタン { } をクリックして元に戻すことができます。

以前は、デフォルトで Sources パネルにミニファイされたコンテンツが表示されていました。コンテンツをフォーマットするには、プリティプリントボタンを手動でクリックする必要がありました。その上、プリティプリントされたコンテンツは同じタブではなく、別の ::formatted タブに表示されていました。

Chromium issues: 1383453, 1382752, 1382397

Vue、SCSS などのシンタックスハイライトとインラインプレビューの改善

Sources パネルでは、広く使用されているいくつかのファイル形式のシンタックスハイライトが強化され、Vue、JSX、Dart、LESS、SCSS、SASS、インライン CSS など、コードをより簡単に読み、その構造を認識できるようになりました。

さらに、DevTools では Vue、インライン HTML、および TSX のインラインプレビューも改善されました。変数にカーソルを合わせると、その値がプレビューされます。

それとは別に、DevTools は Sources パネルにスタイルシートのソースマップを表示するようになりました。具体的には、SCSS ファイルを開いてソースマップリンクをクリックすることで、関連する CSS ファイルにアクセスできます。

Chromium issues: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

Console での人間工学的で一貫性のあるオートコンプリート

DevTools は、次の変更を実装することにより、オートコンプリートの体験を強化します。

Tab は常にオートコンプリートに使用されます。
右カーソルキー と Enter の動作は、コンテキストによって異なります。
オートコンプリートの体験は、 Console 、 Sources 、および Elements パネルのテキストエディタ間で一貫しています。

たとえば、 Console に cons と入力すると、次のようになります。

Console には、オートコンプリート候補のリストが表示されます。上部のオプションの周りに細かい点線の境界線が表示され、ナビゲーションがまだ開始されていないことが示されます。

Enter を押すと、 Console はその行を実行します。以前は、最上位の提案で自動的に行を補完していました。オートコンプリートするには、 Tab または 右カーソルキー を押します。

Console は、 上カーソルキー と 下カーソルキー のショートカットを使用して候補リストをナビゲートする際に、選択されたオプションを強調表示します。

ナビゲーション中に選択したオプションでオートコンプリートするには、キーボードの Tab 、 Enter 、または 右カーソルキー キーを使用します。

コードの途中で編集する場合、たとえば、カーソルが n と s の間にある場合、 Tab を使用してオートコンプリートを行い、 Enter を使用して行を実行し、 右カーソルキー を使用してカーソルを前方に移動します。

Chromium issues: 1399436, 1276960

その他のハイライト

以下は、このリリースでの注目すべき修正の一部です。

インラインスクリプトの debugger ステートメントで停止できなかった DevTools のリグレッションの問題が解決されました。 (1385374)
デフォルトで console.trace() メッセージを展開または折りたたむことができる新しい Console 設定。 Setting > Preferences > Expand console.trace() message by default を使って設定を ON/OFF します。 (1139616)
Sources パネルの Snippets ペインは、 Console と同様に、強化されたオートコンプリートをサポートします。 (772949)

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

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

Chrome DevTools チームとの交流

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

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

More DevTools features

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

DevTools の新機能 (Chrome 110)

再読み込み時の Performance パネルのクリア