How to debug TypeScript in Chrome
Tags: typescript, webdev
Published: 2023-02-03 14:18:28

**Written by [Shalitha Suranga](https://blog.logrocket.com/author/shalithasuranga/)✏️**

A software bug is a programming error or the unexpected behavior of a software program. Debugging refers to the process of inspecting and removing bugs in software systems. Programmers use various techniques for debugging; some developers write outputs to the terminal, while others use debugger tools to execute and monitor source code. 

The Google Chrome web browser offers an inbuilt debugger with the DevTools module for debugging JavaScript. Chrome DevTools implements support for source maps and can inspect both Node.js and Deno debugger instances. So, whether you use TypeScript in a client-side app (i.e., a TypeScript-based React app) or in a server-side app, you can use Chrome for debugging. 

In this tutorial, I will explain how to debug client-side and server-side TypeScript code in Chrome. We’ll cover:

*   [How Chrome DevTools lets you debug TypeScript](#how-chrome-devtools-lets-you-debug-typescript)
*   [Debugging any TypeScript file: Manual configuration](#debugging-any-typescript-file-manual-configuration)
*   [Debugging in frontend frameworks: Automatic configuration](#debugging-frontend-frameworks-automatic-configuration)
*   [Integrating VS Code for frontend debugging](#integrating-vs-code-frontend-debugging)
*   [Debugging TypeScript backend code](#debugging-typescript-backend-code)
    *   [Debugging TypeScript-based Node.js apps](#debugging-typescript-based-node-js-apps)
    *   [Debugging Deno apps](#debugging-deno-apps)
*   [Integrating VS Code for backend debugging](#integrating-vs-code-backend-debugging)

## How Chrome DevTools lets you debug TypeScript <a name="how-chrome-devtools-lets-you-debug-typescript">

Web browsers have inbuilt support for JavaScript and WebAssembly , but  not for TypeScript. So, how can we debug TypeScript in Chrome if it doesn’t natively execute TypeScript? Chrome and all standard web browsers support processing JavaScript [source maps](https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html). 

A JavaScript source map typically maps a particular form of a specific JavaScript source code to a JavaScript source code the browser executes. For example, it’s hard to debug a minified JavaScript file in the browser, but if you use a source map, you can easily debug the readable JavaScript file while executing its minified version. Similarly, you can debug a TypeScript file when you run its transpiled JavaScript version in Chrome. 

The official TypeScript compiler, `tsc`, can generate source maps during the transpilation process, so now we can write TypeScript code, transpile to JavaScript along with a source map, and debug TypeScript code in the browser while executing the transpiled JavaScript code. 

Server-side runtimes like Node and [Deno](https://blog.logrocket.com/what-is-deno/), where we can run JavaScript/TypeScript, listen to Chrome DevTools debugger events via v8\. This is how we can debug server-side TypeScript code in Chrome!

## Debugging any TypeScript file: Manual configuration <a name="debugging-any-typescript-file-manual-configuration">

When you use frontend frameworks to build your apps, their TypeScript templates typically come with pre-included TypeScript compiler configurations and automatically generate source maps for you. But in some scenarios, we have to configure the TypeScript compiler, generate our own source maps, and manually link our transpiled TypeScript files using the HTML `script` tag. 

This is a great way to learn how to debug TypeScript in Chrome because that manual configuration and setup helps us understand the TypeScript debugging internals. Let’s prepare a development environment to debug any client-side TypeScript file in Chrome. 

First, create a new npm project in any directory you like, as follows:

```bash
npm init
# --- or ---
yarn init
```

Next, install the `typescript` package:

```bash
npm install typescript
# --- or ---
yarn install typescript
```

Now, generate the TypeScript compiler configuration file:

```bash
npx tsc --init
```

The default configuration won’t enable source map generation, so we need to edit the auto-generated configuration file. Uncomment the following line in `tsconfig.json` to enable source map generation:

```json
"sourceMap": true,
```

Add an npm script to generate JavaScript by modifying your `package.json`:

```json
"scripts": {
  "build": "npx tsc"
},
```

Now, we can use either the `npm run build` or `yarn build` command to transpile TypeScript files. We’ll debug the following TypeScript code:

```typescript
function sayHello(name: string): void {
    let message = `Hello ${name}!`;
    console.log(message);
    if(name == 'TypeScript') {
        console.log('.ts');
    }
    else if(name == 'JavaScript') {
        console.log('.js');
    }
}

sayHello('TypeScript');
sayHello('JavaScript');
```

Add the above code into `main.ts`. Next, use `main.js` in `index.html`:

```javascript
<script src="./main.js"></script>
```

Generate `main.js` and `main.js.map` (our source map) with the following command:

```bash
npm run build
# --- or ---
yarn build
```

Serve the web content in `http://localhost:3000` with the following command:

```bash
npx serve
```

The above code starts a static server (Vercel’s [serve](https://github.com/vercel/serve)) in port `3000`. Open the URL in Chrome, open the DevTools, and click the **Source** tab. You’ll see `main.ts` as follows: ![Opening a TypeScript source file in Chrome DevTools](https://blog.logrocket.com/wp-content/uploads/2023/01/opening-typescript-source-file-chrome-devtools.gif)

Try to add a breakpoint and reload the app. You can debug TypeScript just as you debug JavaScript in Chrome: ![Setting a breakpoint in a TypeScript source file](https://blog.logrocket.com/wp-content/uploads/2023/01/setting-breakpoint-typescript-source-file.gif)

Chrome loads the source map automatically, since the TypeScript compiler appends the source map filename to `main.js`:

```javascript
//# sourceMappingURL=main.js.map
```

The `debugger` keyword also works with TypeScript debugging. Add `debugger` after the `console.log(message);` statement and reload the app: ![Using the debugger keyword in a TypeScript file](https://blog.logrocket.com/wp-content/uploads/2023/01/using-debugger-keyword-typescript-file.gif)

For experimentation purposes, try removing the source map file (`main.js.map`) and debugging `main.ts`. The `main.ts` file will disappear from the source panel because TypeScript debugging works based on source maps. 

With this approach, it’s possible to debug TypeScript code bundled with either [webpack](https://blog.logrocket.com/tag/webpack/) or [Rollup](https://blog.logrocket.com/using-rollup-package-library-typescript-javascript/). You can enable debugging TypeScript in Chrome by adding an auto-generated source map to your web directory.

## Debugging in frontend frameworks: Automatic configuration <a name="debugging-frontend-frameworks-automatic-configuration">

Earlier, we learned how TypeScript debugging works in Chrome by using a manual configuration. But as we mentioned, almost all frontend frameworks/libraries offer pre-implemented TypeScript templates, which typically include compiler configurations to generate source maps. These make it so that when you run your app in developer mode, TypeScript debugging is automatically enabled in Chrome. 

Now, we’ll create a React app with Create React App’s [official TypeScript template](https://github.com/facebook/create-react-app/tree/main/packages/cra-template-typescript) to learn how to debug TypeScript apps built with modern frontend frameworks. Run the following command to create a new TypeScript-React app:

```bash
npx create-react-app my-app --template typescript
#--- or --- 
yarn create react-app my-app --template typescript
```

Now, add the following code to your `App.tsx` file:

```typescript
import React, { useState } from 'react';
import './App.css';

function App(): JSX.Element {
  const [message, setMessage] = useState('');

  function generateMessage(name: string): string {
    let message: string = `Hello ${name}!`;
    return message;
  }

  function handleClick(): void {
    setMessage(generateMessage('TypeScript'));
  }

  return (
    <div>
      <div>{message}</div>
      <button onClick={handleClick}>Say hello</button>
    </div>
  );
}

export default App;
```

The above code renders a greeting message when we click the **Say hello** button. Run the project with the following commands to start debugging TypeScript:

```bash
npm start
# --- or ---
yarn start
```

Assume that you need to set up a breakpoint for line 8 of `App.tsx`. Since we have multiple source files, we can easily navigate to `App.tsx` by pressing Control+P: ![Searching for a specific file in the Chrome debugger](https://blog.logrocket.com/wp-content/uploads/2023/01/searching-specific-file-chrome-debugger.gif)

Now, set up the breakpoint and click the button. The DevTools debugger works as expected for TypeScript: ![Setting a breakpoint for a TypeScript-based React app in Chrome](https://blog.logrocket.com/wp-content/uploads/2023/01/setting-breakpoint-typescript-based-react-app-chrome.gif)

Try to use the **Call stack** section to monitor TypeScript function calls: ![Inspecting TypeScript function names in Call stack](https://blog.logrocket.com/wp-content/uploads/2023/01/inspecting-typescript-function-names-call-stack.gif)

Every debugger feature works for TypeScript debugging because of source maps. The React scripts module does real-time TypeScript compilation, so you can fix TypeScript programming errors by checking Chrome or your terminal. 

Let’s send an integer to the `generateMessage` function just for experimental purposes:

```typescript
function handleClick(): void {
  setMessage(generateMessage(1));
}
```

Now, you will see TypeScript compilation errors on Chrome and the terminal: ![The React development environment shows TypeScript compilation issues](https://blog.logrocket.com/wp-content/uploads/2023/01/react-development-environment-shows-typescript-compilation-issues.gif)

All popular frontend frameworks, such as Angular, Vue, Svelte, etc., offer TypeScript development support and generate JavaScript source maps automatically. So, debugging TypeScript becomes really easy when using frontend framework tooling.

## Integrating VS Code for frontend debugging <a name="integrating-vs-code-frontend-debugging">

If you use VS Code to write code, you can use the editor UI as the debugger interface instead of Chrome DevTools. VS Code offers inbuilt support for debugging JavaScript/TypeScript via the [JavaScript debugger](https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug) extension, which comes pre-installed. 

Start your web development server (i.e., webpack development server) and launch Chrome with the following `launch.json` setup:

```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "name": "Chrome",
            "request": "launch",
            "url": "http://localhost:3000"
        }
    ]
}
```

When you press F5 and start debugging, you can set up breakpoints from the editor. For example, see how I debug `App.tsx`: ![Debugging a TypeScript-based React app with VS Code and Chrome](https://blog.logrocket.com/wp-content/uploads/2023/01/debugging-typescript-based-react-app-vs-code-chrome.gif)

## Debugging TypeScript backend code <a name="debugging-typescript-backend-code">

You can use TypeScript to write your Node.js and Deno backend projects. Let’s discuss how to use Chrome to debug them.

### Debugging TypeScript-based Node.js apps <a name="debugging-typescript-based-node-js-apps">

As with client-side TypeScript development, we’ll have to transpile TypeScript into JavaScript before executing the project with the Node.js runtime. Client-side JavaScript execution uses Chrome’s inbuilt v8 JavaScript engine, so we could directly use the DevTools debugger as we did before, but the Node.js runtime uses its own v8 instance, so it offers an inbuilt debugger tool as it can’t use Chrome’s debugger/JavaScript execution environment directly. 

Create a new npm project and a TypeScript configuration file (with source maps enabled) using the same steps we followed in client-side debugging. Next, add the following code to `main.ts`:

```typescript
function sayHello(name: string): void {
    let message: string = `Hello ${name}!`;
    console.log(message);
    if(name == 'TypeScript') {
        console.log('.ts');
    }
    else if(name == 'JavaScript') {
        console.log('.js');
    }
}

sayHello('TypeScript');
sayHello('JavaScript');
```

Add the following scripts to your `package.json` file:

```json
"scripts": {
  "build": "npx tsc",
  "debug": "node inspect main.js"
},
```

Generate the JavaScript file and source map:

```bash
npm run build
# --- or ---
yarn build
```

Next, start the Node.js debugger with the following command:

```bash
npm run debug
# --- or ---
yarn debug
```

The above npm script initializes the inbuilt Node.js debugger utility and starts listening to Chrome DevTools protocol messages via WebSockets. So, we can either use the inbuilt Node.js debugger utility via the command line or the GUI debugger via Chrome DevTools. 

Once you run the above command, the debugger automatically sets a breakpoint to the first executable statement, as follows: 

![The inbuilt Node.js debugger utility stopped at a breakpoint](https://blog.logrocket.com/wp-content/uploads/2023/01/inbuilt-node-js-debugger-utility-stopped-breakpoint.png) 

The inbuilt debugger doesn’t support TypeScript debugging because it doesn’t understand source maps — it is only a minimal debugger that comes with several commands. For example, you can use the following commands to set a breakpoint in line 5 and stop the code execution at the newly-added breakpoint:

```plaintext
sb(5)
c
```

You can check out all of the inbuilt debugger commands in the [official documentation](https://nodejs.org/api/debugger.html#command-reference). We won’t discuss the inbuilt debugger further, since our focus is on the Chrome debugger in this tutorial. 

Let’s debug this TypeScript project in Chrome. Run the project with the `debug` npm script and go to the following URL on Chrome:

```plaintext
chrome://inspect
```

Now, open the DevTools debugger GUI as follows: ![Opening the DevTools debugger for Node.js](https://blog.logrocket.com/wp-content/uploads/2023/01/opening-devtools-debugger-node-js.gif) 

You can debug the TypeScript file via the Chrome DevTools interface. The debugger utility reflects your debugging actions on the terminal. Look at the following preview:   

Earlier, the sample React project re-transpiled modified TypeScript code during code changes. You can do the same for server-side TypeScript projects with `tsc --watch` and [`nodemon`](https://blog.logrocket.com/configuring-nodemon-with-typescript/) or [`ts-node-dev`](https://github.com/wclr/ts-node-dev).

### Debugging Deno apps <a name="debugging-deno-apps">

Deno is a secure TypeScript runtime that we can use as an alternative to the Node.js runtime. Debugging TypeScript in Deno doesn’t require manual configuration the way TypeScript-based Node.js apps do, since Deno natively supports TypeScript. 

First, make sure that you already have Deno installed on your computer. If not, install the latest Deno runtime version according to the [official installation guide](https://deno.land/manual/getting_started/installation). 

Start the Deno debugger with the following command in the TypeScript-based Node.js project directory we created earlier:

```bash
deno run --inspect-brk main.ts
```

Then, open DevTools and start debugging: ![Debugging a TypeScript-based Node.js project in Chrome](https://blog.logrocket.com/wp-content/uploads/2023/01/debugging-typescript-based-node-js-project-chrome.gif)

## Integrating VS Code for backend debugging <a name="integrating-vs-code-backend-debugging">

You can press F5 and debug Node.js apps without extra extensions because the inbuilt debugger extension supports Node.js debugging. 

For Deno, you can either install the [Deno extension](https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno) for automatic `launch.json` configuration, or manually use the following `launch.json` setup:

```json
{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Deno",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceFolder}",
        "runtimeExecutable": "deno",
        "runtimeArgs": ["run", "--inspect-brk", "-A", "${file}"],
        "attachSimplePort": 9229
      }
    ]
 }
```

See how I debug a TypeScript file with VS Code: ![Debugging Deno apps in TypeScript with Chrome DevTools](https://blog.logrocket.com/wp-content/uploads/2023/01/debugging-deno-apps-typescript-with-chrome-devtools.gif)

## Conclusion

The main goal of debugging is to identify software bugs by monitoring source code execution and manually reviewing code. In most web development debugging activities, we can identify bugs by reading the code and using well-known debugger utility features. But, in some complex scenarios, we have to generate many test cases and use advanced debugger features. 

Most web developers use the standard Console API (i.e., `console.log`) for debugging purposes; others start with the Chrome DevTools debugger or VS Code’s debugger UI. When you start tracing a bug, start by analyzing the code from top to bottom. If you haven’t found the bug, then try to log runtime values if the logical flow is not complex. If the logical flow is complex, starting with Chrome debugger or VS Code debugger UI saves you time. 

In this tutorial, we discussed how to use Chrome for debugging your browser, Node.js, and Deno apps written in TypeScript. We also discussed how to use VS Code’s debugger UI. 

You can customize and use these debugging techniques according to your requirements and personal preferences. Similar to frontend frameworks’ TypeScript templates, you can use the [`node-typescript-boilerplate` template](https://github.com/jsynowiec/node-typescript-boilerplate) to create a TypeScript-based Node.js project faster with a pre-configured debugging environment. Or, you can create your own template with the steps we discussed in this tutorial.

---
## [LogRocket](https://lp.logrocket.com/blg/signup): Full visibility into your web and mobile apps

[![LogRocket signup](https://blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png)](https://lp.logrocket.com/blg/signup)

[LogRocket](https://lp.logrocket.com/blg/signup) is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.

[Try it for free.](https://lp.logrocket.com/blg/typescript-signup)