当开发前端应用时，我们通常会使用源映射（source maps）来将压缩后的代码映射回原始的、易于阅读的形式。这对调试和排错非常有帮助，但有时候我们可能需要禁用它们以进行性能测试或其他目的。本文将介绍如何在 Chrome 开发者工具中禁用源映射。
什么是源映射？
源映射是一个文件，用于将编译后的 JavaScript 或 CSS 代码映射回原始的源代码。它包含了两个主要部分：
- 映射关系：每个编译后的行或列都与其原始行或列相对应。
- 源代码：原始的、未压缩的代码。
在开发过程中，我们通常使用压缩的代码，因为它们更小、加载更快。但这种代码很难阅读和调试，因为变量名被简化了，函数名被缩短了等等。有了源映射，我们可以在开发工具中看到原始代码，就好像我们没有压缩一样。
禁用源映射
Chrome 开发者工具默认启用源映射，但我们可以在设置中禁用它们。以下是禁用源映射的步骤：
- 打开 Chrome 开发者工具并选择 "Settings"（设置）。
- 在 "Preferences"（偏好设置）部分下找到 "Sources"（源代码）。
- 取消选中 "Enable JavaScript source maps"（启用 JavaScript 源映射）和/或 "Enable CSS source maps"（启用 CSS 源映射）。
注意，禁用源映射可能会影响调试过程。如果您在开发过程中遇到问题，请确保重新启用它们。
示例代码
以下是一个示例代码片段，它演示了如何使用源映射来将压缩后的代码映射回原始代码：
-- -------------------- ---- ------- -- ------ -------- --------------- ----- -- --- -------- --------- ----- - ------ ---- - ----- - -- ----- - ---------- -- ------- ---------------- ------------- --- ---------- -------------- -------- ------- ---- ----- ----------- ----------------------------------------------------------------------- -
在这个例子中，我们有一个 add 函数的压缩版本和源代码版本。我们还有一个源映射文件，它告诉我们如何将压缩版本的函数映射回源代码。
结论
源映射是前端开发的重要工具，但有时候我们需要禁用它们以进行性能测试或其他目的。在 Chrome 开发者工具中禁用源映射非常简单，只需按照上述步骤取消选中相应选项即可。请注意，在调试过程中重新启用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25965