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

Question

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

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

Answer 1

以下步骤对我有用：

• 使用 next 启动应用程序（

  npm run dev

  或任何启动脚本）
• 添加断点，创建 JavaScript 调试运行配置，指定

  http://localhost:3000

  URL
• 调试

如果您想调试在服务器端执行的代码，我建议使用 Node.js 运行配置，并将

node_modules\next\dist\bin\next

指定为 Javascript 文件：

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

Answer 2

我发现单击

dev

中

package.json

旁边的播放按钮并选择调试选项可以调试由 Next.js 提供的 API。

这会自动创建运行配置。不过，断点很不稳定，我想是因为我使用的是 TypeScript。添加断点后我需要编辑文件才能让它们工作。

Answer 3

对于 next.js 的前端：

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

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

Answer 4

我尝试同时使用 WebStorm 和 Rider，在这两个 IDE 中，断点在一段时间后会随机停止被命中。

作为解决方法，我只是停止并重新运行该过程，这使得断点再次命中。

如果有更好的方法来解决这个奇怪的问题，我很乐意在评论中听到。