移动端调试工具vconsole与Eruda

• • 1.vconsole
  • 2. 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 vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>
           

2. Eruda

eruda这个工具是我们项目最近引入，替换vconsole工具的，对比vconsole工具eruda工具的功能是基本对其chrome浏览器调试工具来的。

1. console控制台代码报错功能捕捉更强，而且可以执行js代码；
2. network功能比较完善，接口请求到的报文完整；

3. sourcce可以查看源码；

   4.element模块可以看到基本的html元素，和样式盒子布局和大小；

4. 可以手动清除缓存；
5. 不过，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="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
           

1. 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>