Question

我正在使用Visual Studio Code（vscode）开发next.js应用程序，我非常喜欢该编辑器！我已从扩展程序商店安装了适用于Chrome的Debugger。下面的配置启动了一个新的Chrome实例，我可以开始调试了。它在vscode的断点处停止，但问题就出现了。它没有显示函数的值并跳转到node_modules事件，尽管我将它添加到＆＃34; skipfiles＆＃34;。断点也不会在构造函数上停止。 next.js不知何故不受支持？我经常使用异步等待语法。调试服务器端代码非常有效。

    {
        "name": "My Client",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceRoot}/my-client/",
        "skipFiles": [
            "node_modules/**/*.js",
            "<node_internals>/**/*.js",
            "node_modules",
            ".next"
        ]
    }

Answer 1

我希望对你们朋友来说还不算太晚，在这里，您可以获得VSCode的原始文档来解决问题：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Next: Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Next: Node",
            "runtimeExecutable": "next",
            "runtimeArgs": [
                "--inspect"
            ],
            "port": 9229,
            "console": "integratedTerminal"
        }
    ],
    "compounds": [
        {
            "name": "Next: Full",
            "configurations": ["Next: Node", "Next: Chrome"]
        }
    ]
}

Answer 2

以下对我有用（扩展自Maximiliano Cespedes回答）：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [{
            "type": "node",
            "request": "launch",
            "name": "NPM Launch",
            "runtimeExecutable": "npm",
            "cwd": "${workspaceFolder}/my-app",
            "runtimeArgs": [
                "run-script",
                "debug"
            ],
            "port": 9229,
            "console": "integratedTerminal"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 9229,
            "stopOnEntry": false,
            "restart": true
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Chrome",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        }
    ],
    "compounds": [{
        "name": "Debug-Full",
        "configurations": ["NPM Launch", "Attach", "Chrome"]
    }]
}

vscode为next.js app启动配置

2 个答案: