如何在 WebStorm 中断点调试 Astro + React 文件？

Question

有没有办法在使用 React 组件的 WebStorm 中设置断点来调试 Astro 文件？我知道控制台日志等可用于输出内容，但我想查看完整的上下文，并在必要时运行步骤执行。

Answer 1

astro项目在调试模式下运行时可以设置断点。在编写本文时，无法使用行号上的常用 IDE 功能激活断点。它们必须使用“调试器”语句来触发。

这是一个使用 React 组件的示例：

---
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>

WebStorm 中的调试模式可以激活，例如在 NPM 工具中。对于 Astro 项目，您应该找到 package.json 中定义的“dev”、“start”和其他运行配置。右键单击“dev”并选择“调试'dev'”。

现在 IDE 将停止在调试器语句处。