在前端开发中，我们常常会遇到 JavaScript 的调试问题，特别是当我们使用了 webpack 打包工具时，代码混淆和压缩使得调试变得更加困难。这时，source map 就变得非常重要。本文将详细介绍 webpack source map 调试技巧。
什么是 Source Map
Source map 是一个文件，它存储了打包后的代码和原始代码之间的映射关系。在浏览器中调试代码时，可以通过 source map 显示出原始的代码和行号，提高了调试效率。
如何开启 Source Map
在 webpack 配置文件中设置 devtool 属性来开启 source map。以下是 devtool 的一些选项：
source-map：启用 Source Map，推荐使用此选项。cheap-module-source-map：启用 Source Map，但不包含列信息。cheap-source-map：启用 Source Map，但只包含行信息，不包含列信息。eval-source-map：启用 Source Map，推荐在开发环境中使用此选项，可以提高调试效率。
例如：
module.exports = {
devtool: 'source-map',
// 其他配置项
}常用调试技巧
1. 在浏览器中调试
在浏览器的开发者工具中，打开 sources 选项卡，在左侧目录中可以找到 webpack 打包后的文件和原始文件，右侧则是文件的代码内容和调试信息。此时，我们可以在原始代码中打断点，然后刷新页面运行代码进行调试。
2. 在 VSCode 中调试
在 VSCode 中使用 Debugger for Chrome 插件时，可以设置 launch.json 中的 sourceMap 属性开启 source map 调试。配置示例：
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against index.html",
"file": "${workspaceFolder}/index.html",
"sourceMaps": true
}3. 在 console 中输出调试信息
我们可以在代码中使用 console.log 输出调试信息，在浏览器或控制台中查看输出结果。但在生产环境中，这种方式可能对性能有影响，因此推荐使用 debug 库进行调试，它可以在生产环境中完全移除调试语句，避免对性能造成影响。
4. 使用 Chrome DevTools 中的 Blackbox 功能
当调试的代码中包含第三方库或框架时，我们可能并不关心这些代码的具体实现，而只想看到自己的代码。这时，可以使用 Chrome DevTools 中的 Blackbox 功能，将不需要关注的代码排除在调试范围外。
示例代码
下面是一段 webpack 配置文件示例，演示了如何开启 source map，并且将调试信息输出到文件中：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -------------
------- -
------ -
-
----- --------------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ----------------------
-------- -----------------------------------
-
-
-
-
--
-------- -
--- -------------------
--------- --------------
---
--- ----------------------
--------- -----------
---
--- --------------------
--
------------- -
---------- -
--- ---------------------
--- --------------
---------------- -----
--
-
-
-总结
使用 source map 可以提高代码调试的效率，将打包后的代码和原始代码之间建立映射关系，并显示出代码的原始内容和行号。开启 source map 非常简单，我们可以在 webpack 配置文件中设置 devtool 属性。在调试中还可以使用 Blackbox 功能、console.log 和 debug 库等技巧。在开发过程中合理运用这些调试技巧，可以大大提高调试效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64723e61968c7c53b0010f78