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

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 を入力するとエラーが返されていました。
WeakRef オブジェクトを使用すると、別のオブジェクトへの弱い参照を保持しながら、そのオブジェクトのガベージコレクションを防ぐことができます。DevTools で値のインラインプレビューが表示され、デバッグ中に弱い参照がコンソールで直接評価されるようになりました。以前は、解決するために明示的に「deref」を呼び出す必要がありました。
シャドウ変数のインラインプレビューを修正しました。以前は、表示値が正しくありませんでした。
[ソース] パネルの [スコープ] ペインで、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 の新機能、アップデート、その他のトピックについて話し合います。

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