DevTools の新機能（Chrome 80）

Kayce Basques
Kayce Basques
X GitHub

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

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

たとえば、以前は、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/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] 列のスクリーンショット。

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

Chromium の問題 #993366

ユーザー エージェント文字列を更新しました

DevTools では、[ネットワーク条件] タブでカスタムの User-Agent 文字列を設定できます。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 の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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