admin 管理员组

文章数量: 1184232

以下操作基于Chrome浏览器。
步骤：
[TOC]

1. 在前期开发阶段，使用开发者工具，粗略查看页面在不同平台（Android、Iphone）、不同分辨率下的显示效果。

这个就不用多说了，web开发者都会用这个。

2. 后期测试阶段，使用inspect工具。查看页面再具体手机上的显示效果。
  1. 手机通过连上电脑，并打开usb调试（Android如此，Iphone可以使用Safari自带的工具）。
  2. 浏览器中输入：chrome://inspect 调出inspect页面。
  3. 如上图所示，工具会列出手机上所有打开的webview界面。点击具体页面下的inspect按钮，会打开Developer tools工具。如图所示：
  4. 接下来，就可以在具体手机上查看页面效果了。在developer tools上改动dom的效果也会直接反应到手机上。
  5. PS:如果要使用此功能，你的app里的WebView必须开启了contentdebug功能。 
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WebView.setWebContentsDebuggingEnabled(true);
        }
  1. 参考资源：

本文标签： 示效果 不局限于 工具

版权声明：本文标题：不局限于一端：手机Webview页面在电脑上的全貌观察技巧 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1770906700a3538917.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。