在 chrome 和 vscode 中调试 nextjs 应用程序 [英] Debugging nextjs app in chrome and vscode

问题描述

我已将此代码段插入到我的 launch.json 文件中.它总是打开chrome并卡在about:blank，然后v​​scode给出超时错误.我按照此处的步骤构建了这个 launch.json 文件.https://github.com/Microsoft/vscode-recipes/tree/master/Next-js 并修改它以运行 chrome canary.

I have inserted this snippet in my launch.json file. It always opens up chrome and is stuck at about:blank, and then vscode gives the timeout error. I built this launch.json file by following the steps here. https://github.com/Microsoft/vscode-recipes/tree/master/Next-js and modified it to run for chrome canary.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Chrome Canary",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000/",
            "runtimeExecutable": "C:/Users/myusername/AppData/Local/Google/Chrome SxS/Application/chrome.exe",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Next: Node",
            "runtimeExecutable": "next",
            "runtimeArgs": [
                "--inspect"
            ],
            "port": 9229,
            "console": "integratedTerminal"
        }
    ],
    "compounds": [
        {
            "name": "Next: Full",
            "configurations": [
                "Next: Node",
                "Chrome Canary"
            ]
        }
    ]
}

推荐答案

调试Nextjs程序，无需自定义服务器，使用配置:

Debug Nextjs program without custom server, use the configuration:

{
  "type": "node",
  "request": "launch",
  "name": "Launch via NPM",
  "runtimeExecutable": "${workspaceFolder}\\node_modules\\.bin\\next",
  "port": 9229,
  "env": {
    "NODE_OPTIONS": "--inspect"
  }
}

用自定义服务器调试Nextjs程序，使用配置:

Debug Nextjs program with custom server, use the configuration：

{
  "type": "node",
  "request": "launch",
  "name": "Next: Node",
  "program": "${workspaceFolder}/server.js",
  "runtimeArgs": [
      "--inspect"
  ],
  "port": 9229,
  "console": "integratedTerminal"
}

这篇关于在 chrome 和 vscode 中调试 nextjs 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！