移动端调试攻略

方法一：

简易度：5星

实用度：3星

调试微信小程序或者微信浏览器中的H5页面

集成了Chrome DevTools。调试方法和Chrome类似。

方法二

简易度：4星

实用度：4星

使用vConsole

github https://github.com/Tencent/vConsole 下载源码或直接下载源码中dist目录下vconsole.min.js文件

将该文件放到项目index.html中,启动项目即可

启动项目后用手机打开页面

可以发现页面右下角有一个绿色的按钮 就是vConsole

点击按钮可以看到

页面的console打印， network接口请求参数、cookies、localstorage等信息。

方法三

简易度：3星半

实用度：4星半

使用vide

官网: https://www.debuggap.com/debug_webview.html

安装PC端调试工具: https://www.debuggap.com/installation.html

1.在项目index.js中导入debuggap.js文件(官网有提供下载) 启动项目

2.打开PC客户端，根据官网指示，安装插件 vide-plugin-debug-webview

preferences -> plugin management -> search, 输入包名 点击install

3.安装完成后 返回客户端主界面 点击如图所示小图标

点击connect 连接。

连接成功 进入移动设备列表 如下图所示。 若不成功，检查ip是否正确。端口号默认11111，无需修改

4.接着手机打开页面，可在页面中看到一个小蓝点按钮

点击小蓝点按钮，然后点击config

在config界面中输入 第三步在pc端连接的ip和端口号 点击connect

5.点击connect后，pc上的客户端 则会出现一个client信息(支持多个client）

点击该client，可以看到该有的信息都有了。elements network resources sources console等，基本能解决95%以上的移动端问题了。

在选择elements时 移动设备上也有相应的反馈