移动端调试攻略

方法一:

简易度: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时 移动设备上也有相应的反馈

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180817G0ZIJE00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券