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

Question

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

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

Answer 1

对于 next.js 的前端：

\n

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

\n

\n

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

\n

Answer 2

以下步骤对我有用：

• 使用next（npm run dev或其他启动脚本的样子）启动应用程序
• 添加断点，创建JavaScript Debug运行配置，指定http://localhost:3000URL
• 调试

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

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

Answer 3

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

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