无法使用可视化代码调试 Next.js 应用程序

Question

我正在学习 Next.js，并希望在可视化代码和 chrome 中进行调试。我尝试了不同的launch.json组合以在可视代码中调试next.js应用程序。我从堆栈溢出本身中获取其中一个代码。但它变成了另一个失败。 你能帮我如何使用谷歌浏览器在 Visual Studio 代码中调试 Next.js 应用程序吗？

下面是我的launch.json文件代码：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Example",
      "runtimeExecutable": "node",
      "runtimeArgs": ["--inspect", "node_modules/.bin/next", "dev"],
      "port": 9229,
      "cwd": "${workspaceFolder}/frontend",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/frontend/*"
      }
    }
  ]
}

我的 .next.config.js 代码

module.exports = {
  webpack(config) {
    config.devtool = 'cheap-module-eval-source-map'
    return config
  },
}

我的 package.json 用于前端

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "Social networking app",
  "proxy": "http://127.0.0.1:8080",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "author": "Vivek padelkar",
  "license": "ISC",
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "antd": "^4.16.13",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "next": "^12.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-toastify": "^8.1.0"
  },
  "devDependencies": {
    "cross-env": "^7.0.3"
  }
}

我的文件夹结构如下：

外部 pacakge.json 代码（即路径：SOCIAL NETWORK/pacakge.json”

{
  "name": "socialnetwoek",
  "version": "1.0.0",
  "description": "social network backend",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "start": "node backend/server",
    "server": "nodemon backend/server",
    "client": "npm run dev --prefix frontend",
    "all": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "Vivek Padelkar",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "colors": "^1.4.0",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "esm": "^3.2.25",
    "express": "^4.17.1",
    "express-async-handler": "^1.2.0",
    "joi": "^17.4.2",
    "mongoose": "^6.0.12",
    "morgan": "^1.10.0"
  },
  "devDependencies": {
    "concurrently": "^6.4.0",
    "nodemon": "^2.0.15"
  }
}

我正在遵循的步骤：

1. 在根文件夹（即社交网络）中，我正在执行命令 npm run all。
2. 然后我按 F5 运行调试器。

下面是我的 vs 屏幕，我正在使用 Chrome 运行我的 Next.js 应用程序，所有调试点都显示为灰色。（用红色框突出显示）

但没有任何效果。

Answer 1

Next.js Docs 有专门的调试文档。

您的.vscode/launch.json 应该是：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "console": "integratedTerminal",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

并且不应使用next.config.js 进行任何更改。

如果你使用 Yarn，npm run dev 可以替换为 yarn dev。如果您要更改应用程序启动的端口号，请将 http://localhost:3000 中的 3000 替换为您正在使用的端口。

您可以从下拉列表中选择所需的调试选项类型。

Answer 2

终于找到了解决方案，我已经按照以下方式编辑了我的launch.json，一切都按预期工作，谢谢你们宝贵的时间。

launch.json
{
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/frontend"
    },
    {
      "name": "Attach to Edge",
      "port": 9222,
      "request": "attach",
      "type": "pwa-msedge",
      "webRoot": "${workspaceFolder}/frontend"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Edge",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/frontend"
    },
    {
      "name": "Launch Microsoft Edge and open the Edge DevTools",
      "request": "launch",
      "type": "vscode-edge-devtools.debug",
      "url": "http://localhost:3000" // Provide your project's url to finish configuring
    }
  ]
}