如何使用 WebStorm 调试 NextJS React 应用程序？

Posted 2023-02-22

【中文标题】如何使用 WebStorm 调试 NextJS React 应用程序？

【英文标题】：How does one debug NextJS React apps with WebStorm?

【发布时间】：2019-06-18 15:29:52

【问题描述】：

我正在尝试使用 WebStorm IDE 调试器来调试 NextJS React 应用程序。我尝试使用 javascript 配置，但这似乎不起作用——当我使用 Node 配置时也是如此。

使用 WebStorm 调试 NextJS React 应用程序的正确程序是什么？

【参考方案1】：

以下步骤对我有用：

使用 next 启动应用程序（npm run dev 或任何您的启动脚本） 添加断点，创建

JavaScript Debug

运行配置，指定http://localhost:3000 URL 调试

如果您想调试在服务器端执行的代码，我建议使用 Node.js 运行配置，并将 node_modules\next\dist\bin\next 指定为 Javascript 文件：强>

然后您可以调试 Node.js 和 Javascript Debug 运行配置，以调试服务器端和客户端代码。

【讨论】：

谢谢，这似乎适用于简单的项目，但在项目中，我正在处理的“页面”目录不在项目根目录中，而是在某些级别下，'/src/common/ pages'，当我启动调试器时，我收到错误“调试器已附加。> 找不到pages 目录。请在项目根目录下创建一个”。我目前正在尝试调试节点模块，所以我不想将项目根目录设置为'common'目录...

就我而言，没有.next/dist/bin/next 文件，无论是生产部署还是开发部署。单击package.json 的next 脚本上的调试模式似乎适用于服务器端调试。

我确认 package.json 脚本中的 next 命令刚刚开始使用 Node 12.14.1 进行调试，而 v13.3.0 无法连接调试器。

【参考方案2】：

我发现单击package.json 中dev 旁边的播放按钮并选择调试选项可用于调试我由 Next.js 提供的 API。

这会自动创建运行配置。虽然断点很脆弱，但我认为是因为我使用的是 TypeScript。我需要在添加断点后编辑文件才能使它们工作。

【讨论】：

即使我编辑文件，它也不会在断点处停止。虽然我使用的是 PyCharm 专业版，而不是 WebStorm。

【参考方案3】：

对于 next.js 的前端：

直接从下方的“运行”工具窗口开始调试您的应用程序↓。只需按住 Ctrl+Shift / ⌘⇧ 并单击运行应用程序的 URL 地址。 WebStorm 启动自动生成的 Debug Application 运行/调试配置，浏览器在 http://localhost:3000/ 打开，并出现 Debug 工具窗口，显示调用堆栈和变量。

https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/#launch_a_debugging_session