.net - 在 AspNet Core 中调试 ReactJS 组件

Question

我在 aspnet 核心中有一个带有 reactjs 代码的项目。 Reactjs 最近被添加到现有的 aspnet 核心应用程序中。

整合阶段是，

• 将reactjs代码添加到aspnet core项目
• reactjs 代码与 webpack (msbuild) 捆绑到 wwwroot 文件夹
• 将捆绑的js文件添加到aspnet core cshtml布局文件中

一切正常，现在我们在 devtools 使用调试器或控制台日志来调试过程，但我们想在 vscode 中调试 reactjs 代码(组件等)。有可能吗？

Answer 1

为了调试 reactjs，您需要在 vscode 中安装 Debugger for Chrome 扩展。

创建asp.net core react项目后，用vscode打开，按照以下步骤操作。

1. 单击“事件栏”中的“调试”图标以调出“调试” View 。然后点击齿轮图标配置一个launch.json文件:

1. 像这样更改 launch.json:

   {
   
   "version": "0.2.0",
     "configurations": [
   
      {
        "name": ".NET Core Launch (web)",
        "type": "coreclr",
        "request": "launch",
        "preLaunchTask": "build",
        "program": "${workspaceFolder}/bin/Debug/net5.0/my-new-app.dll",
        "args": [],
        "cwd": "${workspaceFolder}",
        "stopAtEntry": false,
        "serverReadyAction": {
            "action": "openExternally",
            "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
        },
        "env": {
            "ASPNETCORE_ENVIRONMENT": "Development"
        },
        "sourceFileMap": {
            "/Views": "${workspaceFolder}/Views"
        }
    },
    {
        "type": "chrome",
        "request": "launch",
        "name": "Chrome",
        "url": "http://localhost:5001",
        "webRoot": "${workspaceFolder}/ClientApp"
    }
   ],
   "compounds": [
     {
        "name": "Full stack",
        "configurations": [".NET Core Launch (web)", "Chrome"]
     }
    ]
   } 
   

2. 设置断点并调试。