Fixing the Breakpoint Not Hit Issue in TypeScript with Visual Studio 2019 and Webpack

Discover a solution to the frustrating issue of breakpoints not being hit in TypeScript files while using Visual Studio 2019 and Webpack.
---
This video is based on the question https://stackoverflow.com/q/65907321/ asked by the user 'Ken Brannigan' ( https://stackoverflow.com/u/1760844/ ) and on the answer https://stackoverflow.com/a/69107089/ provided by the user 'Riccardo Cafagna' ( https://stackoverflow.com/u/9377113/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Breakpoint not hit in TypeScript file using Visual Studio 2019 and Webpack

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Troubleshooting Breakpoints in TypeScript with Visual Studio 2019 and Webpack

If you're developing an ASP.NET MVC 5 application using TypeScript and Webpack, you might have encountered the frustrating issue of breakpoints not being hit in your TypeScript files when debugging in Visual Studio 2019. This challenge can derail your debugging sessions and leave you scratching your head, especially when the breakpoints work fine without Webpack. In this guide, we will explore the underlying problem and provide a comprehensive solution to get your breakpoints working seamlessly.

Understanding the Problem

When using Visual Studio 2019 with TypeScript and Webpack, you want to set breakpoints in your TypeScript files to debug your application effectively. However, you may notice that the breakpoints never hit during execution. This can be especially confusing because you might be able to set and hit breakpoints in the browser's developer tools, but Visual Studio fails to register them.

The issue seems to stem from how Webpack bundles your TypeScript files and generates source maps. If not configured properly, the mapping between your original TypeScript code and the generated JavaScript may be lost, leading to breakpoints being ignored.

Solution Overview

To overcome this problem, we will make a few adjustments to your Webpack configuration and provide a workaround for setting breakpoints effectively.

Step 1: Update Your Webpack Configuration

First and foremost, ensure that your webpack.config.js file is set up properly to create source maps, which are essential for debugging. Modify the devtool option and include a plugin for source maps as follows:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Generate a Source Map

After updating the configuration, the generated JavaScript from Webpack will include a .map file that allows Visual Studio to map back the JavaScript code to your original TypeScript files.

Step 3: Setting Breakpoints

Once you've set up your Webpack configuration correctly, follow these steps to set breakpoints:

Set a Breakpoint: In Visual Studio, go to your TypeScript file and set a breakpoint on the desired line of code.

Run the Application: Start your application to trigger the debugging session.

Open the Browser's Inspector: Press F12 to open the browser's developer tools and navigate to the Sources tab.

Locate Your TypeScript Files: Find the "webpack://" directory and look for your TypeScript files.

Set a Breakpoint in the Inspector: Place a breakpoint on the same line where you set it in Visual Studio.

Reload the Page: Refresh the webpage or navigate to the part of your application where that line of code is executed.

Hit the Breakpoint in Visual Studio: Now, Visual Studio should stop at the breakpoint you marked. If it removes the breakpoint you've set, simply place another one.

Why This Works

By ensuring that source maps are generated correctly and manually syncing your breakpoints in both Visual Studio and the browser's developer tools, you establish a reliable way to debug your TypeScript code. Visual Studio can now understand the mapping, thanks to the inline source maps generated by Webpack.

Conclusion

Debugging TypeScript applications in an ASP.NET MVC 5 environment using Visual Studio 2019 and Webpack can indeed pose challenges. However, by properly configuring Webpack to generate source maps and following our workaround for setting breakpoints, you can regain control over your debugging sessions.

Feel free to refer back to this guide whenever you hit a snag, and happy coding!

Видео Fixing the Breakpoint Not Hit Issue in TypeScript with Visual Studio 2019 and Webpack канала vlogize