chrome浏览器虽然能够模拟移动端H5效果，但是真实使用效果还是要在手机上看。Android设备和IOS设备调试方式有比较大的区别，而且二者自带的webview对css样式渲染效果有些差异。
先来讲讲Android设备的真机调试方法：
（1）Android设备
http://blog.csdn.net/robert_cysy/article/details/69308751
最好使用最新的chrome canary，支持会更好，而且第一次使用需要翻墙，因为它需要上google服务器下载一些配置文件，当然也可以去淘宝买某些博主出的离线包，不过建议还是翻墙（花点钱买vpn，不仅解决这个问题，还能看看国外的世界，美滋滋）。如果打开调试，界面一片空白，那说明你需要翻墙重新加载一下。调试效果相当好~丝般顺滑
PS 前提是对应的APP要开启webview debug，否则chrome识别不到
（2）IOS设备
方案一：
https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter
如果你使用的是windows电脑，那恭喜你，这个方案的调试效果不是很好，勉强能用。
需要安装npm（顺便下载下node.js），ios-webkit- debug-proxy-win32 （可能需要下载，我就没下载），最新的iTunes。
npm安装remotedebug-ios-webkit-adapter到node_global文件夹中，然后在node_global文件夹中进入cmd，运行remotedebug-ios-webkit-adapter。
这个adapter不断发送信号给连接的IOS设备，然后远程调试该设备。
接着，打开chrome canary，地址栏输入chrome://inspect/#devices，接下来的方法跟上面调试Android设备方法一样。
方案二：
如果你使用的是苹果电脑，而且是新版本系统，新版本safari，新版本xcode，恭喜你，IOS设备调试对你来说就是小case。
xcode编译APP，然后安装到IOS设备中，接着打开APP中的Webview，在safari的“开发”选项中就可以看到该H5名字，点进去就是调试页面了，调试效果相当顺滑~相当美观~
有苹果电脑真幸福~
网友评论