在reactjs中进行服务器端调试

如何解决在reactjs中进行服务器端调试

我想使用Visual Studio代码调试服务器端SSR（服务器端渲染）代码。 目前，它仅针对捆绑文件进行调试。这有点乏味。 因此，我正在尝试在SSR运行时调试实际文件。

请以任何方式或Visual Studio代码的午餐设置建议。

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

Use of uninitialized value in numeric lt (<) at log.pl line 144,Use of uninitialized value in numeric lt (<) at log.pl line 144,

因此，我附加了正在运行的节点进程。

解决方法

我在尝试 SSR 时找到了解决方案并做出反应 here。我也遇到了同样的问题，花了大约 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 包中

like here

Here you can find the details

更新！我发现 vscode 没有 consider 源映射中的变量名。好吧，我转到了 chrome 调试器，它可以运行 well。 This 是您可以找到如何配置 chrome 调试器的链接，它更容易

,

来自vs代码Documentation

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

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

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

Configure the chrome debugger并开始使用（适用于客户）

关于SSR

Debug server-side in Node.js