DevTools の新機能（Chrome 80）

Kayce Basques

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

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

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

現在、コンソールでは再宣言が許可されています。

Chromium の問題 #1004193

WebAssembly デバッグの改善

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

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

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

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

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

• 検査対象のリソースは太字で表示されます。上記のスクリーンショットでは、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/default-627898b5.js が https://web.dev/chunk-f34f99f7.js のネットワーク リクエストを引き起こしたということです。

Chromium の問題 #842488

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

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

Chromium の問題 #988253

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

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

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

Chromium の問題 #993366

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

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

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

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

Chromium の問題 #1029031

[監査] パネルの更新

新しい構成 UI

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

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

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

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

カバレッジはページを再読み込みすることで開始されるようになりました

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

Chromium の問題 #1004203

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

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

Chrome DevTools チームに問い合わせる

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能のリクエストは、crbug.com からお送りください。
• DevTools の more_vert その他アイコン > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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