Debug a React app with Visual Studio Code

Debugging a React app is far from being an easy task... if you don't know the tools you already have, for free!
There are indeed some React-specific tools, but today let's see together one that actually works pretty much with everything!
I'll use a simple React app as a playground, but the exact same instructions work for any other framework and language in general, with some little tweaks.
I'm talking about the Visual Studio Code debugger.
_______________________________
Support my work: github.com/spo...
Hit like and subscribe for more content! :D
Join the Discord community! Here's the invite: / discord
You can also follow me on the other platforms:
Twitter: / balastrong
dev.to: dev.to/balastrong
Home: leonardomontin...
TikTok: / balastrong
GitHub: github.com/Bal...
Instagram: / devbalastrong
_______________________________
Sound effects from www.zapsplat.com
#vscode #reactjs #programming

[@mugishaalainchristian2613]

Thanks man, I was looking for this and All I could see was 1 hour long videos

[@StephenBeale]

just what I needed, short and succinct and got the job done - much appreciated!

[@lokehirl]

Thank you, I learnt something new and useful thing today as a developer.

[@DevLeonardo]

Love to hear that!

[@Sarlasnw]

That's helped me a lot! Thank you, bro.

[@carlosenriquecastanedaguti8130]

Excelent explanation, thanks very much for your video.

[@dcaballero_97]

Thanks so much. You make it easy and look easy for us too lol

[@KC-hl4oj]

Thanks for this great tutorial

[@hiranga]

ah this helps 💪🏾💪🏾

[@wzup23]

Dude thank you!

[@n8900498]

Do you have a repo for your code you using to demonstrate, I am very new to React and wish to follow your tutorial using your code

[@asdetodo20]

Gracias pibe

[@vetedde]

Thanks! Vere helpful!

[@user-oo6hz8hg6g]

thank you very much
helped a lot

[@adusparx]

Perfect video

[@venkatasivanagababu64]

thank you

[@dios8256]

Nice one thanks

[@mylesgideonprospero]

If you were to debug your React project's problem involved with unidentified and unwanted re-renders. How would you do it?
(This video was titled Debugging with React App so I expected it to show a re-rendering problem ✌ )

[@SeanAhrens]

Are you the voice of "not what you think" videos on UA-cam? Very similar!

[@DevLeonardo]

Unfortunately not, I wish I had a similar amount of subscribers though 😂

[@golcuk2076]

Well, what if I have a backend where I want to debug that runs on 4000 port, and in my case I have a front end and when I click the signup button it goes to my back-end code and I want to debug there so in my launch.json file should change the "url" property to 4000 which is my backend?

[@DevLeonardo]

The debugger is attached to a port (the one you defined in the settings, at the beginning of this video).
If you have a frontend and a backend app, running on two separate ports, I'd probably say the easiest way is to launch two separate debuggers.

[@golcuk2076]

Okey I handled it what to do I defined my launch.json like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": ["/**"],
"program": "${workspaceFolder}\\backend\\src\\app.js"
}
]
}
But when you want to debug the backend it wants you to change import syntax in files and add "type:module" to package.json. It was interesting to solve but it was solved. Maybe you may take another video about it because it might be pretty confusing for those who don't know how to do that.

[@DevLeonardo]

Cool! So here as I can see it is assuming that on 3000 you already have the frontend running, and the debugger spins the backend using app.js as an entrypoint?

[@golcuk2076]

yeap!

[@DevLeonardo]

Thanks for sharing! I'll see if I can investigate more and make a video out of it :D

[@maksymbaranovskyi8362]

Is there a way we can use the native browser window instead of the built-in browser that opens up? It doesn't have my extensions and look different overall.

[@DevLeonardo]

Hey! It should be possible to launch a specific browser, but it can be even easier to directly use the brower at that point. I made a video on how to use your own Chrome instance: ua-cam.com/video/t1aEXEvYzvM/v-deo.html

[@martinocom]

How about React Native? Are we still stuck with Flipper?

[@DevLeonardo]

I have never tried but I think it should be possible to do pretty much the same, with a dedicated entry in launch.json

[@watchnow4211]

U could have demonstrated this by simple code

[@DevLeonardo]

Thanks for the comment! Do you think a smaller app with just a couple of components was better to showcase the debugger? I didn't wont to oversimplify it, but maybe I made it too confusing. Let me know :D

[@thesadnesspath8371]

​Yes that would have been better

[@vohoanghaduong6639]

thanks a lot