Open youngwind opened 8 years ago
以前大多写PC端的页面,移动端的写得比较少。在调试移动端页面的时候往往结合采取以下三种方法:
但是这种做法有以下的弊端:
所以,必须找到一种使用chrome控制台直接调试真机上网页的方法,那就是“chrome:inspect”
1、通过USB线连接安卓机和电脑(手机上设置允许通过USB调试) 2、chrome浏览器访问chrome://inspect(如果你手机上没有打开任何网页的话,这里的列表会显示空) 3、手机浏览器打开任意一个网页(比如百度,你就会发现网页出现在上面的列表中,如下图) 4、点击inspect就可以调试对应的网页
现在我们来看看如何用这种方法调试安卓app里面的webview。我写了一个简单的安卓app,仓库在这儿。app下载地址在这儿,你也可以直接用手机扫描下面的二维码。
下载安装了这个app之后,点击首页最后一个按钮,"打开webview“按钮,那么就会新开一个activity,然后在里面的webview打开百度的首页,这个时候访问 chrome://inspect 就可以调试该网页了。
要注意这么一个地方:安卓app里面必须添加相应的代码:
// 添加了chrome:inspect bebug功能 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { if (0 != (getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE)) { WebView.setWebContentsDebuggingEnabled(true); } }
遗留问题:
应用闪退哦
可以通过ip+port方式远程调试web app。也是需要usb连接的
问题由来
以前大多写PC端的页面,移动端的写得比较少。在调试移动端页面的时候往往结合采取以下三种方法:
但是这种做法有以下的弊端:
所以,必须找到一种使用chrome控制台直接调试真机上网页的方法,那就是“chrome:inspect”
demo演示
1、通过USB线连接安卓机和电脑(手机上设置允许通过USB调试) 2、chrome浏览器访问chrome://inspect(如果你手机上没有打开任何网页的话,这里的列表会显示空) 3、手机浏览器打开任意一个网页(比如百度,你就会发现网页出现在上面的列表中,如下图) 4、点击inspect就可以调试对应的网页
进阶:调试webview
现在我们来看看如何用这种方法调试安卓app里面的webview。我写了一个简单的安卓app,仓库在这儿。app下载地址在这儿,你也可以直接用手机扫描下面的二维码。
下载安装了这个app之后,点击首页最后一个按钮,"打开webview“按钮,那么就会新开一个activity,然后在里面的webview打开百度的首页,这个时候访问 chrome://inspect 就可以调试该网页了。
要注意这么一个地方:安卓app里面必须添加相应的代码:
参考资料
遗留问题: