翻译自：What are source maps? (web.dev)

source map 可以提高网页调试体验, 是现代Web开发中至关重要的工具，可以显著改善调试体验。在本文中，我们将探讨源映射的基础知识，它们是如何生成的以及如何改善调试体验。

应用场景都有哪些

前端在发展之初，我们使用纯HTML、CSS和JavaScript构建Web应用程序，然后将相同的文件部署到Web上。然而，随着我们现在构建的Web应用程序越来越复杂，您的开发工作流可能涉及使用各种工具。例如：

模板语言和HTML预处理器：Pug、Nunjucks、Markdown等。
CSS预处理器：SCSS、LESS、PostCSS等。
JavaScript框架：Angular、React、Vue、Svelte等。
JavaScript元框架：Next.js、Nuxt、Astro等。
高级编程语言：TypeScript、Dart、CoffeeScript等。
等等。列表可以无限延续！

这些工具需要进行构建，将开发代码转换为浏览器可以理解的标准HTML、JavaScript和CSS。此外，为了优化性能，通常会对这些文件进行压缩（例如使用Terser来缩小和混淆JavaScript），并将它们组合起来，以减小它们的大小并使它们在网络上更高效。

例如，使用构建工具，我们可以将以下TypeScript文件转译和压缩为单行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)}));

这种压缩后的代码使调试变得更加具有挑战性。将所有内容压缩为单行并缩短变量名称的压缩代码可能会使问题的源头难以确定。这就是souce mpa的作用——它们将编译后的代码映射回原始代码。

生成source map

源代码映射是以.map结尾的文件（例如，example.min.js.map和styles.css.map）。它们可以由大多数构建工具生成，例如Vite，webpack，Rollup，Parcel，esbuild等。

一些工具默认包括源代码映射，而其他工具可能需要额外的配置才能生成它们

/* 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  
    }  
})

理解source map

source map文件包含有关如何将编译代码映射到原始代码的重要信息，使开发人员能够轻松进行调试。以下是一个源映射文件的示例。

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