在 AspNet Core 中调试 ReactJS 组件答案

【问题标题】：Debugging ReactJS Components in AspNet Core在 AspNet Core 中调试 ReactJS 组件
【发布时间】：2021-02-08 22:58:00
【问题描述】：

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

集成阶段是，

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

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

【问题讨论】：

标签： .net reactjs asp.net-core webpack

【解决方案1】：

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

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

单击活动栏中的调试图标以调出调试视图。然后点击齿轮图标配置launch.json文件：

像这样更改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】：

我申请了@Karney.'s answer，但它不起作用，因为我的 webpack 配置文件中没有启用源映射。

从 webpack 配置文件启用源映射后它工作。

  module.exports = () => ({
    ...
    devtool: 'eval-source-map',
    ...
  });

更多信息here webpack devtool

【讨论】：