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

DevTools の新機能（Chrome 110）

Jecelyn Yeen

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

[Performance] パネルで、[Start profiling andrefresh page] ボタンをクリックすると、スクリーンショットとトレースの両方が消去されます。

これまで、[パフォーマンス] パネルには、過去の録画のスクリーンショットを含むタイムラインが表示されていました。そのため、実際の測定がいつ開始されたかを確認するのが困難でした。記録が確実に空白のトレースで開始されるように、パネルは常に最初に 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 ファイルを開き、sourcemap リンクをクリックすると、関連する CSS ファイルにアクセスできます。

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

Chromium に関する問題: 1385374、1385632、1385281、1385269、1383892、1361862、1383451、1393451{/19

人間工学に基づく一貫性のあるコンソールのオートコンプリート

DevTools で次の変更を実装することで、オートコンプリートの機能が強化されます。

Tab は常にオートコンプリートに使用されます。
Arrow right と Enter の動作はコンテキストによって異なります。
[コンソール]、[ソース]、[要素] パネルでは、どのテキストエディタでもオートコンプリート機能を使用できます。

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

コンソールにオートコンプリートの候補のリストが表示されます。一番上のオプションの周りには、ナビゲーションがまだ開始されていないことを示す細い点線が表示されます。
Enter キーを押すと、Console によってその行が実行されます。以前は、一番上の候補の行が自動的に補完されていました。オートコンプリートするには、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）
[ソース] パネルの [スニペット] ペインでは、コンソールと同様に、拡張オートコンプリートがサポートされます。（772949）

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

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

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

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

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