插件1、vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。
特性:
查看 console 日志
查看网络请求
查看页面 element 结构
查看 Cookies 和 localStorage
手动执行 JS 命令行
自定义插件
安装使用:
执行npm install vconsole
<script src="path/to/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>
插件2、AlloyLever:开发调试发布,错误监控上报,用户问题定位
安装使用:
执行npm install alloylever
项目index.html页面中配置
AlloyLever.config({
cdn:'//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js', //vconsole的CDN地址
reportUrl: "//a.qq.com", //错误上报地址
reportPrefix: 'qun', //错误上报msg前缀,一般用于标识业务类型
reportKey: 'msg', //错误上报msg前缀的key,用户上报系统接收存储msg
otherReport: { //需要上报的其他信息
uin: 491862102
},
entry:"#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等项目中,在跨终端进行调试。