このページは 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 デバッグのスクリーンショット

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

[イニシエータ] タブでのリクエストイニシエータチェーン

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

[イニシエータ] タブのリクエストイニシエータチェーンのスクリーンショット

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

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

Chromium の問題 #842488

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

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

検査対象のリソースがハイライト表示された [概要] ペインのスクリーンショット。

Chromium の問題 #988253

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

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

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

[ウォーターフォール] テーブルのヘッダーを右クリックし、[パス] または [URL] を選択して新しい列を表示します。

Chromium の問題 #993366

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

DevTools では、[Network Conditions] タブでカスタムユーザーエージェント文字列を設定できます。ユーザーエージェント文字列は、ネットワークリソースに接続されている User-Agent HTTP ヘッダーだけでなく、navigator.userAgent の値にも影響します。

最新のブラウザバージョンを反映するため、事前定義されたユーザーエージェント文字列が更新されました。

[Network Conditions] タブの [User Agent] メニューのスクリーンショット。

[Network Conditions] にアクセスするには、コマンドメニューを開き、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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。