前言
现在原生app中混合web页面这种方式用的场景越来越多,app的原生代码很容易使用android studio进行debug调试,web页面在Chrome浏览器中F12打开开发者工具,也非常方便调试web页面。但是嵌入在app中的web页面如何调试代码呢?
使用混合开发WebView调试必备神器DevTools。
使用DevTools进行调试
准备工作
1.设置Webview调试模式
可以在Activity的init进行如下设置,WebView类包含一个公共静态方法,可应用于项目中的所有WebView,同时不受Manifest文件中的debuggable属性影响。(Android版本应该在Android 4.4(KitKat)或更高版本上)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
2.首先Android手机需要打开开发者模式,并允许USB调试。将手机与电脑相连。
3.打开Chrome浏览器,在地址栏输入 chrome://inspect , 此时手机上会收到授权,点击允许.如果(可能没有如果)你的电脑无法访问 developers.google ,那么你需要先想办法连上一下(hosts、墙或vpn),因为需要自动下载手机的驱动。
4.可以了,在Devices列表中可以看到连接的手机。手机上打开要调试的页面,在Chrome中点击相应页面链接,即打开调试器。
调试中的效果
调试中跟Chrome中调试web页面类似
image.png
调试WebView白屏
1.原因:
由于无法访问 https://chrome-devtools-frontend.appspot.com,只能出现空白页面
2.尝试解决方案:
修改本地Host文件: 在C:\Windows\System32\drivers\etc\hosts文件中添加以下语句:
61.91.161.217 chrome-devtools-frontend.appspot.com
61.91.161.217 chrometophone.appspot.com
此方案不一定可以解决问题,必须要ping通 chrometophone.appspot.com才可以。
3.通过其他方式能够访问 chrometophone.appspot.com即可
然后刷新chrome://inspect界面
网友评论