1 Android + chrome
手机端安装Chrome浏览器,使用USB连接到PC,同时打开手机的USB调试模式。
然后在PC端打开chrome浏览器,地址栏中输入: chrome://inspect
,选中"Discover USB devices"选项,打开页面进行调试。
注意:
- 部分安卓手机开发者模式的打开方式比较隐蔽:设置 > 关于手机 > 内部版本号,连续点击七次,退回上一级菜单,才能看到"开发者模式"
- 安卓手机还可以打开微信App的webview的debug模式,只需要在微信里访问
http://debugx5.qq.***
,在打开的页面里将调试模式打开并重启微信即可,然后打开chrome://inspect
、翻墙、连接手机就可以调试了
2 iOS + Safari
iPhone和Mac自带Safari浏览器,但同样要使用USB连接到PC,然后分别对Mac和iPhone进行如下设置:
- Mac浏览器设置:Safari -> 偏好设置 -> 高级 -> 勾选"在菜单栏中显示开发"
- iPhone 设置:设置 -> Safari -> 高级 -> 打开 Web 检查器
通过手机的 Safari
来打开 H5
页面,然后将Mac上的Safari浏览器打开,选择开发 -> iPhone,就出现调试界面了,在iPhone上也能断点调试js了。
注意:
Mac上可以使用Simulator模拟器(需要先安装Xcode),可以模拟调试多个版本iPhone手机,还可以配合Safari来调试页面,此模拟器的完成度几乎可以替代真机。