Debugging React Native application WebView

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. :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Imdad Hussain

Imdad Hussain

24 Followers

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