混合开发使用Chrome Inspect调试WebView预览手机界面和定位元素

使用Chrome Inspect调试混合应用可以帮助我们排查问题。例如定位元素，快速修改CSS样式并实时查看效果。其实微信开发也是一种混合开发模式，微信可以看做一个原生的Android App搭配了一个JS运行环境（WebView），然后大家就可以愉快地使用Web前端技术（Html/Css/Js）开发微信网页、小程序了。

Google提供的调试Android上WebView的步骤：

1. 开启手机上的USB调试功能
2. 打开Chrome浏览器，地址栏输入：Chrome://inspect，回车
3. Chrome会自动检测手机上打开的App，并列出可调试的WebView页面
4. 点击Inspect。出现空白页面的话，查看此处解决方法。

预览方法：

chrome版本号30左右的没有预览界面，其他版本的见下图

点击箭头或放大镜图标，然后在界面上点一下想要定位的元素即可！

确实没法预览？

先试试这里的方法

还可以这样：关闭预览，手机经过Html元素时，手机上相应的元素会高亮显示，定位元素也很快。