Android webView开发必备调试方法(react-native)

前言

• 原生Android，react-native android开发都适用
• 需要有代理

环境配置

• chrome浏览器安装 adb插件

  
  
  image.png
  
  
  image.png

• 把你的安卓手机连接电脑，打开调试模式

• chrome浏览器地址栏输入 chrome://inspect

• 如果已连接手机可以看到你的手机显示在上面

  
  
  image.png

App准备

1 打开下图框内的文件，添加代码启用webView调试（原生安卓在MainActivity）

image.png

import android.os.Build;
import android.webkit.WebView;

//在onCreate方法中添加
public void onCreate() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        WebView.setWebContentsDebuggingEnabled(true);
    }
}

2 在App内通过webView打开网页链接，可以在chrome看到该记录，点击inspect打开调试界面（webVIew窗口保持活动状态！）

image.png

3 这时你可能会遇到白屏问题，因为chrome webview插件无法加载白屏，因为chrome需要到https://chrome-devtools-frontend.appspot.com下载调试支持工具(版本太多)，但是因为国内被墙，所以很多人打开界面会是白屏的（所以一般情况是需要代理的），通过代理能访问此网站的话一般能够正常打开调试界面了。

4.可能有极少人还白屏，可能是存在以下问题

• 手机chrome内核高于你的电脑浏览器版本 （升级电脑浏览器解决）

• 该版本资源不存在等问题下载不下来 （换台手机调试，安卓版本高一点较好，魅族8.1安卓换到了红米9.0安卓就好了）

5 最后成功打开调试工具，你就能快乐的像PC开发网页一样的调试了~

image.png