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 ([email protected] & [email protected]) 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.