PC/移动端页面调试神器

插件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等项目中,在跨终端进行调试。


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值