DevTools の新機能（Chrome 80）

Kayce Basques

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

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

たとえば、以前は let を使用してローカル変数を再宣言すると、コンソールから次のエラーがスローされていました。 error:

let の再宣言が失敗することを示す Chrome 78 のコンソールのスクリーンショット。

現在、コンソールで再宣言が可能です。

let の再宣言が正常に行われたことを示す、Chrome 80 のコンソールのスクリーンショット。

Chromium の問題 #1004193

WebAssembly デバッグの改善

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

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

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

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

ネットワーク リクエストの開始元と依存関係を、ネストされたリストとして表示できるようになりました。これにより、 リソースがリクエストされた理由、特定のリソース（ 使用されることがあります。

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

[ネットワーク] パネルでネットワーク アクティビティをロギングした後、リソースをクリックして [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。
  • 検査対象のリソースの下にあるリソースは、dependenciesです。上のスクリーンショットでは、 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 の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。