在 reactjs 中进行服务器端调试

IT技术 node.js reactjs
2021-05-06 14:47:56

因为我想使用 Visual Studio 代码调试服务器端 SSR（服务器端渲染）代码。目前它只调试捆绑的文件。这样做有点乏味。所以，我试图在 SSR 运行时调试实际文件。

请告知任何方式或Visual Studio代码午餐设置配置。

当前在午餐设置中使用配置：-

       {
        "type": "node",
        "request": "attach",
        "name": "Attach by Process ID",
        "protocol": "inspector",
        "processId": "${command:PickProcess}",
        "sourceMaps": true,
        "stopOnEntry": false,
        "cwd": "${workspaceRoot}",
        "port": 9229,
        "sourceMapPathOverrides": { 
        "webpack:///./*": "${workspaceFolder}/*",
        "webpack:///*": "*"
        }
        }

所以，我正在附加节点进程运行。

2个回答

来自 vs-code文档

要调试客户端 React 代码，我们需要安装 Debugger for Chrome 扩展程序。

注意：本教程假设您已安装 Chrome 浏览器。Edge 和 Firefox 浏览器也有调试器扩展。

打开扩展视图 (Ctrl+Shift+X) 并在搜索框中键入“chrome”。您会看到几个引用 Chrome 的扩展程序。

配置 chrome 调试器并开始使用（这适用于客户端）

至于SSR

在 Node.js 中调试服务器端

我在尝试 SSR 时找到了解决方案并在此处做出react。我遇到了同样的问题，花了大约 4 个小时。

所以我的launch.json中有这样的配置

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach",
            "port": 9229,
            "request": "attach",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node",
            "outFiles": ["${workspaceFolder}/build/**/*.js"]
        },
    ]
}

因此，您需要outFiles使用源映射将选项添加到您的 webpack 包中

像这儿

在这里你可以找到详细信息

更新！我发现 vscode 不考虑源映射中的变量名称。好吧，我转到了 chrome 调试器，它运行良好。这是您可以找到如何配置 chrome 调试器的链接，它更容易

其它你可能感兴趣的问题
上一篇从 HOC 访问封装的组件函数 下一篇凌乱的类名构造