JavaScript Source Maps: 你应该了解的信息

2024-04-28  本文已影响0人  涅槃快乐是金

JavaScript已经成为Web开发人员的基本编程语言。它用于开发具有动态和交互特性的复杂Web应用程序。

然而，调试和故障排除JavaScript代码可能是一项艰巨的任务，特别是当代码库很大时。这就是JavaScript源映射派上用场的地方。

它们提供了一种将被缩小或转译的代码映射回其原始源代码的方法，从而使调试和故障排除问题变得更容易。

当浏览器在被缩小的代码中遇到错误时，它使用源映射来定位错误发生的原始源文件和行号。这使得开发人员更容易调试和故障排除他们的代码中的问题。

在这篇博客文章中，我们将探讨JavaScript源映射的概念以及如何开始使用它们。我们还将探讨不同类型的源映射以及如何为您自己的代码生成它们。

JavaScript Source Maps是什么？

Source Maps是一种文件，提供了在浏览器中执行的被压缩或转译代码与开发人员编写的原始未被压缩的源代码之间的映射。它们包括有关原始代码的文件结构、变量名称和与被缩小代码的逐行对应关系的信息。

您可以在源映射中搜索，并获取生成的·JavaScript·查询特定行和列号时的初始位置。


源映射可以立即被开发者工具解析（目前支持WebKit夜间版本构建、Google Chrome或Firefox 23+），给人一种你正在操作未被缩小和未被组合的文件的印象。

Source Maps的必要性

尽管已经讨论过编译到JavaScript的语言（如CoffeeScript）以及添加对CSS预处理器（如SASS或LESS）的支持的潜力，但源映射目前仅在未压缩/组合的JavaScript与压缩/未组合的JavaScript之间起作用，未来看好。

Source Maps是一个或多个初始源文件与生成的、转译的或被压缩的JavaScript文件之间的关系。Source Maps主要用于辅助故障排除。本质上，如果生成的代码文件包含错误，映射可以标识出初始源文件的位置。

因此，这些源文件是为程序员准备的。它们是您几乎每天都会使用的资源。这些文件主要旨在帮助软件开发，在促进有效的团队合作和问题解决方面发挥着关键作用。

被称为Source Maps的文件夹用于将您的源（原始）代码转移到生成的代码中。换句话说，生成代码中的一行代表了源代码中源映射标识的行。

使用uglify-js生成JavaScript Source Maps

在开始之前，您需要一个工具来帮助创建源映射，作为创建JavaScrip的压缩版本的一部分。就我们个人而言，我们使用UglifyJS，并认为它是一个很棒的实用工具。

如果您已经安装了Node.js（即使您不是Node开发人员），您可以执行以下命令来安装它：

npm install uglify-js -g

上述命令将全局安装Uglify JS，因此您可以从命令行中使用它。

假设您有一个名为example.js的JavaScript文件，其内容如下：

function add(a, b) {
  return a + b;
}

console.log(add(2, 3));

要生成带有Source Maps的压缩代码，您可以使用uglifyjs命令行工具，如下所示：

uglifyjs example.js --compress --mangle --output example.min.js --source-map

运行此命令后，您将获得两个文件：example.min.js（缩小后的代码）和在缩小文件末尾的一个 sourceMappingURL 注释，它指向源映射文件（example.min.js.map）。

//# sourceMappingURL=example.min.js.map

这个注释很重要，因为它告诉浏览器在调试时找到相应的Source Maps的位置。它将压缩的代码与其Source Maps关联起来，使开发人员能够使用原始源代码进行调试。

在您的HTML文件中，您可以包含缩小的JavaScript文件并使用以下代码链接到源映射：

<script src="example.min.js"></script>
<script src="example.min.js.map"></script>

浏览器将使用源映射将错误和调试信息映射回原始的 example.js 文件。

通过这种设置，当发生错误或您需要调试代码时，您的浏览器开发者工具将在原始源代码（example.js）的上下文中显示错误和堆栈跟踪，从而更容易地识别和修复代码中的问题。

通过遵循这些步骤，您可以使用uglify-js生成JavaScript Source Maps，从而改善您的缩小JavaScript代码的调试体验。

Source Maps文件的详细解析

源映射文件的分解文件是JSON数据。它包括以下关键组件，例如：

这是Source Maps的一个示例：

{
  "version": 3,
  "file": "app.min.js",
  "sources": ["src/file1.js", "src/file2.js"],
  "sourcesContent": ["/* Contents of file1.js */", "/* Contents of file2.js */"],
  "mappings": "AAAA;ACAA;AAAA;...",
  "names": ["console", "log", "add"],
  "sourceRoot": "/source-maps"
}

在实践中，"mappings"部分通常是源映射中最复杂的部分。它使用base64 VLQ（可变长度数量）编码来高效地表示映射数据，包括关于行、列、源文件和符号名称的信息。

通过将源映射中的信息与原始源代码结合起来，浏览器和调试工具可以准确地显示原始源代码，设置断点，并像未被缩小或转译的代码一样逐步执行代码。

利用Source Maps简化调试

想象一下，您有一个被压缩的JavaScript或CSS文件以及一个关联的Source Maps。当出现错误时，浏览器可以利用源映射将错误映射回原始源代码的确切位置。这意味着开发人员可以识别出问题所在的行、列，甚至变量名称，极大地简化了调试过程。

Source Maps为简化调试提供了几个好处：

1. 内联源映射

内联Source Maps嵌入在编译后的文件中，使用数据URL。这消除了对额外HTTP请求的需求，但稍微增加了文件大小。开发人员可以通过引用此内联源映射注释，轻松将编译后的代码与原始源相关联。

//# sourceMappingURL=data:application/json;base64, ...

这个独特的注释指示Web浏览器如何连接编译后的代码到初始版本，并添加到您的常规`JavaScript文件中。

2. 外部Source Maps

外部Source Maps提供了一种替代方法。在这种情况下，Source Maps存储在单独的文件中。这种技术在生产环境中特别有益，因为不需要实时加载Source Maps。

通过选择外部Source Maps，您可以保持较小的生产文件，而不会牺牲调试能力。此分离简化了应用程序的结构，使其在生产环境中更容易检查。

在某些情况下，您可能选择不为生产包生成Source Maps，这也可以通过禁用Source Maps来提供一定程度的混淆。这种方法在测试期间非常有价值，以确定是否希望为生产启用Source Maps。

//# sourceMappingURL=/path/to/script.js.map
3. 隐藏Source Maps

Source Maps映射具有特定的目的：它们在部署的应用程序中发生错误时提供了必要的堆栈跟踪信息。

当错误发生时，这些映射尤其有价值，可以准确定位故障的原因，并帮助解决问题的情况。为了利用这些信息，开发人员可以将隐藏的Source Maps链接到跟踪服务。

虽然不是最理想的解决方案，但这种做法确保即使在实时环境中，您也可以了解潜在的问题。了解潜在问题的好处超过了没有优化解决方案的缺点。

浏览器对Source Maps的支持

Source Maps已经在现代Web浏览器中得到了广泛的接受，结果是内置的支持，确保在各种开发环境中获得一致且有效的调试体验

以下是主流浏览器中Source Maps的兼容性概述：

  1. Mozilla Firefox
    Firefox是另一个完全支持Source Maps的浏览器。它将它们无缝集成到其开发者工具中，使开发人员能够轻松地导航和调试他们的代码。Firefox通过源映射集成提供了用户友好的调试体验。

  2. Safari
    苹果的Safari浏览器也支持源映射，允许使用macOS和iOS设备的开发人员从高效的调试工作流程中受益。与Chrome和Firefox类似，Safari的开发者工具充分利用了源映射进行准确的调试。

结论

通过Source Maps，快速有效地修复代码，回到原始源文件，并更好地了解浏览器的操作成为可能。当Source Maps与Chrome和Firefox等开发者工具结合使用时，调试和查看问题立即变得更加简单。

在本博客中，我们看到了Source Maps的必要性以及在使用Source Maps时调试变得更加简单的原因。还了解了源映射的类型以及它们如何与其他浏览器配合使用。

现在，我们可以轻松地在我们的JavaScript的缩小形式和未缩小的代码之间进行映射。任何处理过的文件都可以使用源映射，一种基于JSON的映射格式，来建立源和处理结果之间的映射连接。

对于我们的缩小JavaScript，我们从CoffeeScript输出的内容，我们从Less输出的内容，以及我们从Sass输出的内容，我们都可以使用源映射！我们的目标是创建一个JavaScript源映射，用于管理我们的缩小JavaScript的本地化。

上一篇 下一篇

猜你喜欢

热点阅读