移动端调试工具

移动端调试工具

• vConsole
• whistle

1. vConsole:
   • 描述：vconsole 使用简单，本地开发，真机调试Bug还是非常好用的，局限性：生产上不方便调试bug；
   • 安装：npm i vconsole
   • 用法：var vConsole = new VConsole();
2. whistle:
   • 描述：whistle 相对vconsole配置有点繁琐，优势：只要配置好规则，开发、生产环境都可调试Bug，还可线上替换本地文件进行线上调试，比起vconsole可是牛掰了；下面看下怎么使用它；
   • 安装：

     • npm install -g whistle 全局安装

     • Tips:其他的命令参考官网

           w2 --version 查看版本
           w2 start 启动（默认端口号8899）
           w2 stop  停止
           w2 restart 重启
       

     • 浏览器打开127.0.0.1:8899 进入whistle 配置页面

     • 真机调试：

       • 手机与电脑保持在同一wifi下 电脑如下配置：模拟抓手机端百度页面

         

       • 手机打开wifi代理连电脑的ip:8899,手机浏览器打开百度，电脑配置页打开_Weinre下的sign 可看到手机url 单击，打开element 可选中手机dom 进行调试

     • 插入vsconsole

       • 下载下来vconsole.js包，粘贴到values的vconsole中，编辑：初始化vconsole: new VConsole();在rules中插入: js://{vconsole},即可：

         

     • 其他： 后续有时间在更新吧。。如若看到本文。不喜勿喷，当笔记记录一下而已