DevTools の新機能（Chrome 110）

Jecelyn Yeen

再読み込み時にパフォーマンス パネルが消去される

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

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

再読み込み時にパフォーマンス パネルがクリアされる。

Chromium の問題: 1101268、1382044

レコーダーの更新

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

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

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

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

Chromium の問題: 1385489

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

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

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

Chromium の問題: 1384431

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

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

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

Chromium の問題: 1381971

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

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

これまで、[ソース] パネルにはデフォルトで圧縮されたコンテンツが表示されていました。コンテンツの書式を設定するには、手動でプレビュー表示ボタンをクリックする必要がありました。さらに、美しく整形されたコンテンツは、同じタブではなく、別の ::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

その他のハイライト

このリリースで修正された主な点は次のとおりです。

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

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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