VSCode Loves React Native // First Class Debugging Tools

Thanks to all the channel supporters, I can create a new full course for React Professionals looking to quickly level up to React Native.

-- React Native for Professionals --

🏷 #basarat #TypeScript #JavaScript #React #ReactNative #Tutorial

👇 ❤️ Subscribe for MOORE ❤️ 👇

🌹 Support 🌹

~

[marslogics]

I ❤ your lectures. Sharing is caring, and sharing knowledge is much more than that. Your lectures really help new comers who wanted to gain knowledge.

[ellayararwhyaych]

Yes, I have enabled "JS Dev Mode" on my emulator

My VsCode is able to correctly launch my simple RN 0.75.2 app but VsCode never fully connects to the running app on the emulator (IOW: No orange on VsCode's bottom status bar - it just keeps spinning). What can I do to debug the VsCode React Native Tools extension's debugger?
(And YES, the code is current and in the correct source subdirectory)
Launch.json configuration used:

{
"name": "Debug Android",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "android",
"sourceMaps": true,
"target": "emulator-5554"
},


This is as far as the debug console gets:
Launching the application
Attaching to the application
Starting debugger app worker.
Established a connection with the Proxy (Packager) to the React Native application

I also tried the legacy Chrome debugger way (F12 on localhost:8081), but its status is "Waiting", similar to what VsCode is doing.
Pressing the 'd' (for debug on the emulator, same as the emulator's 'Open Debugger' option) for my running RN 0.75.3 app pops up a box that wants me to find Flipper for it, which has been deprecated. How the hell do I configure something to NOT have it do this and bring up the (Chrome) Developer Tools instead?

[cas]

If only it were this easy, my entire team gave up on getting the debugger integration to work and just fell back to console.logs. Which is pretty unfortunate. With large scale projects and expo in the mix. It’s rare that debugging will work like this.

[Bananq]

Hello Sir, could you please share your vsc theme? Thanks for sharing knowledge💯❤

[deeps-cglc]

Hi @basaeat, By default React-native ios app is getting debugged in chrome-browser, is there any option where I can make the app to get debugged in the VS code ? Plz. let me know. Thanks

[tljstewart]

This is great, would love to see this from no code to code. Interesting my vscode breakpoints are working for me, but it opens up the browser debug unfortunately