Search code examples
reactjsdebuggingbabeljsgoogle-chrome-devtools

How can I inspect the source compiled from JSX when debugging a react app?

This blog post describes a way of viewing the result of the JSX transform when stepping through a react application, but it's a bit outdated (uses the old ReactDom.render() api loaded via a text/babel script). When using a clean copy of a react app generated from create-react-app (React@18.2.0 & babel@7.23.3) it doesn't seem there is a transform.run in the call stack that I can use to inspect the compiled source.

Is there still a way to do something like this with current react/babel versions?

Solution

  • Disable javascript source maps under browser developer tools settings. Then when you debug you will see the compiled source code.