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

DevTools の新機能（Chrome 109）

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

[パフォーマンス] パネルに、関数名の比較前と比較後の表示が表示されます。

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

圧縮前後のファイルを表示する

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

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

Chromium の問題: 1364601、1364601

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

[ソース] パネルのタブを切り替えるには、次のキーを使用します。 MacOS: Function+Command+上矢印 / 下矢印 Windows と Linux では、Ctrl+PageUp または PageDown

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

さらに、DevTools では行の末尾でのみ、右矢印を使用して予測入力を行えるようになりました。たとえば、コードの途中で内容を編集すると、予測入力ダイアログが表示されます。右矢印キーを押すと、たいていはカーソルが予測入力ではなく次の位置に設定されます。この UX の変更は、オーサリングワークフローに沿ったものになりました。

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

JavaScript デバッグの改善

このリリースでは、JavaScript のデバッグに関して次のような改善が行われました。

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

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

その他のハイライト

このリリースでの注目すべき修正は次のとおりです。

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

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

現在の [Breakpoints] ペインはすべてのブレークポイントを視覚的に把握するのに役立ちます。さらに、よく使用する操作はコンテキストメニューの背後に隠れます。

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

主な内容は次のとおりです。

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

RFC（終了）で変更内容の全文を確認し、こちらからフィードバックをお寄せください。

再設計の前と後にブレークポイントペインを表示します。

Chromium の問題: 1346231、1324904

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

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

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

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

Chromium の問題: 1164184

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。