DevTools の新機能（Chrome 110）

Jecelyn Yeen

再読み込み時に [パフォーマンス] パネルをクリア

[パフォーマンス] パネルで [プロファイリングを開始してページを再読み込み] ボタンをクリックすると、スクリーンショットとトレースの両方がクリアされるようになりました。

以前は、[パフォーマンス] パネルに、以前の録画のスクリーンショットを含むタイムラインが表示されていました。そのため、実際の測定がいつ開始されたのかを把握することが困難でした。パネルは常に about:blank ページに移動してから、記録が空白のトレースで開始されるようにします。これは、すでに同じことを行っていた [パフォーマンス分析情報] パネルと一致しています。

再読み込み時に [パフォーマンス] パネルをクリア。

Chromium の問題: 1101268、1382044

レコーダーの更新

レコーダーでユーザーフローのコードを表示してハイライト表示する

レコーダーでコードの分割ビューが利用できるようになり、ユーザーフローのコードを簡単に確認できるようになりました。コードビューにアクセスするには、ユーザーフローを開き、[コードを表示] をクリックします。

レコーダーでは、左側の各ステップにカーソルを合わせると、対応するコードがハイライト表示されるため、フローを簡単に追跡できます。コード形式はプルダウンで変更できます。これにより、Nightwatch Test スクリプトなどの形式を切り替えることができます。

レコーダーのコードビュー。

Chromium の問題: 1385489

録画のセレクタの種類をカスタマイズする

自分にとって重要なセレクタ タイプのみをキャプチャする録画を作成できます。新しい録画を作成する際にセレクタのタイプをカスタマイズできるようになったため、XPath などのセレクタを含めたり除外したりして、ユーザーフローで必要なセレクタのみをキャプチャできます。

セレクタ タイプをカスタマイズする新しいオプション。

Chromium の問題: 1384431

録画中にユーザーフローを編集する

レコーダーで録音中の編集が可能になり、リアルタイムで柔軟に変更できるようになりました。調整を行うために録画を終了する必要がなくなりました。

ユーザーフローの記録中に編集する。

Chromium の問題: 1381971

自動インプレース プリティ プリント

[ソース] パネルで、圧縮されたソースファイルが自動的にプリティ プリントされるようになりました。[pretty print] ボタン { } をクリックすると、元に戻すことができます。

以前は、[ソース] パネルにデフォルトで縮小されたコンテンツが表示されていました。コンテンツの形式を設定するには、手動でプリティ プリント ボタンをクリックする必要がありました。さらに、整形されたコンテンツは同じタブではなく、別の ::formatted タブに表示されていました。

自動インプレース プリティ プリントの前後の圧縮ファイルを表示します。

Chromium の問題: 1383453、1382752、1382397

Vue、SCSS などの構文ハイライト表示とインライン プレビューの改善

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

Vue の構文のハイライト表示。

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

Vue のインライン プレビュー。

また、DevTools の [ソース] パネルにスタイルシートのソースマップが表示されるようになりました。たとえば、SCSS ファイルを開いたときに、ソースマップのリンクをクリックして関連する CSS ファイルにアクセスできます。

SASS のソースマップ リンク。

Chromium の問題: 1385374、1385632、1385281、1385269、1383892、1361862、1383451、1392106、1149734

コンソールでの人間工学に基づいた一貫性のある自動補完

DevTools では、次の変更を実装することで、自動補完の操作性を向上させています。

  • Tab は常に自動補完に使用されます。
  • Arrow right と Enter の動作はコンテキストによって異なります。
  • 予測入力の操作性は、テキスト エディタ、[コンソール]、[ソース]、[要素] パネルで一貫しています。

たとえば、コンソールで cons と入力すると、次のようになります。

  • コンソールに予測入力の候補の一覧が表示されます。一番上の候補の周りに点線の枠が表示され、ナビゲーションがまだ開始されていないことを示しています。 上部の予測入力オプションの周りに点線が表示されています。

  • コンソールで Enter を押すと、その行が実行されます。以前は、上位の候補で自動的に行が補完されていました。自動補完するには、Tab または Arrow Right を押します。Enter キーを押すと行が実行されます。

  • コンソールでは、Arrow up と Arrow down のショートカットを使用して候補リストを移動すると、選択したオプションがハイライト表示されます。 提案ナビゲーション中のハイライト。

  • ナビゲーション中に選択したオプションで自動補完するには、キーボードの Tab、Enter、または Arrow Right キーを使用します。ナビゲーション中に選択したオプションで自動補完します。

  • コードの途中で編集する場合（カーソルが n と s の間にある場合など）は、自動補完に Tab、行の実行に Enter、カーソルを前に移動させるには Arrow Right を使用します。 コードの途中で編集する。

Chromium の問題: 1399436、1276960

その他のハイライト

このリリースでの重要な修正は次のとおりです。

  • DevTools の回帰問題（インライン スクリプトの debugger ステートメントで停止しない）が解決されました。（1385374）
  • console.trace() メッセージをデフォルトで展開または折りたたむことができる新しい [コンソール] 設定。[設定] > [設定] > [console.trace() メッセージをデフォルトで展開する] で設定を切り替えます。（1139616）
  • [ソース] パネルの [スニペット] ペインでは、[コンソール] と同様に、拡張されたオートコンプリートがサポートされています。（772949） スニペットのオートコンプリート。

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

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

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

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

DevTools の新機能

DevTools の新機能シリーズで取り上げたすべての内容のリスト。