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

Question

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

整合阶段是，

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

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

标签： .netreactjsasp.net-corewebpack

Answer 1

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

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

1. 单击 Activity Bar 中的 Debugging 图标以打开 Debug 视图。然后点击齿轮图标配置一个launch.json文件：

2. 像这样更改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"]
     }
    ]
   } 
   

3. 设置断点并调试它。