如何使用 Chrome 调试手机 React Native 的 WebView 网页

Android 上的 RN WebView 调试

首先你需要修改 MainApplication.Java 文件以启用调试功能

            import android.webkit.WebView;

            @Override
            public void onCreate() {
                super.onCreate();
                ...
                WebView.setWebContentsDebuggingEnabled(true);//启用调试
            }
        

此时你再重启 APP，手机连上 USB 后，就可以通过谷歌浏览器的 chrome://inspect/#devices 对 RN 的 WebView 进行调试了

注意：你的手机需要开启 USB 调试功能

iOS 上的 RN WebView 调试

iOS 设备可以直接使用 Mac 上的 Safari 浏览器进行调试，步骤如下：

1、首先启用 Mac 电脑上 Safari 的开发菜单：Safari 浏览器 -> 偏好设置 -> 高级 -> 在菜单栏中显示开发菜单，将它勾选上

2、然后在 iOS 手机上找到：系统设置 -> Safari -> 高级设置 -> Web 检查器，将它打开

此时，你就可以通过 USB 连接手机对 RN 的 WebView 进行调试了

注意：如果你在开发菜单中没有找到你的设备，你可以尝试重启一下 Mac 上的 Safari