随着web H5应用的广泛，很多原生软件采用原生+H5混合开发到的模式，对于安卓和IOS原生的app他们有自己的调试方式，比较友好，出现问题也比较好重现，而web app的js代码一旦部署上生产，代码和接口层面的报错很难捕捉，一般都要通过取日志去查看报错，为了方便定位问题，我的项目引入过以下两个调试工具，以下是对vconsole和eruda两个工具的使用和对比。
1.vconsole
vconsole基本能满足移动端的调试，调试效果如下图，但是vconsole的控制台比较单一，总体调试功能比较低配。并不是所有的控制台都会报错。有些忘记非空判断的代码报错，vconsole的控制台打印不出来。还有就是network模块的报文信息比较少，只有相应结果，但是接口的完整url和请求响应的报文头都没有。
github地址为：vConsole
引入方式如下：
npm install vconsole引入：
<script src="path/to/vconsole.min.js"></script> <script> // init vConsole var vConsole = new VConsole(); console.log('Hello world'); </script>
2. Eruda
eruda这个工具是我们项目最近引入，替换vconsole工具的，对比vconsole工具eruda工具的功能是基本对其chrome浏览器调试工具来的。
- console控制台代码报错功能捕捉更强，而且可以执行js代码；
- network功能比较完善，接口请求到的报文完整；
- sourcce可以查看源码；
4.element模块可以看到基本的html元素，和样式盒子布局和大小；- 可以手动清除缓存；
- 不过，Eruda的包大小比较大；
github地址为：eruda
npm install eruda --save引入方式：
<script src="node_modules/eruda/eruda.js"></script> <script>eruda.init();</script>在使用这个方式时候发现npm的引入方式，在本地调试无异常，但部署到测试环境无效，最后jekins编译检测报错发现，jekins报错指出缺少支持eruda的一个js文件，最后没采用npm的方式；
2. CDN方式
<script src="//cdn.jsdelivr.net/npm/eruda"></script> <script>eruda.init();</script>- js引入方式：
直接在项目入口引入eruda的js文件
<script> (function () {
var src = '/src/eruda'; //指向eruda,js的目录地址 if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return; document.write('
+
'ipt src="'
+ src
+
'">
+ 'ipt>'); document.write('
+
'ipt>eruda.init();
+ 'ipt>'); })(); </script> 
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/209269.html原文链接：https://javaforall.net
