移动端H5调试

Chrome Remote Debug

参考： https://developers.google.com/chrome-developer-tools/docs/remote-debugging

PC准备：

1、安装chrome

2、chrome 打开 Remote devices，勾选 Discover USB devices

（1）地址方式打开：地址栏输入 chrome://inspect/#deviceswebview

（2）DevTool入口打开：打开DevTool -》右上角点点点 -》 More tools -》Remote devices

3、连外网

Android准备：

1、设置 -》开发者选项 -》打开USB调试

2、安装驱动

（1）手动安装： https://developer.android.com/studio/run/oem-usb.html

（2）自动安装： PC上安装360手机助手，USB连接手机，即会启动自动安装

3、待调APP设置webview

WebView.setWebContentsDebuggingEnabled(true);

调试：

1、手机USB连接PC

2、手机上访问浏览器 或 webview

3、在 Remote devices 里 找到手机浏览器或webview访问的地址，点击inspect ，即可打开调试工具进行调试

Weinre

Weinre(WebInspector Remote) web远程检查器

1、安装命令行工具：npm -g install weinre

2、启动Debug Server（Agent）：weinre --boundHost 本地IP

3、用浏览器访问服务说明：http://本地IP:8080/

4、植入Debug Target脚本：复制服务说明上”Target Script“ 下的<script>到项目代码里

5、在其他浏览器（例如手机浏览器）访问项目

6、访问Debug Client: 访问服务说明上“Access Points” 下的 “debug client user interface” 链接

7、选择Target：在 Debug Client 上 Remote -> Targets 下，点击一个链接，即选择了一个Target。（有多处同时访问项目就会有多个Target）

8、调试

vconsole

npm install vconsole

require('vconsole');

let vconsole = console;

vconsole.info(3);