When developing plain old JavaScript applications, our debugging options are usually dependent upon the available tooling in each browser. Most modern browsers include some form of developer console that allows us to view the scripts running on a web page. From this console, we can set breakpoints and investigate the behavior of our application. We can perform the same task in TypeScript applications; however, this leaves us stepping through the generated JavaScript rather than the TypeScript code we actually wrote.
As we discussed earlier, source maps are a way to map one code file, generally minified, back to the original code file. In TypeScript, this concept holds true and allows us to step through our non-compiled TypeScript code. To enable this functionality, the first thing we must do is ensure that our project settings are set to generate source maps; this setting is on by default:
This setting will provide the --sourcemap parameter to the compiler and allow us...