移动端真机调试

1、谷歌浏览器或者Edge浏览器 + Android

首先在chrome安装ADB Plugin

chrome中输入 chrome://inspect

通过数据线连接你的电脑和 Android 手机，打开USB的调试模式

就可以在上面的页面中看到自己的设备：

Image text

点击inspect

然后就可以欢乐地调试了，和使用谷歌调试pc端一样，可惜ios不适用推荐指数4颗星

备注：如果手机连接成功，但一直没有inspect内容出现，可以在浏览器输入： chrome://inspect/#devices

2、vConsole、eruda等调试库

这个方法需要在页面中插入一段 JS 脚本，这里以vConsole为例，导入vconsole.min.js，并实例化，注实例化代码最好放在头部，以便能一开始就能劫持内容：

  <script src="./vconsole.min.js"></script>
  <script>
    // 初始化
    new VConsole();
  </script>

或

npm i vconsole

import VConsole from 'vconsole';

new VConsole();

Image text

优点：方便，可查看console、network、elements等；

缺点：css调试不友好，console会劫持consloe的打印，不能定位到打印的代码位置，需要额外加载js脚本

推荐指数3颗星

3、whistle

安卓、ios都能调试，跨平台、代理抓包、H5调试、debugger、请求劫持、HTTPS支持、WebSocket数据捕获等，功能非常强大。weinre是用node编写的，使用npm来进行安装

npm install -g whistle

w2 start

Image text

跨平台、抓包、 DOM、Console、Network 等，功能非常强大。

推荐指数5颗星

4、Mobile Debug

功能和whistle非常相似

需要把手机在同一个局域网wifi设置代理，便可使用，https需要增加安装证书步骤。

推荐指数5颗星

移动端真机调试 ​