Solid 之旅 —— 调试源码篇（其他框架也适用）

type

status

date

slug

summary

Source Map

Source map 是一种映射文件，它记录了转换后代码与原始源代码之间的对应关系。这种映射使得开发者能够在浏览器中直接调试原始的 JavaScript/TypeScript 代码，而不是压缩混淆后的 JavaScript 代码。

通过 sourcemap 文件，当进行打印或报错提示时，会显示源码的位置信息，而不是转换后代码的位置。

当然，这也是得利于 Chrome 浏览器的支持，我们可以在控制台的设置中看到 JavaScript source maps 的选项，来启用该功能（默认是开启的）。

Source Map 的启用

在编译过程中生成 sourcemap 文件，并在打包后的 JavaScript 文件尾部中通过以下注释指定其位置：

这个路径既可以是本地路径，也可以是网络上的资源路径。

Source Map 格式

Source map 文件通常包含以下属性：

version：sourcemap 版本

file：编译后文件

sources：源文件数组

sourcesContent：源代码

names：源代码中的变量数组

mappings：映射段字符串

sourceRoot：源文件根目录（如果与转换前的文件在同一目录，该项为空）

`mappings`

mappings 属性是 sourcemap 中最关键的部分，它使用一种特殊的编码方式（VLQ编码）来压缩表示映射信息。这种编码方式可以有效地减少文件大小，同时保持映射信息的准确性。

关于 mappings 的映射原理，我简单的讲述一下。

以上面这个为例，一个位置用五位符号表示，分别的含义是：

编译后文件的第几列

对应源文件（sources）

源文件的第几行

源文件的第几列

源代码变量名（names）（可选）

即：编译后文件的第几列 | 对应源文件 | 源文件的第几行 | 源文件的第几列 | 源代码变量名

同时，我们通过

; 去区分编译后文件的第几行

, 编译后文件的对应源文件一个位置的内容

而且，如果直接用文件路径、第几列、第几行表示，会非常的占空间，所以这里使用了 VLQ编码 进行压缩精简表示。

如果想更深入地理解 sourcemap 和 VLQ编码，推荐以下两篇文章给大家。

JavaScript Source Map 详解 - 阮一峰的网络日志

访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js，打开压缩后的版本，滚动到底部，你可以看到最后一行是这样的：

https://ruanyifeng.com/blog/2013/01/javascript_source_map.html

juejin.cn

https://juejin.cn/post/7199895323187347514#heading-2

在 Solid 中添加 Source Map

要在 Solid 项目中添加 sourcemap，我们需要在构建过程中包含它。虽然 Solid 本身不直接提供这个功能，但我们可以通过构建工具来实现。

首先，确认您的项目使用的构建工具。以 Solid 库为例，我们查看 package.json 文件来确定使用的是 rollup。

接下来，我们需要修改 rollup 的配置来生成 sourcemap。这可以通过修改 rollup.config.js 文件或在 package.json 的脚本中添加相应参数来完成。

为了简单起见，我们选择在 package.json 的脚本中添加参数。更新您的 scripts 部分如下：

然后直接进行脚本进行打包即可。

构建完成后，检查 dist 目录，可以看到 sourcemap 文件已经添加进来了。

查看 solid.js 文件的尾部，也可以看到 sourcemap 文件的映射。

在 Solid 进行调试

接下来，我们就利用编译后的 Solid 文件及其 sourcemap 文件，我们可以开始调试过程。

由于 Solid 没有提供现成的案例，我们将自己创建一个。

示例

在项目根目录下创建一个 example 目录（与 dist 目录同级）。

在 example 目录中创建一个 index.html 文件，内容如下：

/example/index.html

使用 Live Server 或其他工具启动一个本地文件服务，以便访问编译后的文件并进行调试。

打开浏览器的开发者工具，即可进行调试了。

总结

其实调试很简单，而且它不仅适用于 Solid，也适用于其他框架：

利用打包工具生成编译后文件和 sourcemap 文件。

创建一个测试环境（html 文件），引入编译后文件。

启用本地服务器（Live Server），即可在浏览器中访问和调试代码。

参考链接

深入理解SourceMap原理及应用 - 掘金 (juejin.cn)

JavaScript Source Map 详解 - 阮一峰的网络日志 (ruanyifeng.com)