chrome 调试web app方法

网上讲chrome调试web app的方法很多，我写下来只是为了记录一下，方式忘记。

调试要求：

● 开发环境安卓桌面版Chrome32+

● 一条USB数据线，连接电脑与移动设备，安装相应机型的USB驱动。驱动程序下载地址：http://developer.android.com/tools/extras/oem-usb.html

   如果电脑上安装有百度手机助手、360手机助手这类软件，一般连接后可以自动安装相应的USB驱动程序。

● 如果是调试网页，移动设备需要安装Chrome forAndroid ，且安卓系统须为Android 4.0+

● 对于APP WebView的调试，需要系统为Android 4.4+ 并且原生应用内的Webview须进行相应的调试声明配置。

说明：远程调试要求桌面版Chrome浏览器版本要高于安卓移动设备的Chrome版本号。有条件的最好使用Chrome 的金丝雀特别版Chrome Canary (Mac/Windows)或者Chrome桌面开发版Chrome Dev channel release (Linux)。

打开USB调试模式

直接在浏览器地址栏输入chrome://inspect 或者about:inspect

打开后DevTools后，确保打钩选中Discover USB devices

然后打开手机端chrome浏览器就会看到一些网址(如上图)，点击inspect就可以进行操作及调试。下图可以看到效果，可以手机操作浏览器实时看到页面效果进行调试。

在点击inspect链接后由于谷歌在国内不能使用，工具会访问appspot.com进行初始化，所以就会一直白屏，解决办法在另一篇文章内http://blog.youkuaiyun.com/ligengdipan/article/details/51050406

调试WebView的方式是一样的，不过webview好像只能浏览器中看到代码，不能在浏览器中显示界面。这样基本上满足了我在使用Hbuilder开发时调试的需要。