How to debug React Native WebView

Assuming that you have already started working with React Native and possibly began to check how to debug code in and out using the debug menu in devices.
Keeping aside the traditional code and bringing focus on the WebView component only. Recently, React Native Dev made some changes in the web view repo and replaced UIWebView with WKWebView in iOS 8.0.
Then the next change happened, if you are reading this, then you probably must know this, React Native removed WebView from its repository and made it a self-supported import. Now it exists in,

React Native Web View

Now, coming back to the main agenda of debugging HTML in iOS and Android devices.

...

For iOS
We need probably two things, an app running in any iOS device/iOS simulator with the app in debug state and Safari Developer Toolkit.

To enable "Develop" mode in Safari Browser:

• Open Safari Browser
• Under the Safari option, click on 'Preferences'
• Under the 'Advanced' tab, enable check "Show Develop menu in menu bar"

Steps for debugging:

• Run the React Native app with WebView in iOS device/ iOS simulator in debug mode
• Open Safari, from the menu bar, we need to click on 'Develop' option, 'Develop' > {Device Name} > {Application Name} > {Title}
• Now you can debug the HTML rendered within the WebView

...

For Android
We can debug the contents of the WebView in Chrome directly.

Steps for debugging:

• Firstly, we need to make some edits in the "MainApplication.java" file so that we can enable debugging, see below-attached image for importing

• Run the React Native app with WebView in Android device or Android emulator
• Open Chrome, and follow the links, DevTools > 3 dot menu > More tools > Remote devices
• Select the current device and then hit 'Inspect'
• Now you can debug the HTML content of the WebView

Note: USB debugging must be enabled in your device settings.

...

I was stuck at debugging the content for a while and then I referred this link. I hope it'll be a great help to you.

Happy Coding :)

Comments

[Jowel Tisso]

Thanks for this guide, I was looking for the exact clarity. Please keep up the good work.

[Hrishikesh Sharma]

@joweltisso Awesome! Sounds so good that it helped you.