DevTools の新機能（Chrome 80）

Kayce Basques

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

コンソールで、let ステートメントと class ステートメントの再宣言がサポートされるようになりました。再宣言できないことは、Console を使用して新しい 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

[Network] パネルの URL 列とパス列

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

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

Chromium の問題 #993366

ユーザー エージェント文字列の更新

DevTools では、[ネットワーク条件] タブでカスタムの User-Agent 文字列を設定できます。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 の新機能シリーズで取り上げられたすべての内容のリスト。