前端生产环境调试工具sourcemap的使用

sourcemap简介

当我们的应用程序部署到生产环境时，我们发现它与我们在开发环境时的代码不同。我们的代码在构建过程中会以各种方式进行修改和优化。

TypeScript 被转译、压缩。生成的 JavaScript 包尽可能小并且能够在浏览器中正常运行。

所有这些步骤都很有效率，它们提高了我们应用程序在生产环境下的性能。但是当我们需要在生产环境下调试代码时它对我们产生了很大的障碍。

sourcemap配合Chrome 开发工具可以为我们提供一个debug线上项目的功能

sourcemap配置

vue-cli中的配置

productionSourceMap: false,

webpack中可以在devtool中设置, 在开发环境中可以配置devtool为cheap-module-source-map，方便调试。生产环境下建议采用none的方式，这样做不暴露源代码。或者是nosources-source-map 的方式，既可以定位源代码位置，又不暴露源代码。

let path = require("path")


module.exports = {
	mode:"none",
	entry:"./src/main.js",
	output:{
		filename:"build.js",
		path:path.join(__dirname,"dist")
	},
	devtool:"source-map"
}

//build.js
/***/ (function(module, exports) {

console.log("hello word")

/***/ })
/******/ ]);
//# sourceMappingURL=build.js.map

Webpack 中的 Source Map

source-map：外部。可以查看错误代码准确信息和源代码的错误位置。

inline-source-map：内联。只生成一个内联 Source Map，可以查看错误代码准确信息和源代码的错误位置

hidden-source-map：外部。可以查看错误代码准确信息，但不能追踪源代码错误，只能提示到构建后代码的错误位置。

eval-source-map：内联。每一个文件都生成对应的 Source Map，都在 eval 中，可以查看错误代码准确信息 和 源代码的错误位置。

nosources-source-map：外部。可以查看错误代码错误原因，但不能查看错误代码准确信息，并且没有任何源代码信息。

cheap-source-map：外部。可以查看错误代码准确信息和源代码的错误位置，只能把错误精确到整行，忽略列。

cheap-module-source-map：外部。可以错误代码准确信息和源代码的错误位置，module 会加入 loader 的 Source Map。

内联和外部的区别：

外部生成了文件（.map），内联没有。

内联构建速度更快。

sourcemap的使用

npm run build 后就可以发现 dist文件夹中已经存在.map文件了

这时候我们要手动将js 和 对应.map文件分隔开，不需要和js文件上传到生产环境上去，不然很容易就造成了代码泄露了

然后到生产报错的时候

• 打开混淆代码
• 右键 -> 选择【Add source map】
• 输入本地 sourceMap 的地址（此处需要启用一个静态资源服务，可以使用 http-server 或者通过浏览器打开对应混淆代码的.map文件 ），完成。本地代码执行构建命令，注意需要打开 sourceMap 配置，编译产生出构建后的代码，此时构建后的结果会包含 sourceMap 文件。

关联上 sourceMap 后，我们就可以看到 sources -> page 面板上的变化了

如果左侧出现了webpack://，则表示source map已经成功导入，可以调试对应的源码

source map 文件是否影响网页性能

这个答案肯定是不会影响，否则构建相关的优化就肯定会涉及到对于 source map 的处理了，毕竟 source map 文件也不小。

其实 source map 只有在打开 dev tools 的情况下才会开始下载，相信大部分用户都不会去打开这个面板，所以这也就不是问题了。

这时可能会有读者想说：哎，但是我好像从来没有在 Network 里看到 source map 文件的加载呀？其实这只是浏览器隐藏了而已，如果大家使用抓包工具的话就能发现在打开 dev tools 的时候开始下载 source map 了。