当前位置: 移动技术网 > IT编程>移动开发>Android > 混合开发使用Chrome Inspect调试WebView预览手机界面和定位元素

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

2018年05月19日  | 移动技术网IT编程  | 我要评论

社会主义初级阶段的基本矛盾,eee755,音速启动皮肤

使用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元素时,手机上相应的元素会高亮显示,定位元素也很快。

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网