このページは Cloud Translation API によって翻訳されました。

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 を押します。
Arrow up と Arrow down のショートカットを使用して候補リスト内を移動すると、コンソールで選択したオプションがハイライト表示されます。
ナビゲーション中に、選択したオプションで予測入力を行うには、キーボードの Tab、Enter、または Arrow Right を使用します。
コードの途中の編集（たとえば、カーソルが n と s の間にあるとき）は、Tab を使用して予測入力を行い、Enter を使用してその行を実行し、Arrow Right を使用してカーソルを先に移動します。

Chromium の問題: 1399436、1276960

その他のハイライト

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

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

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。