react-native webView网页调试之setWebContentsDebuggingEnabled使用

Android使用方法

首先，我们需要在应用程序中调用WebView.setWebContentsDebuggingEnabled(true);
文件位置：在MainActivity.java的onCreate方法内（在android / app / src / main / java / com / [appname]处找到）。

  import android.webkit.WebView;

  @Override
  public void onCreate() {
    super.onCreate();
	  ...
    WebView.setWebContentsDebuggingEnabled(true);
  }

作用：

• 允许调试加载到此应用程序的任何WebView中的Web内容（HTML / CSS / JavaScript）。
• 可以启用此标志，以便于调试在WebViews中运行的Web布局和JavaScript代码。

效果：

• 调试站点的页面
• 调试安卓原生App中的WebView
• 实时将安卓设备的屏幕图像同步显示到开发机器。
• 通过端口转发（port forwarding）与虚拟主机映射（virtual host mapping）实现安卓移动设备与开发服务器进行交互调试。

调试要求

启动模拟器或者连接到真机USB。
在chrome浏览器打开 chrome://inspect/#devices
确保打钩选中Discover USB devices
之后可以看到页面，如图：
（可能比较慢，稍等一会就可以看到已经连接的设备）

点击 “Inspect” 会弹出和设备相同的界面，此时上图就是需要调试的webview的页面。
在这里，就像是浏览器的开发者模式一样了，唯一的区别就是可以跟手机一起联动，点手机里面的网页按钮，在浏览器上的页面一样变动，点浏览器上的按钮，手机页面也跟着变动。