安卓APP webview 调试线上 H5起因:线上H5出现一个测试环境以及联调环境都没出现过的样式问题,起初想使用vc

起因:线上H5出现一个测试环境以及联调环境都没出现过的样式问题,起初想使用vconsole去调试,但是vconsole调试Element文件无法查看属性,仅能看到DOM树,此文记录一下如何直接使用chrome 控制台调试安卓app webview H5

1.安卓手机开启USB调试

确保你的机子处于开发者模式，并允许USB调试。关于如何打开开发者模式，每个机型都不一样，所以具体型号查百度就可以了。
用USB将你的机子和电脑连在一起，这时会弹出USB进行充电、文件传输等几个选项。选择文件传输。

2.安卓包

1.要让 H5 能调用我们的方法，需要注入 JS。

addJavascriptInterface(mJavascriptInterface, "Bridge");
public class JavascriptInterface {
    @android.webkit.JavascriptInterface
    public void jumpActivity(String uri) {
    	// h5 调用客户端方法
    }
}

2.要开启调试模式，必须打开 WebView Debug 开关；

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);
}

找安卓同学要一个设置完成后的包,安装到手机上

3.chrome 调试

1.打开chrome,地址栏输入: chrome://inspect

2.连接打开usb调试的手机,打开安卓设置完成webview debug 开关的app包,并打开需要调试的H5页面

3.点击 inspect

此时就可以愉快的调试线上页面了,操作跟平时调试pc页面一模一样,修改css对应效果也会及时反馈到手机上.