移动端调试工具vconsole与Eruda
1.vconsole2. Eruda随着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 vConsolevar 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
引入方式有如下三种:
1.npm 方式:
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="///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('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');})();</script>