[kakuri]

I loved Chrome's debugger for years, then build tools and React ruined debugging for me.

Built code largely works with source maps, but it fails often enough, and in bizarre ways, that my workflow has simply gone back to console logs.

React's frequent re-renders have also made breakpoints very unpleasant - I'd rather just look at the results of console logs.

Are there ways I can learn to continue enjoying the debugger with TS+React? It is still occasionally useful and I'm glad its there, but I have reverted to defaulting to console logs.

[duderific]

I find myself doing a mix of both. Source maps are good enough most of the time, I haven't seen the bizarre failures you're seeing - maybe your bundling configuration needs some tweaking? But yes, the frequent re-renders are obnoxious. In those cases logging is generally better.

Conditional breakpoints help alleviate the pain when there are frequent re-renders. Generally you can pinpoint a specific value that you're looking for and only pause when that condition is satisfied. Setting watch expressions helps a lot too.

[dgb23]

Console logs in the browser have some unique advantages. You can assign the output to a variable, play with it etc.

But yes, any code that is inside jsx generally sucks to debug with standard tooling. There are browser plugins that help you inspect the react ui tree though.

[jesse__]

Agreed, debugging tools for the browser are almost comically incapable, to the point of not even useful in most cases.