ignoreList 來源地圖擴充功能

使用 ignoreList 來源對應擴充功能，改善 Chrome 開發人員工具的偵錯體驗。

Jecelyn Yeen

Chrome 開發人員工具會剖析來源地圖中的 ignoreList 欄位，進而改善開發人員的偵錯體驗。請在主控台中查看以下堆疊追蹤。開發人員工具會自動隱藏所有第三方頁框，且只會顯示與程式碼相關的影格。

堆疊追蹤結果的比較。 — 這張圖片顯示 Chrome 開發人員工具支援 `ignoreList` 的前後堆疊追蹤。稍後會隱藏不相關的第三方影格，協助您在偵錯期間更快找出問題。

什麼是 `ignoreList`？

來源對應額外資訊是額外的欄位，可用於儲存來源對應的補充資訊。這類欄位的前置字串是 x_。

Chrome 開發人員工具會使用 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 這兩個檔案是第三方指令碼，您可以指定 ignoreList 欄位來表示檔案在 sources 欄位中的位置。Chrome 開發人員工具會套用這項資訊，在已忽略的檔案中隱藏頁框。

收合與展開的堆疊追蹤比較。 — 這張圖片顯示您在控制台中展開堆疊追蹤前後的堆疊追蹤。展開後，忽略的影格會顯示為灰色。

在中斷點偵錯期間，這個情況也適用於「Sources」面板中的「Call Stack」。

根據預設，開發人員工具背景會啟用額外設定：「自動新增已知的第三方指令碼以忽略清單」。依序按一下開發人員工具 >「設定」 >「忽略清單」，即可找到這個清單。

有了 ignoreList 來源對應欄位，您可以選擇在「Sources」(來源) 面板中隱藏忽略的檔案，專心在程式碼上。

隱藏忽略清單中的來源。

如何填入「`ignoreList`」

好消息是，Angular 和 Nuxt 等架構已在來源對應中設定 ignoreList。升級至最新版本，就能立即使用。輕鬆取得改善堆疊追蹤。

另一方面，Vite 和 Rollup 等建構工具則會提供相關設定。您也可以使用 Webpack 外掛程式。

如果您是架構或程式庫維護人員，請務必瞭解如何實作這些設定，藉此改善使用者偵錯體驗。請參閱下一節，瞭解 Angular 和 Nuxt 是在幕後的製作。

如果您喜愛的架構和建構工具尚未支援該架構，該怎麼辦？

我們積極與架構合作並打造工具，來實現這些新設定。您也可以通知維護人員這項功能來提供協助。例如，您可以在其存放區中回報問題。

您也可以依序前往開發人員工具 >「來源」>「頁面」窗格，在檔案樹狀結構中手動將不相關的指令碼加入「忽略清單」，達成類似的結果。

個案研究：Nutxt 和 Angular 導入

歡迎參閱下列兩個個案研究。

努克斯：`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)
        },
      }
})

為了達成這個目標，開發人員工具團隊想向 Vite 和 Nuxt 團隊表達謝意。感謝你的配合與合作，這對這項措施的成功有重大影響。再次感謝 Vite 和 Nuxt 團隊的貢獻！

角度：`ignoreList` (Angular)

自 Angular v14.1.0 起，將 node_modules 和 webpack 資料夾的內容標示為「忽略」。

透過 angular-cli 中的變更，也就是建立能掛入 Webpack Compiler 模組的外掛程式即可。

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)));

如要進一步瞭解開發人員工具的其他 Angular 偵錯改善項目，請參閱「個案研究：使用開發人員工具改善 Angular Debugging」。

感謝 Angular 團隊的支持，這是我們由 Chrome 開發人員工具團隊提供的寶貴貢獻。您的努力和合作至關重要，我們十分感謝各位的付出。謝謝 Angular 團隊，由衷感謝你的配合！

ignoreList 來源地圖擴充功能

什麼是 ignoreList？

如何填入「ignoreList」