什么是source map？

什么是source map？它是现代网页开发中至关重要的工具，能够显著简化调试过程。在本文中，我们将探讨源映射的基础知识，它们是如何生成的，以及它们如何改善调试体验。

source map的需求

回顾过去，我们用纯HTML、CSS和JavaScript构建网页应用，并将相同的文件部署到网络上。

然而，如今我们构建的网页应用更加复杂，你的开发流程可能涉及使用各种工具。例如：

  • 模板语言和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代码。

1
2
3
4
5
6
7
8
/* 一个TypeScript演示：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);
});

压缩版本如下：

1
2
3
/* TypeScript演示的压缩JavaScript版本：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)}));

然而，这种优化可能会增加调试的难度。压缩的代码，一切都在一行中，变量名较短，这可能会使问题的源头难以找到。这就是source maps的作用所在——它们将编译后的代码映射回原始代码。

生成source maps

source maps是以.map结尾的文件（例如，example.min.js.map和styles.css.map）。它们可以被大多数构建工具生成，例如Vite、webpack、Rollup、Parcel、esbuild等等。

一些工具默认包含source maps，而其他一些可能需要额外的配置才能生成。

1
2
3
4
5
6
7
8
9
10
11
/* 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 maps

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

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

要理解这些字段的含义，你可以阅读source maps规范或者关于source maps解析文章。

source maps最关键的方面是 mappings 字段。它使用 VLQ base 64 编码的字符串将编译文件中的行和位置映射到相应的原始文件。这种映射可以使用source maps可视化工具进行可视化，例如 source-map-visualization 和 Source Map Visualization。

左侧的生成列显示了压缩内容，而右侧的原始列显示了原始源代码。

可视化工具以不同颜色编码了原始列中的每一行及其在生成列中的对应代码。

映射部分显示了代码的解码映射。例如，条目 65-> 2:2 表示：

  • 生成代码：const 这个词在压缩内容中的位置是65。
  • 原始代码：const 这个词在原始内容中的第2行第2列。

这样，开发人员可以快速确定缩小后的代码与原始代码之间的关系，使调试过程更加顺畅。

浏览器开发者工具会应用这些源映射，帮助您更快地定位调试问题，直接在浏览器中解决。

该图片显示了浏览器开发人员工具如何应用source maps并显示文件之间的映射。

它并不完美

在我们的示例中，变量greet在构建过程中被优化掉了。该值直接嵌入到最终的字符串输出中。

在这种情况下，当您调试代码时，开发者工具可能无法推断和显示实际值。这不仅是浏览器开发者工具面临的挑战，也使代码监视和分析变得更加困难。

当然，这是一个可以解决的问题。其中一种方法是在source maps中包含作用域信息，就像其他编程语言在调试信息中所做的那样。

然而，这需要整个生态系统共同努力改进源映射规范和实现。

涅槃快乐热爱生活，追求技术

个人简介。