在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

reactjs reactjs