DevTools の新機能（Chrome 109）

Jecelyn Yeen

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

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

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

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

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

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

Chromium に関する問題: 1322313、1351649、1322313、1339767

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

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

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

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

圧縮前と圧縮後のファイルを表示します。

これまで、[Performance] パネルでトレースを記録した場合、トレースには圧縮された関数名しか表示されませんでした。これにより、デバッグが難しくなりました。

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

Chromium に関する問題: 1364601、1364601

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

[Sources] パネルでタブを切り替えるには、以下のコマンドを使用します。 MacOS では、Function+command+上矢印 + 下矢印 キー、 Windows と Linux の場合は、Ctrl+PageUp または Down

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

さらに、DevTools では行末のオートコンプリートで右矢印のみを使用できるようになりました。たとえば、コードの途中で編集しているときには、オートコンプリート ダイアログが表示されます。右矢印キーを押したときに、カーソルをオートコンプリートではなく次の位置に移動したい場合があります。この UX の変更は、作成ワークフローにより沿ったものです。

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

JavaScript デバッグの改善

このリリースにおける JavaScript デバッグの改善点は次のとおりです。

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

Chromium に関する問題: 1267690、1246863 1371322、1311637

その他のハイライト

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

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

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

現在の [Breakpoints] ペインでは、すべてのブレークポイントを視覚的に確認することができません。さらに、よく使用するアクションがコンテキスト メニューの後ろに隠れています。

この試験運用版の UX デザインにより、[Breakpoints] ペインが構造化され、ブレークポイントの編集や削除などのよく使用する機能に簡単にアクセスできるようになりました。

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

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

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

再設計の前後に [Breakpoint] ペインを表示。

Chromium に関する問題: 1346231、1324904

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

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

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

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

Chromium の問題: 1164184

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

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

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

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

  • crbug.com からご提案やフィードバックをお送りください。
  • DevTools の問題を報告するには、DevTools でその他のオプション アイコン その他   > [ヘルプ] > [DevTools の問題を報告する] を選択します。
  • @ChromeDevTools にツイートします。
  • 「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。

DevTools の新機能

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59