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、墙或vpn），因为需要自动下载手机的驱动。
4.可以了,在Devices列表中可以看到连接的手机。手机上打开要调试的页面，在Chrome中点击相应页面链接，即打开调试器。

image.png

调试中的效果

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