如何使用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 运行配置与指定为 Javascript文件的node_modules\next\dist\bin\next一起使用：

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

Answer 2

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

这将自动创建运行配置。我认为断点很容易，因为我正在使用TypeScript。添加断点后，我需要对其进行编辑。