How to debug with breakpoints in WebStorm for Astro + React files?

Question

Is there a way to set breakpoints to debug Astro files in WebStorm that use React components? I know that console logs etc. can be used to output content, but I'd like to view the full context and also run step execution if necessary.

Answer 1

Breakpoints can be set when the astro project is run in debug mode. At the time of writing breakpoints can not be activated using the usual IDE functionality on the line numbers. They have to be triggered using "debugger" statements.

Here is an example using react components:

---
import MyComponent from 'myReactComponent'

debugger;

// more server side code here
---
<MyComponent>
    {() => {
        debugger;
        return(
             <div>
              This is how to debug Astro files
              with React components using WebStorm
             </div>
        )
    }}
</MyComponent>

The debug mode in WebStorm can be activated e.g. in the NPM tool. For Astro projects you should find the "dev", "start" and other run configurations as defined in package.json. Right click on "dev" and choose "Debug 'dev'".

Now the IDE will stop at the debugger statements.