在电脑上调试手机上的webview

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

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

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

2. 后期测试阶段，使用inspect工具。查看页面再具体手机上的显示效果。

1. 手机通过连上电脑，并打开usb调试（Android如此，Iphone可以使用Safari自带的工具）。
2. 浏览器中输入：chrome://inspect 调出inspect页面。
   如果没有出现这个页面，则有可能没有过。只需要一次，以后就不需要了。
3. 如上图所示，工具会列出手机上所有打开的webview界面。点击具体页面下的inspect按钮，会打开Developer tools工具。如图所示：
   图中，我选中了类为entry-content的div元素，此时手机上的效果如下：
4. 接下来，就可以在具体手机上查看页面效果了。在developer tools上改动dom的效果也会直接反应到手机上。
5. PS:如果要使用此功能，你的app里的WebView必须开启了contentdebug功能。

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WebView.setWebContentsDebuggingEnabled(true);
        }

1. 参考资源：remote debug