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

3z6pesqy 于 2022-11-14 发布在其他

关注(0)|答案(4)|浏览(171)

I am learning Next.js and and want to debug in visual code and chrome. I have tried different combination for launch.json to debug next.js app in visual code. I grab one of the the code from stack overflow itself. but it turns another failure. can you please help me how to debug in Next.js app in visual studio code using google chrome.
Below is my launch.json file code :

{
  "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/*"
      }
    }
  ]
}

code for my .next.config.js

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

my package.json for frontend

{
  "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"
  }
}

My folder structure is as follows:

outer pacakge.json code (i.e. path : 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"
  }
}

Steps that I am following:

while in root folder (i.e.. SOCIAL NETWORK) I am executing command npm run all .
then I press F5 to run debugger.
Below is my vs screen I am running my Next.js app with chrome and all the debug points are greyed out.(highlighted with red box)

but nothing is working.

debugging

来源：https://stackoverflow.com/questions/70001551/unable-to-debug-next-js-app-using-visual-code

4条答案

按热度按时间

hpcdzsge1#

Next.js Docs在Debugging上有专门的文档。
您的.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替换为您正在使用的端口。
您可以从下拉列表中选择所需的调试选项类型。

赞(0）回复(0）举报 2022-11-14

kxxlusnw2#

最后找到了解决方案，我已经编辑了我的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
    }
  ]
}

赞(0）回复(0）举报 2022-11-14

pbwdgjma3#

这不是一个合适的解决方案，但我已经设法在不修复它的情况下使用此配置（文档中的配置）运行“fullstack”调试器。

{
      "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"
      }
    }

赞(0）回复(0）举报 2022-11-14

2q5ifsrm4#

Debugging上的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/

赞(0）回复(0）举报 2022-11-14

我来回答

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

4条答案

相关问题

热门标签

最新问答