什麼是來源對應?

來源對應是新型網頁開發中的重要工具,可進行偵錯 變得簡單許多本頁面說明來源對應的基本概念,以及這些對應關係 以及這些模型如何改善偵錯體驗

來源對應的需求

早期的網路應用程式在開發時複雜度都較低,開發人員部署了 HTML、CSS 和 JavaScript 檔案都存放在網路上

新世代複雜的網頁應用程式必須在 開發工作流程例如:

,瞭解如何調查及移除這項存取權。
各種工具的簡介。
一些常見的網頁應用程式開發工具。

這些工具需要建構程序 才能將程式碼轉譯成標準 HTML 和瀏覽器都能解讀的 JavaScript 和 CSS另一項常見的做法是 使用像 Terser

舉例來說,透過建構工具,我們可以轉譯並壓縮下列項目 將 TypeScript 檔案轉換為單行 JavaScript。您可以在 這個 GitHub 上的示範

/* A TypeScript demo: example.ts */

document.querySelector('button')?.addEventListener('click', () => {
  const num: number = Math.floor(Math.random() * 101);
  const greet: string = 'Hello';
  (document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
  console.log(num);
});

壓縮版本如下:

/* A compressed JavaScript version of the TypeScript demo: example.min.js  */

document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));

不過,壓縮程式碼可能會增加偵錯難度。來源對應 只要將編譯的程式碼對應至原始程式碼,即可消除這個問題。 協助您快速找出錯誤來源。

產生來源對應

來源對應為名稱結尾為 .map 的檔案 (例如 example.min.js.mapstyles.css.map)。多數版本都能產生模型 (包括 Vitewebpack) RollupParcel建構

根據預設,部分工具包含來源對應。其他人可能需要額外的 來產生容器:

/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */

export default defineConfig({
  build: {
    sourcemap: true, // enable production source maps
  },
  css: {
    devSourcemap: true // enable CSS source maps during development
  }
})

瞭解來源對應

這些來源對應檔案內含重要資訊,可協助偵錯 瞭解經過編譯的程式碼與原始程式碼的對應關係這裡的範例是 來源對應:

{
  "mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
  "sources": ["src/script.ts"],
  "sourcesContent": ["document.querySelector('button')..."],
  "names": ["document","querySelector", ...],
  "version": 3,
  "file": "example.min.js.map"
}

如要瞭解這些欄位,請參閱 來源對應規格來源對應的剖析

來源對應最重要的部分是 mappings 欄位。該公式採用 VLQ Base 64 編碼字串 將編譯檔案中的線條和位置對應至對應的原始檔案 檔案。您可以使用來源地圖視覺化工具檢視此對應,例如 source-map-visualization來源地圖視覺化

來源對應視覺化。
視覺化工具產生的上一個程式碼範例。

左側的已產生資料欄會顯示壓縮內容,而 原始資料欄會顯示原始來源。

視覺化工具會為 original 資料欄中的每一行加上顏色標記,並使用 已產生欄中的對應程式碼。

對應區段會顯示已解碼的程式碼對應。舉例來說, 項目 65 -> 2:2 代表:

  • 已產生程式碼:在壓縮內容中的位置 65 開始,const 字詞。
  • 原始程式碼:原始內容中的 const 這個字詞從第 2 行和第 2 欄開始。
,瞭解如何調查及移除這項存取權。
對應項目。
對應視覺化呈現,著重在 65 -> 2:2 項目。

這可讓開發人員快速識別壓縮程式碼之間的關係 和原始程式碼,讓偵錯作業更加順暢

瀏覽器開發人員工具會套用這些來源對應,協助您找出 在瀏覽器中快速偵錯。

用於套用來源對應的開發人員工具。
瀏覽器開發人員工具的應用範例 來源對應,並顯示檔案之間的對應關係。

來源對應擴充功能

來源對應支援開頭為 x_ 前置字串的自訂擴充功能欄位。一 範例是 Chrome 建議的 x_google_ignoreList 擴充功能欄位 開發人員工具。詳情請參閱 x_google_ignoreList ,進一步瞭解這些擴充功能如何讓您專注在程式碼。

來源對應缺點

但遺憾的是,來源對應有時不一定能完全完整。 在第一個範例中,變數 greet 在建構期間已最佳化 路徑,即使該值會直接嵌入最終字串輸出中。

未對應變數問候語。
原始的 greet 變數 對應缺少程式碼。

在此情況下,當您對程式碼偵錯時,開發人員工具可能無法 推斷並顯示實際值這類錯誤可能會導致程式碼 更難以監控及分析

變數問候未定義。
開發人員工具找不到 greet 的值。

這個問題必須在來源地圖設計中解決。一 潛在的解決方法是將範圍資訊加入 就像其他程式設計語言處理偵錯資訊一樣

不過,需要整個生態系統攜手合作,才能提升 來源對應規格和實作。如要追蹤後續 運用來源對應改善偵錯能力,請參閱 來源 Maps 第 4 版