likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 19

在前端开发的世界中，调试源码是一项不可或缺的技能。特别是当我们使用如 Solid 这样的现代 JavaScript 框架时，深入理解其内部机制对于优化应用性能和解决问题至关重要。

对于 JavaScript 文件，我们可以直接在浏览器的开发者工具中进行调试。然而，Solid 是使用 TypeScript 编写的，在浏览器中直接调试 TypeScript 源码暂时是没办法的。TypeScript 代码在运行前需要被编译成 JavaScript，而这一过程往往伴随着代码的压缩和混淆，使得源码与执行代码之间的直接对应关系变得模糊。

为了解决这个问题，我们需要一种方法来在编译后的 JavaScript 文件和源码之间建立联系。这就是 sourcemap 的关键作用所在：它作为一个桥梁，允许我们在浏览器的开发者工具中查看和调试源码，即使实际运行的是编译后的 JavaScript 代码。

在本文中，我们将深入探讨如何有效地利用 sourcemap 进行 Solid 源码的调试，并探索一些通用的调试技巧，这些技巧同样适用于其他现代 JavaScript 框架。

Source Map

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

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

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

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

Source Map 的启用

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

//# sourceMappingURL=path/to/your/sourcemap.map

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

Source Map 格式

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

  • version：sourcemap 版本
  • file：编译后文件
  • sources：源文件数组
  • sourcesContent：源代码
  • names：源代码中的变量数组
  • mappings：映射段字符串
  • sourceRoot：源文件根目录（如果与转换前的文件在同一目录，该项为空）
{
  "version": 3,
  "file": "solid.js",
  "sources": [],
  "sourcesContent": [],
  "names": [],
  "mappings": ""
}

mappings

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

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

{
	// ...
	mappings: "AAAAA,BBBBB;CCCCC"
	// ...
}

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

  1. 编译后文件的第几列
  2. 对应源文件（sources）
  3. 源文件的第几行
  4. 源文件的第几列
  5. 源代码变量名（names）（可选）

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

同时，我们通过

  • ; 去区分编译后文件的第几行
  • , 编译后文件的对应源文件一个位置的内容

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

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

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

在 Solid 中添加 Source Map

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

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

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

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

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

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

{
  "scripts": {
    "build:js": "rollup -c -m",
  }
}

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

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

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

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

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

在 Solid 进行调试

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

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

示例

  1. 在项目根目录下创建一个 example 目录（与 dist 目录同级）。
  2. 在 example 目录中创建一个 index.html 文件，内容如下：

/exmaple/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Signal</title>
</head>
<body>
  <script type="module">
    import { createSignal, createEffect, createMemo } from "../dist/solid.js";

    debugger;
    const [track, trigger] = createSignal(0);

    console.log(track());

    createEffect(() => {
      console.log(track());
    });

    setTimeout(() => {
      trigger(1);
    }, 1000);
  </script>
</body>
</html>
  1. 使用 Live Server 或其他工具启动一个本地文件服务，以便访问编译后的文件并进行调试。

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

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

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

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

总结

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

  1. 利用打包工具生成编译后文件和 sourcemap 文件。
  2. 创建一个测试环境（html 文件），引入编译后文件。
  3. 启用本地服务器（Live Server），即可在浏览器中访问和调试代码。

参考链接

转载自:https://juejin.cn/post/7399952172869877823
评论
请登录