how to debug typescript files in visual studio code

Former .NET developer who always liked to code in JavaScript in his free time. Currently, Bartłomiej is a Node.js developer who now is coding in JavaScript both professionally and in his spare time. Also, he really likes swimming and playing some Nintendo games. In the previous article, I covered how to navigate the code while debugging, so if you haven’t read it yet, now’s a good time to catch up.

Depending on your workflow, you can do that explicitly or using a macro.

VSCode debug config #

Configure and set breakpoints in the TypeScript code. We’ll create a tiny web application to show client-side debugging in action. I have included 2 configurations, one for debugging with Chrome and the other for Edge. They are both essentially the same and just launch a different browser. I recently asked a developer working with VueJS how they do debugging and they told me console.log. Not wanting to go back to the dark ages of development I went and found the solution myself.

With this macro, WebStorm will always launch the file in the active editor tab. Perform the steps that will trigger the execution of the code with the breakpoints.

Running and debugging TypeScript

Instead, you can automatically attach the debugger to the any ts-node or node command you run from the command line. This will create a launch.json file in a .vscode folder with default values detected in your project. In VS Code select the Run and Debug button on the left and click the Run and Debug button. If you don’t see this button it probably means that you already have a launch.json file defined. Instead a cog will appear at the top to edit the existing settings. Create a file called vue.config.js in the root of your solution and paste the following into it. This creates the mapping for the debugger to map compressed files back to the original.

• After setting the breakpoint, you can start the debugger and trace the execution of the code.
• // Workspace relative or absolute path to the working directory of the program being debugged.
• That’s where the magic is supposed to be, isn’t it?
• It is important to set the sourceMap-property to true.

TypeScript debugging supports JavaScript source maps. To generate source maps for your TypeScript files, compile with the –sourcemap option or set the sourceMap property in the tsconfig.json file to true. Now you can open the debug view (Ctrl-Shift-D) of VS Code. By clicking to the left of a line number you can add a new breakpoint. Press the green debug button with the selected launch configuration (“Build project”) or simply press the F5-key on your keyboard to start debugging. I tried to make ts-node work for this setup, and made good progress.

Create a custom Node.js run/debug configuration for ts-node

In this example, we’ve blocked them from being used in node_modules to make mapping faster. If you are going to always launch the same TypeScript file, click and select this file in the dialog that opens. By default, the run/debug configuration gets the name of the selected file. The URL address specified in the run configuration opens in the chosen browser and the Debug tool window appears.

You can also skip the next steps and simply clone this Github repository. If you need to run or debug single TypeScript files with Node.js, you can use ts-node instead of compiling your code as described in Compiling TypeScript into JavaScript. Before running or debugging, your TypeScript code has to be compiled into JavaScript, as described in Compiling TypeScript into JavaScript. Most often, at this stage TypeScript is compiled into JavaScript and source maps are generated, see Compiling TypeScript into JavaScript for details.

Custom software development Build or scale a competitive product ready for future growth and millions of users. Agile development teams Work with product experts with the know-how tested in 7+ industries.

• The debugger statement invokes any available debugging functionality, such as setting a breakpoint.
• In the editor, open the HTML file with a reference to the generated JavaScript file.
• I started using atom-typescript and had some better luck because of their “fileGlob” support.
• We’ll create a tiny web application to show client-side debugging in action.

This documentation explains how you can debug your Next.js frontend and backend code with full source maps support using either the VS Code debugger or Chrome DevTools. To start your debugging you still need to start the application from a terminal with npm run serve. The debugging experience is more like Visual Studios attaching to a process rather than running application by clicking start. The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect. ResolveSourceMapLocations – a value that specifies in which directories the debugger can use the mapping files.