移动端调试

538 阅读2分钟

1 Charles

Charles 是一款强大的抓包工具,可以截取包括 https 在内的各种网络请求并方便的查看具体信息。

有 Mac、Windows 和 Linux多版本,通过配置 WIFI 代理,也可以拦截手机发出的请求。

但是,也主要是用来查看各种网络请求是否异常,无法定位 js 的错误。

具体详情请点击此处

2 Mac + IOS + Safari

(1)打开苹果手机:设置 > Safari浏览器 > 高级 > Web检查器

(2)打开 Mac 上的 Safari浏览器 > 偏好设置

打开偏好设置,依次点击 高级 > 在菜单栏中显示“开发”菜单

(3)用数据线连接你的 Mac 电脑和苹果手机,并选择信任设备。然后在手机的 Safari浏览器 中打开你需要调试的页面。

(4)打开电脑的Safari浏览器 > 开发 > 选择手机上打开的网址。

(5)打开页面之后,可以看到一个类似网页的控制台,至此,就可以愉快的调试了。

3 Chrome浏览器 + Android

以华为荣耀9机型为例:

(1)打开 Android 手机: 设置 > 系统 > 开发者人员选项 > USB调试。打开 USB调试。(ps:不同手机的开发者选项不一,找不到的,请自行谷歌)。

(2)通过数据线连接你的电脑和 Android 手机,会弹出如下界面,点击确定。(PS:USB调试选项必须选文件,而不是仅充电)。

(3)用手机浏览器打开想要调试的页面 > 在电脑中打开 Chrome 浏览器,并输入 chrome://inspect ,可以看到连接的设备 > 选择要调试的网页,点击 inspect。

点击打开,可见如下界面,跟Chrome网页调试几乎一致,至此就可以愉快的调试~