Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Debug Android WebViews in React Native

I need to inspect the content and network requests of a webview I have running inside my app. With iOS I can open the simulator, open Safari, and am then able to inspect the webview as I would any other website.

I am having trouble with Android. I have gone to chrome://inspect, and am able to inspect Chrome on the connected device, however I am unable to inspect a webview.

I have tried moving webView.setWebContentsDebuggingEnabled(true); inside ReactWebViewManager.java into the onPageStarted method so that it's always enabled, but this has had no effect.

Thanks

like image 660
JmJ Avatar asked Jun 07 '17 14:06

JmJ


People also ask

Does react native use WebViews?

React Native uses a JavaScript runtime, but the UI is not HTML and it doesn't use a WebView. You use JSX and React Native specific components to define the UI. It provides a native-level performance and look and feel but some UI parts have to be configured separately for iOS and Android.

How do you debug react native mobile app?

Select Tools → Developer Tools from the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts ( ⌘⌥I on macOS, Ctrl Shift I on Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.

How do I enable WebView debugging in my native Android app?

Android WebView debugging must be turned on within your app. To turn on Android WebView debugging, run the setWebContentsDebuggingEnabled static method on the WebView class. The setting applies to all of the Android WebViews of the app.


1 Answers

OK so we have this working now.

What we did in our app was that we call WebView.setWebContentsDebuggingEnabled(true); inside the onCreate method of our MainActivity.java (found at android/app/src/main/java/com/[appname]).

I'm not sure it has an onCreate method out of the box so you may have to add one or try it elsewhere - we must have read the same article as I had previously done as you had and moved the call into the onPageStarted method of ReactWebViewManager.java but that didn't work for me either.

setWebContentsDebuggingEnabled is a static method of android.webkit.WebView so just make sure you have that import.

Hope this helps you.

like image 96
urbananimal Avatar answered Oct 22 '22 04:10

urbananimal