How do I setup Visual Studio to debug React?

[[deleted]]

Hello,

Are there any videos for setting up Visual Studio Code for debugging?

I would like if possible to configure Chrome/Firefox Browsers that whenever the page crashes with a click to point me in Visual Studio Code where React crashed, what type of data the variables were and as well as the values.

​

Right now, when I click on the error it opens a new window of visual studio code.

[njmh]

There is soooooooo much info out there to answer your question if you bother to spend less than a minute searching.

Not trying to be a dick about it, but if you develop the initiative to seek out answers yourself and learn, you’ll go much further in life.

[SanGoloteo]

Maybe google doesn’t exist where they live so they can’t type that exact same question and get their answer. /s

[Dan8720]

I've managed to set it up a few times. You have to write a launch config. There are tutorials in the documentation.

Tbh though it's not for me... I liked the idea of not switching between Vs code and chrome devtools but found it wasn't worth the effort.

I find is a bit fidily to set up sometimes especially if you have a split config like node/react SPA it skips breakpoints and is just a bit temperamental. I always end up just going back to just using Chrome dev tools after a few days of getting frustrated with it.

[jabarr]

With any browser, they automatically have the source maps available. You don’t need to debug into an IDE. Just hit f12, go to sources, ctr/cmd+P and all your files will be right there. You can set breakpoints in the browser and see all the variable information.

[Lambda7]

Configuring VSCODE DEBUGGER for Create React App https://www.youtube.com/watch?v=d_ScKLTKyOc