こんばんは、やましょです。
今回は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