Debugging React Native application WebView

Imdad Hussain
Jul 15, 2021
Debugging

It’s possible to debug WebView contents in the iOS simulator or on a device using Safari Developer Toolkit.
Steps:
1) Open Safari browser Preferences

  • “Advanced” tab
  • enable checkbox “Show Develop menu in menu bar”

2) Start app with React Native WebView in iOS simulator or iOS device

  • Go to Safari Again Develop
  • [device name]
  • [app name]
  • [url — title]3)

3) When debugging on device you must enable Web Inspector in your mobile device settings:

  • Settings
  • Safari
  • Advanced
  • Web InspectorYou can now debug the WebView contents just as you would on the web.

That’s It. Now all your webpage console log will reflect to your safari browser when you will visit with WebView.

Thank you for reading. :)

--

--

Imdad Hussain

Mobile Engineer @ Nova, React | React Native|Redux, JavaScript | TypeScript mostly Frontend | more at https://hussainimdad.web.app/