來源對應是新型網頁開發中的重要工具,可進行偵錯 變得簡單許多本頁面說明來源對應的基本概念,以及這些對應關係 以及這些模型如何改善偵錯體驗
來源對應的需求
早期的網路應用程式在開發時複雜度都較低,開發人員部署了 HTML、CSS 和 JavaScript 檔案都存放在網路上
新世代複雜的網頁應用程式必須在 開發工作流程例如:
- 提供範本語言和 HTML 預先處理器的範本:Pug、 Nunjucks、 扣分項目:
- CSS 預先處理器:SCSS LESS、PostCSS。
- JavaScript 架構:Angular、React、 Vue、Svelte。
- JavaScript 中繼架構:Next.js、 Nuxt、Astro。
- 高階程式設計語言: TypeScript、 Dart、 CoffeeScript:
這些工具需要建構程序 才能將程式碼轉譯成標準 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.map
和 styles.css.map
)。多數版本都能產生模型
(包括 Vite、webpack)
Rollup、Parcel 和
建構。
根據預設,部分工具包含來源對應。其他人可能需要額外的 來產生容器:
/* 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 欄開始。
這可讓開發人員快速識別壓縮程式碼之間的關係 和原始程式碼,讓偵錯作業更加順暢
瀏覽器開發人員工具會套用這些來源對應,協助您找出 在瀏覽器中快速偵錯。
來源對應擴充功能
來源對應支援開頭為 x_
前置字串的自訂擴充功能欄位。一
範例是 Chrome 建議的 x_google_ignoreList
擴充功能欄位
開發人員工具。詳情請參閱 x_google_ignoreList
,進一步瞭解這些擴充功能如何讓您專注在程式碼。
來源對應缺點
但遺憾的是,來源對應有時不一定能完全完整。
在第一個範例中,變數 greet
在建構期間已最佳化
路徑,即使該值會直接嵌入最終字串輸出中。
在此情況下,當您對程式碼偵錯時,開發人員工具可能無法 推斷並顯示實際值這類錯誤可能會導致程式碼 更難以監控及分析
這個問題必須在來源地圖設計中解決。一 潛在的解決方法是將範圍資訊加入 就像其他程式設計語言處理偵錯資訊一樣
不過,需要整個生態系統攜手合作,才能提升 來源對應規格和實作。如要追蹤後續 運用來源對應改善偵錯能力,請參閱 來源 Maps 第 4 版 。