react-native-webviewをデバッグをする方法 - 今際の国のえんじにあ。

こんばんは、やましょです。

今回はReact NativeでWebViewアプリの開発をする時のデバッグ方法をご紹介いたします。

環境

react native（0.64.2）
react-native-webview（11.6.5）

https://github.com/react-native-webview/react-native-webview

iOS

Safariを使用して、デバッグをします。

1. Safariで開発メニューを閲覧できるようにする

環境設定 > 詳細 > メニューバーに”開発”メニューを表示にチェックを入れます。

2. アプリケーションを起動

yarn run ios

3.開発メニューから端末・画面を選択

選択すると閲覧できるようになります。

Android

Google Chromeを使用して、デバッグをします。

1.MainApplication.javaを修正

MainApplication.javaに下記を追記します。

  import android.webkit.WebView;

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

2. アプリケーションを起動

yarn run android

3. ChromeでDevToolsのDevicesを開く

chrome://inspect/#devicesにアクセスするとこのようなページが確認できます。

4. 閲覧したいデバイスのinspectリンクを押下

リンクを押すと、ソースコードを確認できるようになります。

最後に

この方法で、実際の端末上のソースコードもデバッグできるようになります！

あれ？動かないなぁ、という時にはデバッグしてみてください！

参考

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md