ignoreList ソースマップ拡張機能

ignoreList ソースマップ拡張機能を使用して、Chrome DevTools でのデバッグエクスペリエンスを改善します。

Jecelyn Yeen

Chrome DevTools では、ソースマップの ignoreList フィールドが解析され、デベロッパーのデバッグが容易になります。コンソールで次のスタックトレースを確認します。DevTools では、サードパーティのフレームはすべて自動的に非表示になり、コードに関連するフレームのみが表示されます。

スタックトレースの結果の比較。 — </ph> この画像は、Chrome DevTools で `ignoreList` がサポートされる前と後のスタックトレースを示しています。後者では、無関係なサードパーティフレームが非表示になり、デバッグ中に問題をより迅速に特定できます。

`ignoreList` とは何ですか？

ソースマップ拡張機能は、ソースマップに関する補足情報を格納する追加のフィールドです。このようなフィールドには接頭辞 x_ が付きます。

Chrome DevTools では、ignoreList フィールド（指定されている場合）を使用して生成されたコードを除外し、ウェブデベロッパーは作成したコードだけに集中できるようにします。たとえば、次のソースマップをご覧ください。

/* demo.js.map */

{
  "version": 3,
  "mappings": "AAAAA, ..."
  "sources": [
    "app.js",
    "components/Button.ts",
    "node_modules/.../framework.js",
    "node_modules/.../library.js",
    ...
  ],
  "ignoreList": [2, 3],
  ...
}

sources フィールドには、mappings エントリで使用された元のソースのリストが表示されます。マッピングの仕組みについては、ソースマップとはをご覧ください。

node_modules/…/frameworks.js と node_modules/.../library.js の 2 つのファイルはサードパーティのスクリプトであるため、ignoreList フィールドを指定して sources フィールドでそれらの位置を指定できます。Chrome DevTools でこの情報を適用して、無視したファイルでフレームを非表示にします。

閉じた状態と開いた状態のスタックトレースの比較。 — </ph> この画像は、コンソールでスタックトレースを開く前後のスタックトレースを示しています。展開すると、無視したフレームがグレー表示されます。

これは、ブレークポイントのデバッグ中に [Sources] パネルの [Call Stack] にも適用されます。

DevTools のバックグラウンドでは、追加の設定 [Automatically addknown thirdparty scripts to ignore list] がデフォルトで有効になっています。これは [DevTools] >[設定] >無視リスト。

ignoreList ソースマップフィールドを使用すると、[Sources] パネルで無視されたファイルを非表示にして、コードに集中できます。

無視リストに含まれるソースを非表示にします。

`ignoreList` にデータを入力する方法

幸いなことに、Angular や Nuxt などのフレームワークでは、すでにソースマップで ignoreList が構成されています。最新バージョンにアップグレードすれば、すぐに使用できます。スタックトレースの改善が簡単に行えます。

一方、Vite や Rollup などのビルドツールには、構成を行うための設定が用意されています。そのための webpack プラグインもあります。

フレームワークやライブラリのメンテナンス担当者は、これらの設定を実装してユーザーのデバッグエクスペリエンスを向上させる方法を理解することが重要です。Angular と Nuxt がバックグラウンドで行った処理については、次のセクションをご覧ください。

お気に入りのフレームワークやビルドツールがまだサポートしていない場合はどうすればよいでしょうか。

Google はフレームワークを積極的に活用し、こうした新しい環境を整えるためのツールを構築しています。また、この機能についてメンテナンス担当者に通知してご協力いただくこともできます。たとえば、リポジトリに問題を報告できます。

または、[DevTools] > [ファイルツリー] のファイルツリーから、手動で無視リストに関係のないスクリプトを追加することもできます。出典 >[Page] ペインで同様の結果を得る。

事例紹介: Nuxt と Angular の実装

次の 2 つのケーススタディを見てみましょう。

Nuxt の `ignoreList`

Nuxt v3.3.1 以降、node_modules と Nuxt buildDir のコンテンツは、「デバッガによって無視される」としてマークされています。

これは、Vite と Rollup を使用した Nuxt のビルド構成の変更によって実現されています。

/* vite.config.ts */

const ctx: ViteBuildContext = {
  config: vite.mergeConfig(
  build: {
    rollupOptions: {
      output: {
        sourcemapIgnoreList: (relativeSourcePath) => {
          return relativeSourcePath.includes('/node_modules/') || relativeSourcePath.includes(ctx.nuxt.options.buildDir)
        },
      }
})

DevTools チームは、これを実現してくれた Vite チームと Nuxt チームに感謝の意を表します。皆様のご協力とご尽力に心より感謝いたします。Vite と Nuxt チームの皆さまのご協力に改めて感謝いたします。

Angular の `ignoreList`

Angular v14.1.0 以降、node_modules フォルダと webpack フォルダの内容は「無視」としてマークされます。

これは、webpack の Compiler モジュールにフックするプラグインを作成することにより、angular-cli の変更によって実現しました。

Google のエンジニアが作成した webpack プラグインが PROCESS_ASSETS_STAGE_DEV_TOOLING ステージにフックし、Webpack が生成してブラウザが読み込む最終アセットをソースマップの ignoreList フィールドに入力します。

const map = JSON.parse(mapContent) as SourceMap;
const ignoreList = [];

for (const [index, path] of map.sources.entries()) {
  if (path.includes('/node_modules/') || path.startsWith('webpack/')) {
    ignoreList.push(index);
  }
}

map[`ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));

DevTools での Angular デバッグのその他の改善点については、事例紹介: DevTools を使用した Angular デバッグの改善をご覧ください。

Chrome DevTools チームは、Angular チームのこの実装の成功に貴重な貢献をいただいたことに感謝の意を表します。皆様のご協力とご尽力が不可欠であり、皆様のご尽力に感謝いたします。Angular チームの皆さん、ご協力ありがとうございました。

ignoreList ソースマップ拡張機能

ignoreList とは何ですか？

ignoreList にデータを入力する方法