Deep Diving React Native Debugging

tl;dr

  • A NodeJS server, called Packager, is started up in a terminal.
  • Google Chrome opens up and loads your React Native JavaScript from Packager as a normal <script> tag. Note that the React Native application now sits in the browser with full debugging support.
  • The device communicates with the application running in the browser via WebSockets proxied through Packager. JSON commands are set back and forth between the device and the browser, with the browser instructing the device as to what it should do.

The Deep Dive

The various actors in a typical React Native application

So Tell Me… What are the Steps to Make Debugging Happen?

Step 1: Start Packager

Typical terminal output for Packager in GREEEEEN!

Step 2: Run React Native App in Simulator

The default React Native application running on an iPhone 5S (iOS 9.0) simulator

Step 3: Turn on Debugging Mode

React Native’s on-screen Developer menu

Step 4: Debugger-ui.html and Device establish a connection

Step 5: Execute Application Script

Step 6: Run

Conclusion

Appendix A: ApplicationScript Injections

--

--

--

Fullstack Mobile & Web Engineer.

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

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
Shaheen Ghiassy

Shaheen Ghiassy

Fullstack Mobile & Web Engineer.

More from Medium

Linting & Formatting in React and React Native

React & TypeScript: TS2345: Argument of type ‘null’ is not assignable to parameter of type…

useEffect vs. useLayoutEffect in plain language

Getting Started with React Navigation v6 and TypeScript in React Native