使用sourceMap文件定位小程序错误信息

sourceMap是什么

在前端开发过程当中代码不免会有错误，即使是再当心，也有可能出现 Cannot read property 'xxx' of null 这样的低级失误，debug天然是屡见不鲜。如何使用chorme的控制台进行debug也有许多技巧，但本文的关注点不在此，不予讨论。

在使用构建工具时，sourceMap相相信大多数人都见过，也知道webpack中的devtool参数能够配置打包生成的sourceMap模式，可是不见得知道如何使用，由于这都是构建工具和浏览器默认自带且默认处理的，多数人不去关注。简单来讲，sourceMap就是字面意思，源文件的映射，可以从压缩后的js中找到源文件对应的行列，在定位错误的时候很是有用。

sourceMap怎么用

npm run dev开始开发vue项目，先写一段简单的vue代码

代码内容很简单，就是挂载组件的时候触发断点

这时候打开浏览器就会进入断点：

再看看咱们的源码，可以发现连代码行数位置都是完美还原的，为debug提供了极大的方便（极度温馨.jpg）

可是很明显这样的代码是不能跑在浏览器中的，那浏览器是怎么作到的，查看浏览器下载的js文件 app.js：

可以发现这一段与咱们写下的vue代码基本相同，可是控制台为何没有显示在这里debugger呢？另外在 app.js 的末尾看到这样一行

//# sourceMappingURL=app.js.map 这行即是向控制台指明了该文件对应的 sourceMap ，在报错或debugger时控制台会使用该sourceMap文件得到源文件及目前光标位置（不知道怎么形容就暂时称之为光标吧，也就是源文件debugger的位置）

打开 app.js.map ，它其实是一个json文件，我装了json插件才显示成这样，可是很明显这东西我看不懂（摊手）

虽然我看不懂，但并不影响我用它debug，并且通常来讲并不须要开发者专门配置什么，这一切都是开箱即用的。

PS：因为示例比较简单且没有压缩转译，即使没有sourceMap也同样可以调试，可是在生产环境线上代码进行压缩和babel转译后会变得很是难以调试，这时候sourceMap便会很是有用。

使用sourceMap定位小程序报错信息

微信小程序后台是自带有错误日志记录的功能，本来用的还好好的，错误信息中会带出源文件的路径，顺着路径和提示信息找便可定位错误。可是在爆出可以轻易得到小程序源码的问题后小程序官方在某个版本中加入了压缩混淆的功能（不开仍是原来的样子可是开了安全系数更高），报错信息便再也不有源文件的路径了。

可是这样我要怎么调试呢，总不能一个一个replace去找吧，而小程序官方提供了sourceMap文件，从上面的尝试知道sourceMap是能够帮助定位错误信息的，可是具体要怎么使用呢？

我便开启了搜索大法，寻找使用sourceMap的办法，发现只须要使用mozilla提供的source-map库便可，因而简单作了一个可以利用sourceMap和报错行数得到源码位置的页面，效果是这样的

代码在这里，使用html写的，直接复制保存就能使用

总结

sourceMap开箱即用很舒服，只须要在源码后面加一句 //# sourceMappingURL=xxx.map便可，如果没有源码只有错误信息也能够经过source-map库定位错误。至于sourceMap的具体原理待往后有时间再深刻了解（手动狗头）。

参考连接

使用SourceMap定位问题

MDN：如何使用 source map

GITHUB：mozilla/source-map