Debugging TypeScript Using VSCode and Chrome

TypeScript and Typings

If you haven’t worked with TypeScript before, let me tell you it’s a joy. It offers type safety and more code validation than writing in plain vanilla JavaScript. However, debugging it is not always easy though if you don’t have a way to do so. I’ve been using TypeScript a lot more recently, this is because an older application I am working on is moving towards using TypeScript. With the way that TypeScript transpiles into JavaScript using mappings, from what I have found the modern browser out of the box doesn’t have a way to debug TypeScript(as of yet anyway).

Visual Studio Code

I like using VSCode as my IDE, I also use Visual Studio Professional at work, but let’s not confuse them with each other. VSCode isn’t a full-blown IDE, in reality, it’s text editor with enhancements and certain plugins make it behave like an IDE. So keep that in mind when working with it. But for our purposes of debugging a front-end application, it works great. It’s light-weight but offers a lot of great extensions for development needs.

Debugger For Chrome

There are other debuggers out there available for use with VSCode, but I prefer using Chrome as my browser and this works nicely together. So, first of all, open up VSCode, and hit Ctrl + Shift + X, this will open up the VSCode Extensions. As a developer, you should learn your IDE’s hotkeys. In the search box, start typing in Debugger for Chrome, and install the extension. Easy Peasy.

Next, open up your TypeScript project and serve it up. I usually use port 8080, or 4200, but you can make that call. Look at the developer tools in Chrome using either Ctrl + Shft + I or F12. You’ll notice that there you aren’t able to see your TS files under sources. You can probably see your mapped JavaScript files, (TypeScript transpiles into JavaScript, but we are writing in TypeScript and don’t want to debug this). By the way, this is an Angular app I’m working on.

Setting Up Your Chrome Debugger Extension

Hit ‘Ctrl + Shft + D` in your open VSCode session. This opens up the debugger tab in VSCode. In the upper right of the tab is a gear icon.

Click it. This will open up thelaunch.json file in the directory of your VSCode install for your user. Should look like this

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Modify the url property, and put in the url and port number that you’re running your application on. In this instance I am using "url": "http://localhost:4200". Use npm start or whatever command you are using to run your app. You’re now set up to use the debugging tool in VSCode. Back in VSCode, you can hit F5 or there is the green little arrow if you must. This will start a new browser with your http://localhost:4200 url. Now, back in your code, you can set a breakpoint and be able to step into your code as you normally would. You can also set watches on arguments and variables, as well as you have the ability now to step through as you might in something like chrome developer tools.

Hope you find this useful, by the way, this extension works with JavaScript and not just TypeScript, but I usually used the built-in debugger in Chrome in the past. Using TypeScript is fun, and this makes it even more of a joy.