DevTools の新機能（Chrome 109）

Jecelyn Yeen

レコーダー: ステップ、ページ内再生、ステップのコンテキスト メニューのオプションとしてコピー

レコーダー パネルの新しいコピー オプション。

レコーダーで既存のユーザーフローを開きます。以前は、ユーザーフローを再生する際に、DevTools は常にページに移動するか、ページを再読み込みして再生を開始していました。

最新のアップデートでは、レコーダーにナビゲーションの手順が個別に表示されます。右クリックして削除すると、ページ内再生を実行できます。

また、ユーザーフローをすべてエクスポートするのではなく、ステップを右クリックして [レコーダー] パネルのクリップボードにコピーすることもできます。拡張機能にも対応しています。たとえば、ステップを Nightwatch Test スクリプトとしてコピーしてみてください。この機能を使用すると、既存のスクリプトを簡単に更新できます。

これまでは、ステップメニューには 3 つの点ボタンからのみアクセスできました。ステップの任意の場所を右クリックしてメニューにアクセスできるようになりました。

Chromium の問題: 1322313、1351649、1322313、1339767

演奏の録音に実際の関数名を表示

[パフォーマンス] パネルに、トレース内の実際の関数名とソース（ソースマップがある場合）が表示されるようになりました。

パフォーマンス パネルに、関数名の変更前後の比較を表示。

この例では、ソースファイルは本番環境で圧縮されます。たとえば、このデモでは、sayHi 関数は n として、takeABreak 関数は o として圧縮されています。

圧縮前後のファイルを表示します。

これまで、[パフォーマンス] パネルでトレースを記録すると、トレースに表示されるのは全角の関数名のみでした。これにより、デバッグが難しくなりました。

最新の変更により、DevTools はソースマップを読み取り、実際の関数名とソースの場所を表示するようになりました。

Chromium の問題: 1364601、1364601

コンソールとソース パネルの新しいキーボード ショートカット

[ソース] パネルのタブを切り替えるには、macOS では Function+Command+上矢印または下矢印、Windows と Linux では Ctrl+Page up または Page down を使用します。

また、Emacs と同様に、Ctrl+N キーと Ctrl+P キー（Mac の場合）で、自動補完の候補を移動できます。たとえば、Console に window. と入力し、これらのショートカットを使用して移動できます。

さらに、DevTools では、行の末尾でのみ 右矢印による自動補完が有効になりました。たとえば、コードの途中で何かを編集しているときに、オートコンプリート ダイアログが表示されます。右矢印キーを押す場合は、通常、自動入力ではなくカーソルを次の位置に設定します。この UX の変更により、作成ワークフローがより適切になります。

Chromium の問題: 1167965、1172535、1371585。1369503

JavaScript デバッグの改善

このリリースの JavaScript デバッグの改善点は次のとおりです。

  • new.target は、new 演算子を使用して関数またはコンストラクタが呼び出されたかどうかを検出できるメタプロパティです。コンソールで new.target をログに記録して、デバッグ中にその値を確認できるようになりました。以前は、new.target を入力するとエラーが返されていました。new.target 評価デバッグの前後を比較する。
  • WeakRef オブジェクトを使用すると、別のオブジェクトへの弱い参照を保持しながら、そのオブジェクトのガベージ コレクションを防ぐことができます。DevTools で値のインライン プレビューが表示され、デバッグ中に弱い参照がコンソールで直接評価されるようになりました。以前は、解決するために明示的に「deref」を呼び出す必要がありました。 デバッグ中の WeakRef 評価の比較前後の値を表示。
  • シャドウ変数のインライン プレビューを修正しました。以前は、表示値が正しくありませんでした。 シャドー変数の比較前後のインライン プレビューを表示。
  • [ソース] パネルの [スコープ] ペインで、Generator 関数と async 関数の変数名を難読化解除します。

Chromium の問題: 1267690、1246863、1371322、1311637

その他のハイライト

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

  • [スタイル] ペインで、無効な CSS プロパティ（インラインの高さと幅、flex プロパティ、grid プロパティ）に関するヒントをサポート。（1373597、1178508、1178508、1178508）
  • 構文のハイライト表示を修正しました。DevTools の最近のコードエディタのアップグレード以降、正しく機能しなくなっていました。（1290182）
  • レコーダーで、on blur イベントの後に入力変更イベントを適切にキャプチャ。（1378488）
  • エクスポート時に Puppeteer の再生スクリプトを更新し、レコーダーでのデバッグ エクスペリエンスを改善しました。（1351649）
  • リモート デバッグ用の レコーダーでの録画と再生をサポート。（1185727）
  • var() で特殊な CSS 変数名の解析を修正しました。これまで、DevTools では、var(--fo\ o) などのエスケープ文字を含む変数の解析はサポートされていませんでした。、（1378992）

[試験運用版] ブレークポイントの管理の UX を改善

現在の [Breakpoints] ペインでは、すべてのブレークポイントを把握するための視覚的な補助がほとんどありません。さらに、よく使用するアクションはコンテキスト メニューの背後に隠れています。

この試験運用版の UX の再設計により、[ブレークポイント] ペインが構造化され、デベロッパーはブレークポイントの編集や削除など、よく使用する機能にすばやくアクセスできるようになります。

主な機能は次のとおりです。

  • どちらの一時停止オプションも [ブレークポイント] ペインにあります。オプションを明確に説明するテキストラベルが付いています。
  • ブレークポイントはファイルごとにグループ化され、行番号または列番号で並べ替えられます。チームプールは折りたたみまたは展開が可能です。**
  • [ブレークポイント] ペインでブレークポイントまたはファイル名にカーソルを合わせたときに、ブレークポイントを削除または編集するための新しいオプション。

変更内容の詳細については、RFC（クローズ済み）をご覧ください。フィードバックはこちらからお送りください。

再設計前と再設計後のブレークポイントペイン。

Chromium の問題: 1346231、1324904

[試験運用版] 自動インプレース プリティ プリント

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

これまで、[ソース] パネルにはデフォルトで圧縮されたコンテンツが表示されていました。コンテンツのフォーマット設定は、手動でプレビュー表示ボタンをクリックして行っていました。さらに、きれいに表示されたコンテンツは同じファイルではなく、別の ::formatted タブに表示されました。

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

Chromium の問題: 1164184

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

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

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

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

DevTools の新機能

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