Android的原生APP如何调试嵌入的H5页面

前言

现在原生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、墙或),因为需要自动下载手机的驱动。
4.可以了,在Devices列表中可以看到连接的手机。手机上打开要调试的页面,在Chrome中点击相应页面链接,即打开调试器。
Android的原生APP如何调试嵌入的H5页面_第1张图片

调试中的效果

调试中跟Chrome中调试web页面类似
Android的原生APP如何调试嵌入的H5页面_第2张图片

调试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界面

你可能感兴趣的:(安卓开发技术)