在 VScode 中调试 Next.js 应用程序

9 min read

要在VScode中调试Next.js应用程序，您需要按照以下步骤操作：

  1. 确保您的Next.js应用程序可以在开发模式下运行。您可以使用以下命令启动开发服务器：
npm run dev

  1. 在VScode中安装"vscode-chrome-debug"扩展。可以在扩展面板中搜索并安装。

  2. 打开您的Next.js项目文件夹。

  3. 选择"Run and Debug"菜单，然后点击"Create a launch.json file"。选择"Chrome"作为调试器。

  4. 打开生成的launch.json文件。将以下配置添加到"configurations"数组中：

{
  "type": "chrome",
  "request": "launch",
  "name": "Next.js",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

  1. 确保开发服务器正在运行，并使用"npm run dev"命令启动。

  2. 返回VScode，点击调试菜单中的"Run"按钮。

  3. Next.js应用程序将在Chrome调试器中打开，并您可以在VScode中进行调试。

注意：这里的示例假定您的Next.js应用程序使用默认的开发服务器配置，并运行在本地的3000端口上。如果您的应用程序使用不同的配置或端口，请相应地更改launch.json中的"url"配置。