Debugging ReactJS Components in AspNet Core

user_437620 0
Viewed 664

I have a project with reactjs codes in aspnet core. Reactjs is added lately to existing aspnet core application.

Integration stages are,

  • reactjs codes are added to aspnet core project
  • reactjs codes are bundled to wwwroot folder with webpack (msbuild)
  • bundled js file is added to aspnet core cshtml layout file

Everything is working fine, and now we are using debugger or console logs at devtools for debugging process, but we want to debug reactjs codes (components etc) in vscode. Is it posibble?

webpack asp.net-core reactjs .net
3 Answers

In order to debug reactjs, you need to install Debugger for Chrome extension in vscode.

After creating the asp.net core react project, open it with vscode and follow these steps.

  1. Click on the Debugging icon in the Activity Bar to bring up the Debug view. Then click on the gear icon to configure a launch.json file:

enter image description here

  1. Change the launch.json like this:

    {

"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. Set a breakpoint and debug it.

enter image description here

user_144914670

I applied @Karney.'s answer but it didn't work because source map was not enabled in my webpack config file.

It worked after enabling source maps from webpack config file.

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

More information here for webpack devtool

user_105186140

With @Karney.'s answer there is one issue - for each config, separate browser will be launched. It quickly becomes annoying to close one of them every time.

The remedy for this pain is fairly simple nowadays (at least for Chrome and Edge):

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

With the config above, you no longer need compounds.

Reference

user_17823930
Related