ignoreList 來源地圖擴充功能

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

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

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

在中斷點偵錯期間,這也適用於「Sources」面板中的 Call Stack

開發人員工具背後會預設啟用一項額外設定:「自動新增已知的第三方指令碼以忽略清單」。你可以在開發人員工具中前往 >「設定」>忽略清單

您可以使用 ignoreList 來源對應欄位,選擇在「來源」面板中隱藏忽略的檔案,將焦點放在程式碼上。

隱藏忽略清單中的來源。

如何填入 ignoreList

好消息是 AngularNuxt 等架構已在來源對應中設定 ignoreList。升級至最新版本即可直接使用。輕鬆改善堆疊追蹤。

另一方面,ViteRollup 等建構工具提供進行設定。另外,我們也提供適用的 webpack 外掛程式

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

如果您慣用的架構和建構工具尚未支援,該怎麼辦?

我們積極與不同架構和建構工具合作,以實現這些新設定。您也可以通知維護人員有關這項功能的幫助。舉例來說,您可以在對方的存放區中提出問題。

或者,您也可以在開發人員工具中的檔案樹狀結構中,手動將不相關的指令碼加入忽略清單來源 >「網頁」窗格就能達到類似結果。

個案研究:Nuxt 和 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 團隊的貢獻!

Angular 的 ignoreList

Angular v14.1.0 起,node_moduleswebpack 資料夾的內容已標示為「可忽略」

方法是建立可掛鉤至 Webpack Compiler 模組的外掛程式,藉此達成 angular-cli 的變更

我們的工程師建立的 webpack 外掛程式是建立掛鉤至 PROCESS_ASSETS_STAGE_DEV_TOOLING 階段,並在來源對應的 ignoreList 欄位中填入 webpack 產生的最終資產以及瀏覽器載入的最終資產。

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 偵錯

Chrome 開發人員工具團隊想向 Angular 團隊致敬,感謝他們對這項實作成功的寶貴貢獻。您的努力與合作非常重要,我們非常感謝您付出的努力。謝謝 Angular 團隊,感謝你的配合。