PC/移动端页面调试神器

插件1、vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。

特性：

安装使用：

执行npm install vconsole

// init vConsole

var vConsole = new VConsole();

console.log('Hello world');

</script>

插件2、AlloyLever:开发调试发布，错误监控上报，用户问题定位

安装使用：

执行npm install alloylever

项目index.html页面中配置

AlloyLever.config({

: "//a.qq.com" //错误上报地址

: 'qun' //错误上报msg前缀，一般用于标识业务类型

: 'msg' //错误上报msg前缀的key，用户上报系统接收存储msg

: //需要上报的其他信息

: 491862102

:"#entry" //请点击这个DOM元素6次召唤vConsole。//你可以通过AlloyLever.entry('#entry2')设置多个机关入口召唤神龙

})

AlloyLever会监听window.onerror并把错误信息保存下来，并且上报到reportUrl，你也可以召唤到vConsole并显示出来错误和相关日志。或者使用这个CDN也可以://pub.idqqimg.com/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js

其他使用：拼接url唤起调试工具

//加载并显示log面板

//加载但不显示log面板

//不加载vConsole脚本

以上两款工具均为腾讯出品，此博客是个人学习、记录下的使用心得。两个调试工具都是调试，个人偏向使用前者，引用方便，调试方便，主要运用在移动端，能够查看Network、Application等内容。

上述插件，运用范围广，不光只提供前端调试，可以接入ionic、微信小程序、Electron等项目中，在跨终端进行调试。

标签