Simultaneous debugging of JavaScript and .NET code with Rider

Thanks to the concept of Run/Debug configurations, Rider makes it easy to switch between projects we want to debug in the IDE. Using compound Run/Debug configurations, we can even debug multiple projects at the same time (see our debugging series for more about compound run configurations in Rider).

Did you know Rider can also debug front-end JavaScript code that runs in the web browser? Rider makes it possible to debug front-end JavaScript and a back-end .NET project in the same debugger session! Let’s see.

Open the browser when running a web application

When debugging web applications, it may be useful to launch the web browser and navigate to a the URL of the application being debugged. Rider’s Run/Debug configurations now have a new Browser tab where we can enable this functionality. We can pick the browser to open and set the URL to navigate to:
Open browser / enable debugger

When we now debug our .NET project (F5), Rider will automatically open the browser at the URL we configured.

Debugging JavaScript that runs in the browser

We can edit our Run/Debug configuration and enable the with JavaScript debugger setting. This effectively makes Rider become the Chrome debugger!

Rider now lets us place breakpoints in any JavaScript file we have in our application. It will pause execution and give us the opportunity to explore variables, look at the call stack, check loaded scripts, use the console, and so on.
Rider attaches to Chrome debugger

Using TypeScript or minimizing JavaScript files? No worries: Rider uses source maps (when available) to grab the original code – more details are available in the WebStorm docs.

Note that debugging code that runs in the browser currently only works for JavaScript and TypeScript files. Debugging JavaScript code that is embedded in .cshtml files is not yet supported.

Debugging front-end JavaScript and back-end .NET code simultaneously

When starting the debugger for a .NET project that has JavaScript debugging enabled, Rider in fact starts two debugger sessions: one that attaches to the Chrome debugger, and one that is connected to our running .NET application.

Using that knowledge, we can place breakpoints in both front-end JavaScript code and back-end .NET code. Rider will easily jump between both and allows us to track calls coming from JavaScript into a .NET web API, and back – letting us simultaneously debug both parts of our application!
Rider step from JavaScript to .NET code

Download Rider and give it a try! We’d love to hear your feedback!

Comments below can no longer be edited.

8 Responses to Simultaneous debugging of JavaScript and .NET code with Rider

  1. Avatar

    Tom says:

    January 17, 2018

    Except this only works with chrome. Also when you select any other browser than chrome in that window and check javascript debugger checkbox, it’ll fall back to chrome despite of the choice. At least a warning would be nice to have.
    Speaking of which, any chance to make this work with firefox?

    • Avatar

      Oleksii Vynnychenko says:

      January 22, 2018

      Since no one is answering… I’m completely random person here. But I’ve asked similar question:
      Pretty sure it’s the same feature so you can guess the answer to your question about Firefox integration…

      • Avatar

        Maarten Balliauw says:

        January 22, 2018

        Seems I totally missed that comment, sorry Tomasz and Oleksii! That tweet is correct though: there are no plans for that right now due to Firefox having a different protocol.

  2. Avatar

    Mehran Taherimoud says:

    June 12, 2018

    I have a .net project (ASP.NET core 2.1) with some CSHTML and javascript. I have the chrome extension installed and configured with the same port that Rider listens for Live Edit. However when I run the .net project the extension is not shown. If I add a JavaScript Debugging configuration then it shows the extension bar but this time it doesn’t relead/update web pages when I edit .cshtml files. I am sure it is not a bug and I guess it never works for cshtml files in JavaScript debug mode. But it is a big pain that I cannot do anything with Rider to fix it. For example I created a custom File Watchers to monitor the changed cshtml files but there is no way to tell it when those files change then reload the browser. Also as I said the .net project configuration even doesn’t load the extension for me. Any suggestion please?

  3. Avatar

    Philipp Dolder says:

    May 10, 2019

    When I run the configuration it will use different javascript than when I debug. Ideas what I’m doing wrong?

    • Avatar

      Philipp Dolder says:

      May 10, 2019

      After trying the same thing (building the javascript manually) a couple of time, eventually the correct javascript is used in all cases. But I’m still unable to hit any debugger breakpoints.

  4. Avatar

    Maxim says:

    December 8, 2019


    I have a .net core 3.0 backend and a react frontend.
    I created the project with `dotnet new create-react-app`

    is it possible to get this function to work? or is it only only .js file and not react files?
    anyway i cant get this to work the only thing that works is the normal c sharp debugging session.

    can anyone tel me how you would set this up on a new dotnet new create-react-app?

Discover more