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

DevTools の新機能（Chrome 80）

Kayce Basques

コンソールでの `let` と `class` の再宣言のサポート

コンソールで、let ステートメントと class ステートメントの再宣言がサポートされるようになりました。コンソールを使用して新しい JavaScript コードを試すウェブデベロッパーにとって、再宣言できないことはよくある悩みでした。

警告: コンソール外のスクリプトまたは単一のコンソール入力内で let または class ステートメントを再宣言すると、引き続き SyntaxError が発生します。

たとえば、以前は let でローカル変数を再宣言すると、コンソールでエラーがスローされていました。

Let の再宣言に失敗したことを示す Chrome 78 のコンソールのスクリーンショット。

これで、コンソールで再宣言が可能になりました。

Let の再宣言が成功したことを示している Chrome 80 のコンソールのスクリーンショット。

Chromium の問題 #1004193

WebAssembly デバッグの改善

DevTools で、DWARF デバッグ標準のサポートを開始しました。これにより、DevTools でソース言語でのコードのステップオーバー、ブレークポイントの設定、スタックトレースの解決に対するサポートが強化されました。詳しくは、Chrome DevTools での WebAssembly デバッグの改善をご覧ください。

DWARF を利用した新しい WebAssembly デバッグのスクリーンショット。

ネットワークパネルの更新

[Initiator] タブの [Request Initiator Chains]

ネットワークリクエストの開始元と依存関係を、ネストされたリストとして表示できるようになりました。これにより、リソースがリクエストされた理由や、特定のリソース（スクリプトなど）が引き起こしたネットワークアクティビティを把握できます。

[Initiator] タブの [Request Initiator Chain] のスクリーンショット

[ネットワーク] パネルでネットワークアクティビティをロギングしたら、リソースをクリックしてから、[イニシエータ] タブに移動して、そのリクエストイニシエータチェーンを表示します。

検査対象のリソースは太字で表示されます。上のスクリーンショットでは、https://web.dev/default-627898b5.js が検査対象のリソースです。
検査対象のリソースの上にあるリソースがイニシエータです。上のスクリーンショットでは、https://web.dev/bootstrap.js が https://web.dev/default-627898b5.js の開始元です。つまり、https://web.dev/bootstrap.js が https://web.dev/default-627898b5.js のネットワークリクエストを引き起こしたということです。
検査対象リソースの下にあるリソースが依存関係です。上のスクリーンショットでは、https://web.dev/chunk-f34f99f7.js は https://web.dev/default-627898b5.js の依存関係です。つまり、https://web.dev/chunk-f34f99f7.js に対するネットワークリクエストの原因は https://web.dev/default-627898b5.js です。

Chromium の問題 #842488

選択したネットワークリクエストを [概要] でハイライト表示

ネットワークリソースをクリックして検査すると、[概要] で、[ネットワーク] パネルのそのリソースの周囲に青い枠線が表示されるようになりました。これにより、ネットワークリクエストが想定よりも早く発生しているか遅いかを検出できます。

検査対象のリソースがハイライト表示されている [Overview] ペインのスクリーンショット。

Chromium の問題 #988253

[ネットワーク] パネルの URL とパスの列

[ネットワーク] パネルの新しい [パス] 列と [URL] 列を使用すると、各ネットワークリソースの絶対パスまたは完全な URL を確認できます。

[Network] パネルの新しい [Path] 列と [URL] 列のスクリーンショット。

[Waterfall] の表のヘッダーを右クリックして、[Path] または [URL] を選択して新しい列を表示します。

Chromium の問題 #993366

更新されたユーザーエージェント文字列

DevTools では、[ネットワーク条件] タブでカスタムのユーザーエージェント文字列を設定できます。User-Agent 文字列は、ネットワークリソースに関連付けられた User-Agent HTTP ヘッダーと、navigator.userAgent の値に影響します。

事前定義されたユーザーエージェント文字列は、最新のブラウザバージョンを反映するように更新されています。

[ネットワーク条件] タブの [ユーザーエージェント] メニューのスクリーンショット。

[ネットワーク状態] にアクセスするには、コマンドメニューを開き、Show Network Conditions コマンドを実行します。

Chromium の問題 #1029031

監査パネルの更新

新しい構成 UI

構成 UI は新しいレスポンシブデザインになり、スロットリング構成オプションが簡素化されました。スロットリング UI の変更について詳しくは、監査パネルのスロットリングをご覧ください。

新しい構成 UI。

[カバレッジ] タブの更新

関数ごとまたはブロックごとのカバレッジモード

[カバレッジ] タブには新しいプルダウンメニューがあり、コードカバレッジデータを関数ごとに収集するか、ブロックごとに収集するかを指定できます。ブロックごとのカバレッジはより詳細ですが、収集にははるかにコストがかかります。DevTools で、デフォルトで関数ごとのカバレッジが使用されるようになりました。

カバレッジモードのプルダウンメニュー。

ページの再読み込みによってカバレッジを開始する必要がある

カバレッジデータの信頼性が低いため、ページの再読み込みなしでコードカバレッジを切り替える機能は削除されました。たとえば、関数の実行がかなり前に行われ、V8 のガベージコレクタによってクリーンアップされた場合、関数は未使用として報告されることがあります。

Chromium の問題 #1004203

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

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

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

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

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