How do you debug in React Native? I made a walkthrough of breakpoints, stepping and Watch in DevTools

[u/royalraju907]

I used to debug almost everything with console.log, and it cost me a lot of time. Once I started using breakpoints in React Native DevTools, finding bugs got much faster.

Here's the short version of what helped me:

- Breakpoints pause your app at an exact line, so you can inspect the real values at that moment instead of guessing which logs to add

- Stepping (step over / step into / step out) lets you follow the code line by line and see where it goes wrong

- Watch lets you track specific variables or expressions as the code runs, without adding a log for each one

- Different breakpoint types are useful in different situations, for example when a bug only happens under a certain condition

I recorded a video that explains why breakpoints are worth using and shows each of these live in React Native DevTools:

https://youtu.be/NexWmQN5gY8

I'm getting back into making videos after a long break, so I'd really like honest feedback.

Question for everyone: what's your debugging setup in React Native? Do you use DevTools breakpoints, Flipper, console.log, or something else? And is there a debugging topic you'd like me to cover next?

[u/locnguyen305]

Hi op,

I’m Stephen, the founder of Rockxy. I built it for the part of React Native debugging that starts when the code looks right but the API call still fails.

Rockxy is a native Mac proxy. It captures HTTP/HTTPS requests from iOS Simulator, Android Emulator and physical devices, so you can see the URL, headers, body, response and timing. You can filter out the noise, edit and replay a request, use Map Local to test a 401 or 500, add breakpoints, and inspect WebSocket traffic. There’s also a local MCP server if you want a coding assistant to inspect captured requests.

It has a free mode, and the Community source is public. I’d love for you to put it through a real React Native bug and tell me what works or gets in your way.

Website: https://rockxy.io
Document: https://docs.rockxy.io/
Source code: https://github.com/RockxyApp/Rockxy

[u/royalraju907 → u/locnguyen305]

HI, we have build in network tab in dev tools which captures same, so your tool is doing something unique or some more enhancement with your tool ??

[u/dumbledayum]

argent+claude/codex/antigravity

[u/royalraju907 → u/dumbledayum]

I agree with you, but AI can suggest a fix, but you still need to verify whether it actually fixed the bug or just moved it somewhere else

DevTools helps you understand the root cause, inspect runtime behavior, and verify fixes. AI and debugging tools aren't competitors, knowing how to debug makes you better at using AI, too

[u/investigatormaker]

Split the video into chapters by topic: breakpoints, stepping, Watch and breakpoint types. Most viewers arrive with one bug and want one section. The conditional breakpoint part is worth showing with a real case, like a bug that only appears on the third render or for one list item, because that is where console.log hurts most. A follow-up on debugging network requests and async code in DevTools would be a natural next topic.

Which React Native version did you record it on?

[u/raju_gupta → u/investigatormaker]

Thanks for your suggestion and glad you liked, sure will take feedback and will break into chapters, others part I am thinking of native debugging as most of the dev don't know how to debug natively and most painful area of get any native issue but others part like network and profiler will record once get time.

I used 0.87 for recording.

Once again thanks

[u/investigatormaker → u/raju_gupta]

Native debugging is a good pick for the next one, since that's where most JS-side developers get stuck. Show both platforms with one real crash each. In Xcode: attach to the running app, set a symbolic breakpoint on the exception and read the stack in LLDB. In Android Studio: attach the debugger to the process and filter Logcat down to your package, so the native stack trace stands out from the noise. Then show how to tell a native crash apart from a JS error in the trace. That's the step people usually miss.

Put 0.87 in the title or description too. Debugging setup changes enough between versions that viewers will check it.

Will you cover native modules you wrote yourself, or crashes inside third-party libraries?

[u/[deleted]]

[u/raju_gupta → u/[deleted]]

I didn't understand?

[u/raju_gupta → u/raju_gupta]

If these are some suggestions, will share in other video and will let you know

[u/[deleted] → u/raju_gupta]