Debugging a basic TypeScript app in Visual Studio Code

I’m learning TypeScript and one of the most important ‘to-do’s when learning a new language is setting up your debug environment or debugging.

Here’s how to get a bare-bones app (e.g. a helloworld.ts file that compiles down to a helloworld.js file in the workspace folder) setup for debugging. Pre-requisite to following the steps below: you have already setup your computer to run a TypeScript application successfully.

  1. Create a folder for your TypeScript HelloWorld application and initialize the folder using tsc –init (this creates the tsconfig.json file).
  2. By default (version 1.30.1), the tsconfig.json file generated does not enable source maps. A source map is a mapping from the TypeScript file to the generated javascript file (typescript transpiles to javascript). As a result, in order to debug the TypeScript code, the source map attribute needs to be true.
  3. To enable debugging via VS Code, you’ll need to create configuration for that. VS Code uses a special file called launch.json to instruct the IDE on how to debug. Per the official Microsoft documentation on debugging, you simply create one via the IDE by clicking on the Configure gear icon on the Debug view top bar. You’re not done yet though; the autogenerated launch.json file requires the following modifications:
    1. an absolute path to the TypeScript file to be debugged,
    2. absolute paths to the generated JavaScript files after transpilation from TypeScript, and
    3. setting the sourceMaps attribute to true (it’s not clear to me if this is enabled by default but better to be explicit here).
  4. Here’s an example of what my debug configuration looks like after step 3:
    {
    “type”: “node”,
    “request”: “launch”,
    “name”: “Launch Program”,
    “program”: “${workspaceFolder}/helloworld.ts”,
    “sourceMaps”: true,
    “outFiles”: [“${workspaceFolder}/helloworld.js”]
    }
  5. The workspaceFolder is a predefined variable you can use to construct full paths to files. In my view, using this would be preferred to hard-coding the absolute paths. Here’s the list of other predefined variables for further exploration.
  6. Now, you can add some arbitrary breakpoints to your TypeScript code, launch the configuration you just created, and observe that your breakpoints in the TypeScript file are being hit!
  7. Some issues I ran into:
    1. The value for the “program” option was incorrect i.e. pointing to a file that didn’t actually existing.
      program-does-not-exist
      Attribute ‘program’ does not exist

      I feel this error could be more friendly i.e. indicating the file could not be found or something similar. So if you get this error, verify that you don’t have a typo in the file name.

    2. if you use relative paths for the file location, the error you’ll receive contains a lot of guidance on how to rectify this!

      program-is-not-absolute
      Attribute ‘program’ is not absolute

 

And that’s about it! Here’s my barebones helloworld TypeScript app in github and happy debugging!

 

Advertisements

One thought on “Debugging a basic TypeScript app in Visual Studio Code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.