美文网首页
Android的原生APP如何调试嵌入的H5页面

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

作者: android_zyq | 来源:发表于2019-06-22 14:12 被阅读0次

    前言

    现在原生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界面

    相关文章

      网友评论

          本文标题:Android的原生APP如何调试嵌入的H5页面

          本文链接:https://www.haomeiwen.com/subject/ruamqctx.html