Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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 では 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）
レコーダーで、フォーカスが外れたイベントの後に、入力変更イベントを適切にキャプチャします。（1378488）
レコーダーでのデバッグエクスペリエンスを向上させるため、エクスポート時に Puppeteer 再生スクリプトを更新しました。（1351649）
リモートデバッグ用の レコーダーでの記録と再生をサポート。（1185727）
var() での特殊な CSS 変数名の解析を修正しました。これまで、DevTools は var(--fo\ o) などのエスケープ文字を含む変数の解析をサポートしていませんでした。, （1378992）

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

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

この試験運用版の 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 動画にコメントを残してください。