Ever since I've started using JetBrains Rider I've become a huge fan of the IDE, if you have ever used Resharper for Visual Studio - Rider is Resharper - but fast =D
Rider supports Javascript/TypeScript debugging with Chrome. Using this we can set breakpoints in our code and have the Rider show variables etc. when the client app executes. There are several ways to go this but we mostly develop on a local IIS instance which means that our dev-environments most of the time have a custom domain - ie enkelmedia.se.local or something like this.
Configure JS/TS build
Before we configure Rider we need to make sure that our Javascript code can be debugged. Most of the time we would use some tools to transpile, minify and process the source code into a Javascript bundle. For the debugger to work we must make sure to include the source maps in our build. When using Webpack this is configured like this:
module.exports = {
...
devtool: 'inline-source-map',
...
}One way to double-check that this works is to put a "console.log" in one of the typescript files and make sure that the console output in Chrome shows the .ts file as the source of the console.log-statement.
Configure Rider
We need to set up a custom "Debug Configuration" for the Javascript/Typescript debugging. Go to "Run | Edit Configurations" and add a new "Javascript Debug"-configuration, in the "URL" field paste the URL to the application we want to debug ie. "http://enkelmedia.se.local".
To use this configuration, in the upper right corner choose the configuration from the dropdown and click the debug-icon (the bug). This will start a fresh instance of Google Chrome with the debugger attached.
More information and documentation:
https://www.jetbrains.com/help/rider/Configuring_JavaScript_Debugger.html