建站
咨詢
售后
建站咨詢
新聞中心
先看下本篇主要內(nèi)容：
楊浦ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
本篇主要介紹源代碼映射，源代碼映射（Source maps）是以??.map???結(jié)尾的文件，例如??example.min.js.map???和??styles.css.map??。大多數(shù)構(gòu)建工具都可以生成源代碼映射文件，例如Vite、webpack、Rollup、Parcel、esbuild等，一些工具默認(rèn)包含源代碼映射，而其他工具則需要額外的配置才能生成它們。
使用源代碼映射可以方便地在開發(fā)過程中進(jìn)行調(diào)試，因?yàn)樗鼈兲峁┝艘环N將壓縮、混淆和優(yōu)化的代碼還原為原始源代碼的方法。這對于診斷和修復(fù)錯誤非常有幫助，特別是在生產(chǎn)環(huán)境中。源代碼映射還可以幫助你確定哪些代碼行負(fù)責(zé)執(zhí)行特定的功能，以及從哪里調(diào)用了特定的函數(shù)。
盡管源代碼映射非常有用，但是它們會增加文件大小并增加服務(wù)器的負(fù)載。因此，在生產(chǎn)環(huán)境中通常會禁用它們，而在開發(fā)過程中啟用它們以便進(jìn)行調(diào)試。如果你使用的構(gòu)建工具不支持源代碼映射，則有可能需要手動編寫它們。
下面是正文~~~~
今天，我們要談?wù)撛创a映射，這是現(xiàn)代 Web 開發(fā)中非常重要的工具，可以顯著地簡化調(diào)試過程。在本文中，我們將探討源代碼映射的基礎(chǔ)知識，它們是如何生成的，以及它們?nèi)绾翁岣哒{(diào)試體驗(yàn)。
需要源代碼映射
回到過去的美好時(shí)光，我們使用純HTML、CSS和JavaScript構(gòu)建Web應(yīng)用程序，并將相同的文件部署到Web上。
然而，隨著我們現(xiàn)在構(gòu)建更復(fù)雜的Web應(yīng)用程序，開發(fā)工作流可能涉及使用各種工具。例如：
- 模板語言和HTML預(yù)處理器：Pug，Nunjucks，Markdown
- CSS 預(yù)處理器：SCSS、LESS、PostCSS
- JavaScript 框架：Angular、React、Vue、Svelte
- JavaScript元框架：Next.js，Nuxt，Astro
- 高級編程語言：TypeScript、Dart、CoffeeScript
這些工具需要構(gòu)建過程將我們的代碼轉(zhuǎn)換為標(biāo)準(zhǔn)的 HTML、JavaScript 和 CSS，以便瀏覽器能夠理解。此外，為了優(yōu)化性能，通常會壓縮（例如使用 Terser 來縮小和混淆 JavaScript）和合并這些文件，減小它們的大小并使它們更適合于Web。
例如，使用構(gòu)建工具，我們可以將以下TypeScript文件轉(zhuǎn)換并壓縮為一行JavaScript代碼。
/* 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)}));
然而，這種優(yōu)化可能會使調(diào)試變得更具挑戰(zhàn)性。將所有內(nèi)容壓縮到單行中并縮短變量名稱的壓縮代碼可能會使問題的源頭難以確定。這就是源映射的作用——它們將編譯后的代碼映射回原始代碼。
生成源代碼映射
源映射是以 .map 結(jié)尾的文件（例如， example.min.js.map 和 styles.css.map ）。它們可以由大多數(shù)構(gòu)建工具生成，例如 Vite、webpack、Rollup、Parcel、esbuild 等等。
一些工具默認(rèn)包含源代碼映射，而其他一些工具可能需要額外的配置才能生成它們。
/* 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
}
})
理解源代碼映射
這些源映射文件包含有關(guān)編譯代碼如何映射到原始代碼的基本信息，使開發(fā)人員能夠輕松調(diào)試。這是一個源映射的示例。
{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}源映射的最關(guān)鍵方面是 mappings 字段。它使用 VLQ 基于 64 編碼的字符串將編譯文件中的行和位置映射到相應(yīng)的原始文件?？梢允褂迷从成淇梢暬ぞ撸ㄈ?nbsp;source-map-visualization 和 Source Map Visualization）來可視化此映射。
左側(cè)生成的列顯示壓縮內(nèi)容，右側(cè)原始列顯示原始來源?？梢暬ぞ邥樵剂兄械拿恳恍泻蜕闪兄袑?yīng)的代碼進(jìn)行著色編碼。
映射部分顯示了代碼的解碼映射。例如，條目 65-> 2:2 的意思是：
- 生成的代碼：單詞 const 在壓縮內(nèi)容中的位置為65。
- 原始代碼：單詞 const 在原始內(nèi)容中的第2行第2列開始。
瀏覽器開發(fā)者工具應(yīng)用這些源映射，幫助我們更快地定位調(diào)試問題，直接在瀏覽器中進(jìn)行。
該圖顯示了瀏覽器開發(fā)者工具如何應(yīng)用源映射，并顯示文件之間的映射關(guān)系。
源映射支持?jǐn)U展。擴(kuò)展是以 x_ 命名約定開頭的自定義字段。一個例子是由 Chrome DevTools 提出的 x_google_ignoreList 擴(kuò)展字段。請參閱 x_google_ignoreList 以了解這些擴(kuò)展如何幫助您專注于我們的代碼。
它不完美
在我們的示例中，變量 greet 在構(gòu)建過程中被優(yōu)化掉了。該值直接嵌入到最終的字符串輸出中。
在這種情況下，當(dāng)我們調(diào)試代碼時(shí)，開發(fā)人員工具可能無法推斷和顯示實(shí)際值。這不僅是瀏覽器開發(fā)人員工具的挑戰(zhàn)，也使代碼監(jiān)視和分析更加困難。
當(dāng)然，這是一個可以解決的問題。其中一種方法是像其他編程語言一樣，在源映射中包含范圍信息，以便進(jìn)行調(diào)試。
然而，這需要整個生態(tài)系統(tǒng)共同努力改進(jìn)源映射規(guī)范和實(shí)現(xiàn)。目前正在積極討論如何通過源映射來提高調(diào)試性能。
我們期待著改進(jìn)源代碼映射，使調(diào)試變得更加簡單！
本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。
當(dāng)前文章：一文帶你了解什么是源代碼映射？
當(dāng)前鏈接：http://m.5511xx.com/article/djdhdho.html
