DevTools の新機能（Chrome 109）

Jecelyn Yeen

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

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

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

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

これまでは、ステップ メニューにはその他ボタンからしかアクセスできませんでしたが、ステップの任意の場所を右クリックしてメニューを開くことができるようになりました。

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

パフォーマンスの録画で実際の関数名を表示

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

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

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

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

Chromium の問題: 1364601、1364601

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

ソース パネルのタブを切り替えるには、次のキーを使用します。 macOS の場合: Function + Command + ↑ または ↓ Windows と Linux の場合: Control + Page Up または Page Down

また、MacOS では Ctrl+N キーと Ctrl+P キーを使用して、Emacs と同様にオートコンプリートの候補を移動できます。たとえば、Console に window. と入力し、これらのショートカットを使用して移動できます。

さらに、DevTools では、行の末尾でのみ予測入力に 右矢印が使用できるようになりました。たとえば、コードの途中で何かを編集しているときに、オートコンプリート ダイアログが表示されます。右矢印キーを押すのは、オートコンプリートではなく、カーソルを次の位置に設定するためである可能性が高いです。この UX の変更により、オーサリング ワークフローとの整合性が向上します。

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

JavaScript デバッグの改善

このリリースでは、JavaScript のデバッグ機能が次のように改善されています。

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

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

その他のハイライト

このリリースでの重要な修正は次のとおりです。

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

[試験運用版] ブレークポイントの管理における UX の強化

現在の [Breakpoints] ペインでは、すべてのブレークポイントを監視する際に視覚的な補助がほとんど提供されません。さらに、よく使用する操作がコンテキスト メニューの背後に隠れています。

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

以下にその一部をご紹介します。

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

変更内容の詳細は、RFC（非公開）をご覧ください。フィードバックはこちらからお寄せください。

Chromium の問題: 1346231、1324904

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

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

以前は、[ソース] パネルにデフォルトで縮小されたコンテンツが表示されていました。コンテンツをフォーマットするには、手動でプリティ プリント ボタンをクリックする必要がありました。また、整形されたコンテンツは同じファイルではなく、別の ::formatted タブに表示されていました。

Chromium の問題: 1164184

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能リクエストは、crbug.com からお送りください。
• DevTools の more_vert その他アイコン > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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