webpack 在AspNet Core中调试ReactJS组件

uinbv5nw  于 2022-11-13  发布在  Webpack
关注(0)|答案(3)|浏览(169)

我有一个在aspnet核心中有reactjs代码的项目。Reactjs是最近添加到现有的aspnet核心应用程序中的。
集成阶段包括:

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

一切都很好,现在我们正在使用调试器或控制台日志在devtools调试过程,但我们想调试reactjs代码(组件等)在vscode。这是可能的?

2cmtqfgy

2cmtqfgy1#

为了调试reactjs,您需要在vscode中安装Debugger for Chrome扩展。
创建asp.net核心react项目后,使用vscode打开它,并执行以下步骤。
1.点击Activity Bar中的Debugging图标以打开Debug视图,然后点击齿轮图标以配置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"]
  }
 ]
}

1.设置断点并调试它。

ne5o7dgx

ne5o7dgx2#

我应用了@Karney.的答案,但它没有工作,因为源Map没有在我的webpack配置文件中启用。
从webpack配置文件启用源Map后,它工作正常。

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

有关webpack devtool的更多信息here

hsgswve4

hsgswve43#

@Karney.的答案有一个问题--对于每个配置,都将启动单独的浏览器。每次关闭其中一个浏览器很快就会变得很烦人。
如今,解决这个问题的方法相当简单(至少对于Chrome和Edge来说是这样):

"serverReadyAction": {
     "action": "debugWithEdge", // or "debugWithChrome"
     "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
 }

使用上面的配置,您不再需要复合。
参考文献

相关问题