Chrome DevTools での最新のウェブ デバッグ

Bramus
Victor Porof
Victor Porof
X GitHub

はじめに

現在、作成者は多くの抽象化を使用してウェブ アプリケーションを構築できます。多くのデベロッパーは、ウェブ プラットフォームが提供する低レベルの API を直接インターフェースするのではなく、フレームワーク、ビルドツール、コンパイラを活用して、高レベルの視点からアプリケーションを作成しています。

たとえば、Angular フレームワーク上に構築されたコンポーネントは、HTML テンプレートを使用して TypeScript で作成されます。内部的には、Angular CLI と webpack がすべてを JavaScript にコンパイルし、いわゆるバンドルにまとめ、ブラウザに送信します。

現在、DevTools でウェブ アプリケーションをデバッグまたはプロファイリングする場合、実際に記述したコードではなく、このコンパイル済みバージョンのコードが表示され、デバッグできます。ただし、著者としては望ましいことではありません。

  • 圧縮された JavaScript コードではなく、元の JavaScript コードをデバッグしたい。
  • TypeScript を使用する場合は、JavaScript ではなく、元の TypeScript コードをデバッグする必要があります。
  • Angular、Lit、JSX などのテンプレートを使用する場合、生成された DOM をデバッグする必要がない場合があります。コンポーネント自体をデバッグすることもできます。

全体的に、独自のコードを作成したときと同じようにデバッグすることをおすすめします。

ソースマップはすでにこのギャップをある程度埋めていますが、Chrome DevTools とエコシステムではこの分野でさらに多くのことができるようになっています。

早速見てみよう。

作成されたコードとデプロイされたコード

現在、[ソースパネル] でファイルツリーを操作すると、コンパイルされた（多くの場合、圧縮された）バンドルの内容が表示されます。これらは、ブラウザがダウンロードして実行する実際のファイルです。DevTools では、これをデプロイ済みコードと呼びます。

デプロイされたコードを示す Chrome DevTools のファイルツリーのスクリーンショット。

これはあまり便利ではなく、把握しづらいことがよくあります。作成者は、デプロイされたコードではなく、作成したコードを表示してデバッグする必要があります。

これを補うため、代わりに作成元のコードをツリーに表示できるようになりました。これにより、ツリーは IDE で表示されるソースファイルに近づき、これらのファイルは [デプロイされたコード] から分離されます。

作成されたコードを示す Chrome DevTools のファイルツリーのスクリーンショット。

Chrome DevTools でこのオプションを有効にするには、[設定] > [試験運用版] に移動し、[ソースを作成済みツリーとデプロイ済みツリーにグループ化] をオンにします。

DevTools の設定画面のスクリーンショット。

「自分のコードのみ」

依存関係を使用する場合やフレームワーク上にビルドする場合、サードパーティ ファイルが邪魔になることがあります。ほとんどの場合、node_modules フォルダに隠れているサードパーティ ライブラリのコードではなく、自分のコードのみを表示する必要があります。

これを補うため、DevTools にはデフォルトで追加の設定（既知のサードパーティ スクリプトを無視リストに自動追加）が有効になっています。DevTools > [設定] > [無視リスト] で確認できます。

DevTools の設定画面のスクリーンショット。

この設定を有効にすると、フレームワークまたはビルドツールで無視としてマークされているファイルまたはフォルダが DevTools で非表示になります。

Angular v14.1.0 以降、node_modules フォルダと webpack フォルダの内容には、そのようにマークが付けられています。そのため、これらのフォルダ、その中のファイル、その他のサードパーティ アーティファクトは、DevTools のさまざまな場所に表示されません。

著者側でこの新しい動作を有効にするための操作は必要ありません。この変更を実装するのはフレームワーク次第です。

スタック トレース内の無視リストに登録されたコード

無視リストに登録されたファイルが、スタック トレースには表示されなくなりました。作成者は、より関連性の高いスタック トレースを確認できるようになりました。

DevTools のスタック トレース。

スタック トレース内のすべての呼び出しフレームを表示するには、[Show more frames] リンクをクリックします。

コードのデバッグとステップスルー中に表示されるコールスタックにも同じことが言えます。フレームワークまたはバンドラが DevTools にサードパーティ スクリプトについて通知すると、DevTools は、無関係な呼び出しフレームをすべて自動的に非表示にし、ステップ デバッグ中に無視リストに登録されたコードを飛ばします。

デバッグ中の DevTools ソース デバッガのスクリーンショット。

ファイルツリー内の無視リストに登録されたコード

無視リストに登録されたファイルとフォルダを [ソース] パネルの [作成者コード] ファイルツリーから非表示にするには、DevTools の [設定] > [試験運用版] で [ソースツリービューで無視リストに登録されたコードを非表示にする] をオンにします。

DevTools の設定画面のスクリーンショット。

サンプルの Angular プロジェクトでは、node_modules フォルダと webpack フォルダが非表示になりました。

Chrome DevTools のファイルツリーのスクリーンショット。作成されたコードは表示されていますが、node_modules は表示されていません。

[クイック開く] メニューの無視リストに登録されたコード

無視リストに登録されたコードは、ファイルツリーから非表示になるだけでなく、[クイック開く] メニュー（Ctrl+P（Linux/Windows）または Command+P（Mac））からも非表示になります。

[クイック開く] メニューが表示された DevTools のスクリーンショット。

スタック トレースのさらなる改善

関連性の高いスタック トレースはすでにカバーされていますが、Chrome DevTools ではスタック トレースがさらに改善されています。

リンクされたスタック トレース

一部のオペレーションが非同期で実行されるようにスケジュールされている場合、現在のところ DevTools のスタック トレースには一部の情報しか表示されません。

たとえば、次の例は、架空の framework.js ファイル内の非常にシンプルなスケジューラです。

function makeScheduler() {
  const tasks = [];

  return {
    schedule(f) {
      tasks.push({ f });
    },

    work() {
      while (tasks.length) {
        const { f } = tasks.shift();
        f();
      }
    },
  };
}

const scheduler = makeScheduler();

function loop() {
  scheduler.work();
  requestAnimationFrame(loop);
};

loop();

デベロッパーが example.js ファイルの独自のコードでどのように使用できるかを示します。

function someTask() {
  console.trace("done!");
}

function businessLogic() {
  scheduler.schedule(someTask);
}

businessLogic();

someTask メソッド内にブレークポイントを追加しても、コンソールに出力されたトレースを調べても、このオペレーションの「根本原因」である businessLogic() 呼び出しに関する記述は見つかりませんでした。

代わりに、タスクの実行につながったフレームワークのスケジューリング ロジックのみが表示され、スタック トレースには、このタスクにつながったイベント間の因果関係を把握するのに役立つブレッドクラムは表示されません。