背景
有时候会遇到一些H5或者Cordova项目在开发环境（开发都用本地浏览器模拟）运行正常，但是到了手机上运行就运行异常，手机浏览器没有F12等开发者工具，因此要查看在真机上运行时的错误只能通过一些其他方式来查看。
目前Cordova或者H5项目都支持在浏览器开发者工具查看。
Android页面调试
Android手机可以连接电脑并配合Chrome来调试web页面。
手机端配置
首先开发者模式，一般都是在设置中找到版本号，连续点7-10下就打开了开发者模式。
开启【开发者选项】，开启【USB调试】模式：
电脑端配置
首先是需要有Chrome浏览器，然后将手机连接到电脑，然后浏览器地址栏输入：
chrome://inspect可以进入页面，如果有手机或者模拟器开着相关Cordova APP或者H5，可以看到如下界面，我这里是开了一个模拟器+一个手机端。
然后点击inspect就可以进入调试页面，看起来和一般的chrome开发者工具调试比较像，不过预览图不能点击：
然后就可以实际操作调试了。
inspect连接失败
可能有不少人使用inspect的时候是404，这是因为这个inspect需要访问google网站，到国外网站转一圈。
解决方法：
- 有梯子出国的可以考虑通过
VPN访问。 - 如果没有
VPN可以考虑下载一个低版本的Chrome，绿色版都可以，低版本Chrome可以inspect fallback后访问。
低版本浏览器显示如下（低于括号中的版本的浏览器才能看到inspect fallback）：
iOS页面调试
在iOS手机上，需要苹果电脑的Safari来调试
手机端配置
进入iOS手机设置，找到【Safari浏览器】，然后拉到最后找到【高级】，开启【网页检查器】开关：
开启之后把手机用数据线连接到苹果Mac电脑上。
Mac配置
打开Safari浏览器，如果没有【开发】菜单，需要把【开发】菜单配置出来：
Safari浏览器->偏好设置->高级->【在菜单栏中显示“开发”菜单】
有了【开发】菜单之后，连接手机到电脑，手机上启动了Safari浏览器并浏览需要调试的网页的话，可以看到手机已经显示在菜单中了。
点击之后可以看到类似开发者工具的界面，不过Safari和Android的Chrome调试不一样，看不到预览图。
Cordova调试
实际使用测试发现，如果是Cordova APP的话，只有通过xcode调试安装到手机上的APP才能显示出来（模拟器运行也可以），正式版本或者TestFlight版本似乎都在开发菜单中看不到，也就不能做网页调试。
