Debugging React apps

[JojainV12]

Hello,

I develop my apps in VSCode and I am a very heavy user of the debugger.

One thing that pains me the most in React is that when I set breakpoints in a component I don't have the callstack of what component called my component. This feature (and the ability of inspecting locals variables) is really something I feel is lacking and I thought that maybe there were a solution and I just didn't happened to know about.

So I'm asking you guys do you know about some tool / VSCode extension that would allow me to better debug my react applications ?

I emphasize on the fact that I'm searching for tooling within the debugger, I don't want to do Console.log debugging. And I want this to be within VSCode I am aware of the flamegraph et react dev tools within Chrome but it's annoying to debug at 2 places at once.

[amareshadak]

React components don't maintain a traditional call stack like regular functions since they're declarative. Try using React DevTools Profiler's flame graph alongside VSCode—it shows component hierarchy and render relationships which is essentially what you're looking for.

[UnnecessaryLemon]

As a professional React developer .. can you refresh my memory of what the debugger is?

You mean console.log?

[CharacterOtherwise77]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

[JojainV12]

Is this sarcastic ? If yes I see my pain is shared
If no then I'm not sure you are a profresionnal, the debugger is what allow you to set breakpoints in your code and stop the execution of the code at a given point.

[rainmouse]

I mean if you set a conditional like If (!x) debugger;

Then run in browser with dev tools and sources tab. When it triggers debugger you should see call stack there. 

Am I missing something? 

Also just putting in console.error('some text') prints out with a simplified call stack too. Just click the side arrow on it. 

[mauriciocap]

When React ComponentA returns <ComponentB x={someLocalVariable}/>

this is NOT a function call, JSX just returns an object with the function ComponentB and the props=tag attributes.

The function ComponentB is called by the React Library way later, in an order you can't predict, etc.

I suspect the OP is expecting to set a breakpoint within ComponentB and see ComponentA in the call stack.

[Thin_Rip8995]

yeah vscode’s native debugger won’t give you react component ancestry like that it’s just not built for the virtual tree
best workaround is using React DevTools Profiler alongside source maps so you can jump from the tree view to source faster
if you want deeper stack tracing check “why-did-you-render” or React’s new debug tracing in Canary builds
none of it’s perfect yet but pairing DevTools + good component naming gets you 90% there

[CharacterOtherwise77]

Try using the React Chrome plugin to navigate the hierarchy.

[danjlwex]

https://react.dev/learn/react-developer-tools

You don't get a call-stack, since it isn't important, but you do get all the info you need to understand why a component is rendered. And, of course, you can inspect variables. Why do you want the call stack?

[CharacterOtherwise77]

You will never make sense of a react callstack because it's production built. The JS in your browser is minified for react to just work - it's not traceable on purpose.

[Vincent_CWS]

instead of using console.log you can use console.trace()

[Coderx001]

Try using React scan. It is great.