我有一个在aspnet核心中有reactjs代码的项目。Reactjs是最近添加到现有的aspnet核心应用程序中的。集成阶段包括:
一切都很好,现在我们正在使用调试器或控制台日志在devtools调试过程,但我们想调试reactjs代码(组件等)在vscode。这是可能的?
2cmtqfgy1#
为了调试reactjs,您需要在vscode中安装Debugger for Chrome扩展。创建asp.net核心react项目后,使用vscode打开它,并执行以下步骤。1.点击Activity Bar中的Debugging图标以打开Debug视图,然后点击齿轮图标以配置launch.json文件:
Debugger for Chrome
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.设置断点并调试它。
ne5o7dgx2#
我应用了@Karney.的答案,但它没有工作,因为源Map没有在我的webpack配置文件中启用。从webpack配置文件启用源Map后,它工作正常。
module.exports = () => ({ ... devtool: 'eval-source-map', ... });
有关webpack devtool的更多信息here
hsgswve43#
@Karney.的答案有一个问题--对于每个配置,都将启动单独的浏览器。每次关闭其中一个浏览器很快就会变得很烦人。如今,解决这个问题的方法相当简单(至少对于Chrome和Edge来说是这样):
"serverReadyAction": { "action": "debugWithEdge", // or "debugWithChrome" "pattern": "\\bNow listening on:\\s+(https?://\\S+)" }
使用上面的配置,您不再需要复合。参考文献
3条答案
按热度按时间2cmtqfgy1#
为了调试reactjs,您需要在vscode中安装
Debugger for Chrome
扩展。创建asp.net核心react项目后,使用vscode打开它,并执行以下步骤。
1.点击Activity Bar中的Debugging图标以打开Debug视图,然后点击齿轮图标以配置launch.json文件:
1.将launch.json更改为:
1.设置断点并调试它。
ne5o7dgx2#
我应用了@Karney.的答案,但它没有工作,因为源Map没有在我的webpack配置文件中启用。
从webpack配置文件启用源Map后,它工作正常。
有关webpack devtool的更多信息here
hsgswve43#
@Karney.的答案有一个问题--对于每个配置,都将启动单独的浏览器。每次关闭其中一个浏览器很快就会变得很烦人。
如今,解决这个问题的方法相当简单(至少对于Chrome和Edge来说是这样):
使用上面的配置,您不再需要复合。
参考文献