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

我正在学习 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"
  }
}

我的文件夹结构如下:

enter image description here

外部 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. 在根文件夹(即 SOCIAL NETWORK)中,我正在执行命令 npm run all
  2. 然后我按 F5 运行调试器。

下面是我的 vs 屏幕,我正在用 chrome 运行我的 Next.js 应用程序,所有调试点都显示为灰色。(用红色框突出显示)

enter image description here

但没有任何工作。

stack overflow unable to debug Next.js app using visual code
原文答案

答案:

作者头像

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 。如果您要更改应用程序启动的端口号,请将 3000 中的 http://localhost:3000 替换为您正在使用的端口。

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

作者头像

终于找到了解决方案,我已经按照以下方式编辑了我的 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
    }
  ]
}
作者头像

这不是一个合适的解决方案,但我没有修复它以使用此配置(文档中的那个)运行“全栈”调试器。

    {
      "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.js 调试文档仅适用于前端或客户端文件,但不适用于 /api/files*,请按照以下步骤操作并您可以调试 /api/files

https://blogs.sap.com/2019/07/15/how-to-debug-a-node.js-rest-api-in-visual-studio-code-locally/