Debugging React Native application WebView

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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Webpack with CSS Modules

JavaScript Promises: Zero To Hero Plus Cheat Sheet

React : Create your own useful custom hook.

Multiple Ways To Create Loops In JavaScript

Four Important Lessons I Learned When I Worked on a Large Web Development Project

Breaking down Restful Routes

All That We Share. via /r/videos https://t.co/HBIg1UIXHn

Easy File Upload in NodeJS Express Using Multer

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

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

More from Medium

Creating native modules using Java/Swift for React Native projects.

Integrating Google maps with React native

What is React Native?

Building multi-platform React (web) and React Native (mobile) app in WSL2