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

DevTools の新機能（Chrome 109）

Jecelyn Yeen

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

[Recorder] パネルに新しいコピーオプションが追加されました。

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

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

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

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

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

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

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

パフォーマンスパネルに表示される関数名の変更前後の比較を表示します。

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

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

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

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

Chromium の問題: 1364601、1364601

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

ソースパネルのタブを切り替えるには、次のキーボードショートカットを使用します。 macOS の場合: Function+Command+上矢印または下矢印 Windows と Linux の場合: Control+Page Up または Page Down

また、MacOS では Emacs と同様に、Ctrl+N キーと Ctrl+P キーを使用してオートコンプリートの候補を移動できます。たとえば、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 で、オンブラーイベントの後に、入力変更イベントを適切にキャプチャします。（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 の その他のオプション > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
@ChromeDevTools にツイートします。
DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。