Android 与 IOS H5页面调试

前言

大家知道Web页面调试时候可以用浏览器的自带开发者工具，可以很好的查看页面元素、样式和脚本信息。但是在手机客户端上的浏览器没有这些工具怎么办？
好办，我们同样用PC的Web浏览器开发者工具连线调试。

Android Web调试

1. 首先Android手机需要打开开发者模式，并允许USB调试。将手机与电脑相连（如何打开这里不教了，问问度娘，她知道）。
2. 打开Chrome浏览器，在地址栏输入 chrome://inspect , 此时手机上会收到授权，点击允许。
3. 最重要的来了，如果（可能没有如果）你的电脑无法访问 developers.google ，那么你需要先想办法连上一下（hosts、墙或vpn），因为需要自动下载手机的驱动。
4. 可以了,在Devices列表中可以看到连接的手机。手机上打开要调试的页面，在Chrome中点击相应页面链接，即打开调试器。

IOS Web调试

首先确认需要调试的App是使用开发证书打包的

1. IOS手机也需要打开开发者模式，所有iPhone都一样。到 设置/Safari/高级 打开“Web 检查器”。将手机与电脑相连。
2. 打开电脑的Safari，设置浏览器 高级 钩起 在菜单栏中显示“开发菜单”
3. 可以了，点击“开发”菜单，选择自己的设备名称，并选择要调试的页面。（小技巧：若多次打开同一个页面，菜单中将有多个相同的链接，只需要在鼠标悬停在页面链接上时，看看手机上的页面有没有被选中效果即可）iPhone的界面布局效果直接是在手机上展现。