B
B
Boris the Animal2020-02-09 17:53:12
webstorm
Boris the Animal, 2020-02-09 17:53:12

Is it possible to debug React JSX code not in the browser, but from the JetBrains WebStorm application?

ASP.NET Core 2.2 + React JS application. I am running an application from Microsoft Visual Studio 2019. I am writing JSX code in WebStorm. It is inconvenient to debug in the browser, you can’t edit the code normally so that it is saved. In general, is there a good way to debug React apps?

Properties/ launchSettings.json

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:63711",
      "sslPort": 44386
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "SomeServer": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}


section from package.json , startVs - used in the C# code below.
"scripts": {
    "startVs": "set HTTPS=true && rimraf ./build && react-scripts start",
    "start": "set HTTPS=true&&rimraf ./build && set PORT=5001 && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },


// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (Configuration.GetSection("React").Get<ReactOptions>().UseSpa)
            {
                app.UseSpaStaticFiles();
                app.UseSpa(spa =>
                {
                    spa.Options.SourcePath = "ClientApp";

                    if (env.IsDevelopment())
                    {
                        spa.UseReactDevelopmentServer("startVs");
                    }
                });
            }
        }

Answer the question

In order to leave comments, you need to log in

1 answer(s)
B
Boris the Animal, 2020-02-09
@Casper-SC

I found out that, as it turned out, you can quite successfully debug the code in JetBrains Rider !!!
Great, but that was a pain.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question