DevTools の新機能（Chrome 110）

Jecelyn Yeen

再読み込み時にパフォーマンス パネルを消去する

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

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

再読み込み時にパフォーマンス パネルを消去する。

Chromium の問題: 1101268、1382044

レコーダーのアップデート

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

レコーダーでコードビューが分割され、ユーザーフロー コードを簡単に確認できるようになりました。コードビューにアクセスするには、ユーザーフローを開いて [Show Code] をクリックします。

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

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

Chromium の問題: 1385489

録音のセレクタタイプをカスタマイズする

自分にとって重要なセレクタの種類のみをキャプチャする録画を作成できます。新しい記録の作成時にセレクタのタイプをカスタマイズする新しいオプションを使用すると、XPath などのセレクタを追加または除外して、ユーザーフローに必要なセレクタのみをキャプチャできます。

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

Chromium の問題: 1384431

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

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

ユーザーフローの記録中に編集しています。

Chromium の問題: 1381971

自動的に配置されるプリティ プリント

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

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

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

Chromium の問題: 1383453、1382752、1382397

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

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

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

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

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

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

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

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

コンソールの人間工学に基づいて一貫性のある予測入力

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

その他のハイライト

このリリースでの注目すべき修正は次のとおりです。

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

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

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

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。