在reactjs中进行服务器端调试

Question

因为我想使用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:///*": "*"
}
}

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

Answer 1

来自vs代码文档

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

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

打开"扩展"视图(Ctrl+Shift+X(，然后在搜索框中键入"chrome"。您将看到几个引用Chrome的扩展。

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

至于SSR

在Node.js 中调试服务器端

Answer 2

我在试验SSR时找到了解决方案，并在这里进行了反应。我也有同样的问题，花了大约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调试器的链接，它更容易