# Running and debugging TypeScript

> **TL;DR**
> Required plugins:
>
>
>
> `JavaScript and TypeScript` -    the plugin is bundled with IntelliJ IDEA and enabled by default.
>
>
>
> `JavaScript Debugger`, `Node.js` -    install the plugins on the Settings | Plugins page, tab Marketplace.     The plugins are available only in IntelliJ IDEA with the Ultimate subscription.

With IntelliJ IDEA, you can run and debug both server-side TypeScript code running on Node.js and client-side TypeScript code running in the browser.

> **Note:**
> Debugging of TypeScript client-side code is only supported in [Google Chrome](http://www.google.com/chrome/) and in other [Chromium-based browsers](https://www.chromium.org/).
>
>
>
> For more information about running and debugging TypeScript with Angular, refer to [Run an Angular
> application](run-and-debug-angular-applications.html#angular_running_and_debugging_run) and [Debug
> Angular applications](run-and-debug-angular-applications.html#angular_running_and_debugging_debug).

## Run and debug server-side TypeScript

With IntelliJ IDEA, you can run and debug server-side TypeScript code without previously compiling it into JavaScript.

### Before you start

Procedure:

1. Make sure you have [Node.js](http://nodejs.org/) 24 or higher on your computer.

2. Make sure the  JavaScript and TypeScript bundled plugin is enabled in the settings.  Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Plugins`.  Click the Installed tab. In the search field, type JavaScript and TypeScript. For more information about plugins, refer to [Managing plugins](managing-plugins.html).

3. Install the Node.js and JavaScript Debugger plugins on the Settings | Plugins page, tab Marketplace, as described in [Installing plugins from
JetBrains Marketplace](managing-plugins.html#install_plugin_from_repo).     The plugins are available only in IntelliJ IDEA with the Ultimate subscription.

### Run server-side TypeScript code

You can run server-side TypeScript from the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) , from the editor, or from the Run widget.

From the Project tool window:

Procedure:

1. Open the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) .

2. Right-click the TypeScript file to run or the starting file of your application.

3. From the context menu, select `Run <TypeScript file name>`.

![Run server-side TypeScript from the Project tool window](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_run_single_file_project_tw.animated.gif)

From the editor:

Procedure:

1. In the editor, open the TypeScript file to run or the starting file of your application

2. Right-click anywhere in the editor and then select `Run <TypeScript file name>` from the context menu.

![Run server-side TypeScript from the editor](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_run_single_file_editor.animated.gif)

From the Run widget:

Procedure:

1. In the editor, open the TypeScript file to run or the starting file of your application

2. From the Run widget on the toolbar, select Current file and click ![the Run icon](https://resources.jetbrains.com/help/img/idea/2026.2/app-client.expui.run.run.svg) next to it.

Alternatively, from the Run widget select a [previously
created run/debug configuration](#ws_ts_server_side_run_generated_rc) and click ![the Run icon](https://resources.jetbrains.com/help/img/idea/2026.2/app-client.expui.run.run.svg) next to it.

![Run server-side TypeScript from the Run widget](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_run_single_file_widget.animated.gif)

#### Run TypeScript scratch files

To run a scratch file, besides the above-mentioned methods, you can also click ![the Run icon](https://resources.jetbrains.com/help/img/idea/2026.2/app-client.expui.run.run.svg) in the gutter and select the required action from the list.

![Run a TypeScript scratch file](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_run_single_file_scratch.animated.gif)

#### Auto-generated temporary run/debug configuration

No matter which way to run server-side TypeScript code you might choose, IntelliJ IDEA creates a temporary run/debug configuration of the type Node.js which you can save, edit, and reuse for running and debugging.

![Node.js run/debug configuration for running and debugging server-side TypeScript](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_server_side_node_rc.png)

Learn more from [Run/debug configurations](run-debug-configuration.html).

### Debug server-side TypeScript code

You can debug server-side TypeScript from the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) , from the editor, or from the Run widget.

From the Project view:

Procedure:

1. Set the [breakpoints](using-breakpoints.html) where necessary.

2. Open the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) .

3. Right-click the TypeScript file to debug or the starting file of your application.

4. From the context menu, select `Debug <TypeScript file name>`.

![Run server-side TypeScript from the Project tool window](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_debug_single_file_project_tw.animated.gif)

From the editor:

Procedure:

1. Set the [breakpoints](using-breakpoints.html) where necessary.

2. In the editor, open the TypeScript file to debug or the starting file of your application

3. Right-click anywhere in the editor and then select `Debug <TypeScript file name>` from the context menu.

![Debug server-side TypeScript from the editor](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_debug_single_file_editor.animated.gif)

From the Run widget:

Procedure:

1. Set the [breakpoints](using-breakpoints.html) where necessary.

2. In the editor, open the TypeScript file to debug or the starting file of your application. Then from the Run widget on the toolbar select Current file and click ![the Debug icon](https://resources.jetbrains.com/help/img/idea/2026.2/app-client.expui.run.debug.svg) next to it.

Alternatively, from the Run widget select a [previously
created run/debug configuration](#ws_ts_server_side_run_generated_rc) and click ![the Debug icon](https://resources.jetbrains.com/help/img/idea/2026.2/app-client.expui.run.debug.svg) next to it.

![Debug server-side TypeScript from the Run widget](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_debug_single_file_widget.animated.gif)

#### Debug TypeScript scratch files

To debug a scratch file, besides the above-mentioned methods, you can also click ![the Run icon](https://resources.jetbrains.com/help/img/idea/2026.2/app-client.expui.run.run.svg) in the gutter and select the required action from the list.

![Run a TypeScript scratch file](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_debug_single_file_scratch.animated.gif)

### Use ts-node

If you need to run or debug single TypeScript files with Node.js, you can use [ts-node](https://www.npmjs.com/package/ts-node) instead of compiling your code as described in [Compiling TypeScript into
JavaScript](#ws_ts_compile).

Procedure: Install ts-node

* In your command-line shell or in the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)))  , type:

`npm install --save-dev ts-node`

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

1. Go to `Run | Edit Configurations`. Alternatively, select Edit Configurations from the Run widget on the toolbar.

![Open the Edit Configurations dialog](https://resources.jetbrains.com/help/img/idea/2026.2/ws_client_ts_run_config_create.png)

In the Edit Configurations dialog that opens,

click the Add button (![the Add button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.add.svg)) on the toolbar and select Node.js from the list.  The [Run/Debug Configuration: Node.js](run-debug-configuration-node-js.html) dialog opens.

2. In the Node Parameters field, add `--require ts-node/register`.

3. Specify the Node.js runtime to use.

If you choose the Project alias, IntelliJ IDEA will automatically use the project default interpreter from the Node runtime field on the [JavaScript Runtime](javascript-runtime.html) page . In most cases, IntelliJ IDEA detects the project default runtime and fills in the field itself.

You can also choose another configured local or remote interpreter or click ![the Browse button](https://resources.jetbrains.com/help/img/idea/2026.2/app.general.ellipsis.svg) and configure a new one.

4. In the File field, specify the TypeScript file to run or debug. Depending on your workflow, you can do that explicitly or using a [macro](built-in-macros.html).

* If you are going to always launch the same TypeScript file, click ![the Browse button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.open.svg) and select this file in the dialog that opens. By default, the run/debug configuration gets the name of the selected file.

* If you need to launch different files, type `$FilePathRelativeToProjectRoot$`. With this [macro](built-in-macros.html), IntelliJ IDEA will always launch the file in the active editor tab.

![Custom run-debug configuration for ts-node](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_debug_ts_node.png)

5. If necessary, specify any additional parameters for `ts-node` (for example, `--project tsconfig.json`) in the  Application parameters  field.

6. Save the configuration.

Procedure: Run server-side TypeScript with ts-node

Depending on the way you specified your TypeScript file in the run/debug configuration, do one of the following:

* If you typed the filename explicitly, select the required configuration from the Run widget on the toolbar and click ![the Run button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.run.run.svg) next to the list or press `Shift+F10` (Windows), `⌃ R` (macOS), `⇧ F10` (IntelliJ IDEA Classic (macOS)), `⌥ ⇧ R` (macOS System Shortcuts), `Shift+F10` (XWin), `Shift+F10` (GNOME), `Shift+F10` (KDE), `Shift+F10` (Emacs), `Shift+F10` (Sublime Text), `Shift+F10` (Sublime Text (macOS)), `F6` (NetBeans), `Ctrl+F5` (Visual Studio), `⌃ F5` (Visual Studio (macOS)), `Alt+Shift+X` (Eclipse), `⌘ ⇧ F11` (Eclipse (macOS)).

* If you specified a macro, open the TypeScript file to run in the editor, select the [newly created configuration](#ws_ts_run_debug_directly_create_node_config) from the Run widget on the toolbar, and click ![the Run button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.run.run.svg) or press `Shift+F10` (Windows), `⌃ R` (macOS), `⇧ F10` (IntelliJ IDEA Classic (macOS)), `⌥ ⇧ R` (macOS System Shortcuts), `Shift+F10` (XWin), `Shift+F10` (GNOME), `Shift+F10` (KDE), `Shift+F10` (Emacs), `Shift+F10` (Sublime Text), `Shift+F10` (Sublime Text (macOS)), `F6` (NetBeans), `Ctrl+F5` (Visual Studio), `⌃ F5` (Visual Studio (macOS)), `Alt+Shift+X` (Eclipse), `⌘ ⇧ F11` (Eclipse (macOS)).

IntelliJ IDEA shows the output in the Run tool window.

Procedure: Debug server-side TypeScript with ts-node

1. In the TypeScript file to debug, set the [breakpoints](using-breakpoints.html) as necessary.

2. Depending on the way you specified your TypeScript file in the run/debug configuration, do one of the following:

* If you typed the filename explicitly, select the required configuration from the Run widget on the toolbar and click ![the Debug button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.run.debug.svg) or press `Shift+F9` (Windows), `⌃ D` (macOS), `⇧ F9` (IntelliJ IDEA Classic (macOS)), `⌥ ⇧ D` (macOS System Shortcuts), `Shift+F9` (XWin), `Shift+F9` (GNOME), `Shift+F9` (KDE), `Shift+F9` (Emacs), `Shift+F9` (Sublime Text), `⌃ D` (Sublime Text (macOS)), `Ctrl+F5` (NetBeans), `Alt+F5` (Visual Studio), `⌥ F5` (Visual Studio (macOS)), `Alt+Shift+D` (Eclipse), `⌘ F11` (Eclipse (macOS)).

* If you specified a macro, open the TypeScript file to debug in the editor, select the [newly created configuration](#ws_ts_run_debug_directly_create_node_config) from the Run widget and click ![the Debug button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.run.debug.svg) or press `Shift+F9` (Windows), `⌃ D` (macOS), `⇧ F9` (IntelliJ IDEA Classic (macOS)), `⌥ ⇧ D` (macOS System Shortcuts), `Shift+F9` (XWin), `Shift+F9` (GNOME), `Shift+F9` (KDE), `Shift+F9` (Emacs), `Shift+F9` (Sublime Text), `⌃ D` (Sublime Text (macOS)), `Ctrl+F5` (NetBeans), `Alt+F5` (Visual Studio), `⌥ F5` (Visual Studio (macOS)), `Alt+Shift+D` (Eclipse), `⌘ F11` (Eclipse (macOS)).

## Run and debug client-side TypeScript

Because browsers process only JavaScript, you have to [compile your client-side TypeScript code](#ws_ts_compile) before running or debugging it.

Compilation can also produce [source
maps](https://code.tutsplus.com/tutorials/source-maps-101--net-29173) that set correspondence between your TypeScript code and the JavaScript code that is actually executed.

### Compile TypeScript into JavaScript

You can [invoke compilation via a tsc script](#ts_compiler_compile_code_manually) or configure a build process, for example, with [webpack](https://webpack.js.org/), [babel](https://babeljs.io/), or another tool. Learn more from [webpack with TypeScript](https://webpack.js.org/guides/typescript/) and [Babel with
TypeScript](https://www.typescriptlang.org/docs/handbook/babel-with-typescript.html).

> **Warning:**
> It is not recommended that you invoke compilation with the Compile actions from the TypeScript widget on the Status bar, or from the context menu of a file in the editor or in the Project tool window.

#### Before you start

Procedure:

1. Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Languages & Frameworks | TypeScript`.

2. Make sure the TypeScript Language Service checkbox is selected.

#### Create and configure tsconfig.json

By default, the built-in compiler does not create source maps that will let you step through your TypeScript code during a debugging session. The compiler also by default processes either the TypeScript file in the active editor tab or all TypeScript files from the current project.

With a `tsconfig.json` file, you can modify this default behavior to generate source maps and compile only files from a custom scope.

Procedure: Create a tsconfig.json file

1. In the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) , select the folder where your TypeScript code is (most often it is the project root folder) and then select `New | tsconfig.json File` from the context menu.

2. To generate source maps during compilation, make sure the `sourceMap` property is set to `true`.

3. Optionally:

To override the default compilation scope, which is the entire project, add the `files` property and type the names of the files to process in the following format:

```JSON
"files" : ["<file1.ts>","<file2.ts>"],
```

Procedure: Configure the scope for tsconfig.json

You may need to apply different TypeScript configurations to different files in your project.

It is not a problem if you arrange your sources so that all the files in each folder should be processed according to the same configuration. In such case you only have to create a separate `tsconfig.json` for each folder.

However, if you want to apply different rules to the files that are stored in the same folder, you need to create several configuration files and configure scopes for them.

1. Create as many `tsconfig*.json` configuration files as you need.

2. Open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | File Types`, and make sure the names of all these files match the patterns from the Typescript config file name pattern list.

If necessary, add patterns as described in [Add file type
associations](creating-and-registering-file-types.html#create-new-file-type).

![File Types: tsconfig.json patterns](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_config_pattern_list.png)

3. In each `*tsconfig*.json`, specify the files to be processed according to its settings:

* List the file names explicitly in the `files` field: ```JSON "files" : ["<file1.ts>","<file2.ts>"], ``` Learn more from [TSConfig Reference: Files](https://www.typescriptlang.org/tsconfig#files).

* In the `include` field, specify the file names or patterns: ```JSON "include" : ["<pattern1>, <pattern2>"] ``` Learn more from [TSConfig Reference: Include](https://www.typescriptlang.org/tsconfig#include).

* To skip some files whose names match the patterns listed in the `include` field, list their names or patterns in the `exclude` field: ```JSON "exclude" : ["<pattern3>, <pattern4>"] ``` Learn more from [TSConfig Reference: Exclude](https://www.typescriptlang.org/tsconfig#exclude).

> **Note:**
> IntelliJ IDEA doesn't use just the nearest `tsconfig.*.json` (from the list of files recognized as `Typescript config` file type). IntelliJ IDEA uses the nearest `tsconfig.*.json` in which a particular file is somehow specified – either explicitly in the `files` field or through patterns in the `include` and `exclude` fields.

#### Compile TypeScript code

You can [invoke compilation via a tsc script](#ts_compiler_compile_code_manually) or configure a build process, for example, with [webpack](https://webpack.js.org/), [babel](https://babeljs.io/), or another tool. Learn more from [webpack with TypeScript](https://webpack.js.org/guides/typescript/) and [Babel with
TypeScript](https://www.typescriptlang.org/docs/handbook/babel-with-typescript.html).

[Video](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_toolwindow_compilation_errors.mp4)

Procedure: Compile TypeScript with a tsc script

1. In your `package.json` file, add the following line to the `scripts` section:

* `tsc` - to compile all files in the scope that is defined in `tsconfig.json`.

* `tsc <path to a file>` - to compile a specific file.

* `tsc <glob pattern>` - to compile all files that meet the pattern, for example, `tsc production/src/*.ts`.

Learn more from the [TypeScript
official website](https://www.typescriptlang.org/docs/handbook/compiler-options.html).

2. Click ![the Run icon](https://resources.jetbrains.com/help/img/idea/2026.2/app-client.expui.gutter.run.svg) in the gutter next to the script and select Run '<script name>'.

Compilation errors are reported in the Run tool window.

Procedure: Automatic compilation on changes

> **Note:**
> It is strongly recommended that you use [compilation with a tsc
> script](#ts_compiler_compile_code_manually) instead.

* Open  the Languages & Frameworks | TypeScript settings page `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))  and select the Recompile on changes checkbox.

### Run a client-side TypeScript application

Because browsers process only JavaScript, you have to compile your client-side TypeScript code before running it.

#### Run client-side TypeScript

Procedure:

1. [Compile the TypeScript code into
JavaScript](#ws_ts_compile).

2. In the editor, open the HTML file with a reference to the generated JavaScript file. This HTML file does not necessarily have to be the one that implements the starting page of the application.

3. Do one of the following:

* Choose `View | Open in Browser` from the main menu or press `Alt+F2` (Windows), `⌥ F2` (macOS), `⌥ F2` (IntelliJ IDEA Classic (macOS)), `⌥ F2` (macOS System Shortcuts), `Alt+F2` (XWin), `Alt+F2` (GNOME), `Alt+F2` (KDE), `Alt+F2` (Emacs), `Alt+F2` (Sublime Text), `Alt+F2` (Sublime Text (macOS)), `Alt+F2` (NetBeans), `Alt+F2` (Visual Studio), `⌥ F2` (Visual Studio (macOS)), `Alt+F2` (Eclipse), `⌥ F2` (Eclipse (macOS)). Then select the desired browser from the list.

* Hover over the code to show the browser icons bar: ![the IntelliJ IDEA icon](https://resources.jetbrains.com/help/img/idea/2026.2/product.idea.svg) ![Chrome](https://resources.jetbrains.com/help/img/idea/2026.2/app.xml.browsers.chrome.svg) ![Firefox](https://resources.jetbrains.com/help/img/idea/2026.2/app.xml.browsers.firefox.svg) ![Safari](https://resources.jetbrains.com/help/img/idea/2026.2/app.xml.browsers.safari.svg) ![Opera](https://resources.jetbrains.com/help/img/idea/2026.2/app.xml.browsers.opera.svg) ![Internet Explorer](https://resources.jetbrains.com/help/img/idea/2026.2/app.xml.browsers.explorer.svg) ![Edge](https://resources.jetbrains.com/help/img/idea/2026.2/app.xml.browsers.edge.svg) . Click the icon that indicates the desired browser.

### Debug client-side TypeScript

> **Note:**
> Debugging of TypeScript client-side code is only supported in [Google Chrome](http://www.google.com/chrome/) and in other [Chromium-based browsers](https://www.chromium.org/).

Because browsers process only JavaScript, you have to [compile your client-side
TypeScript code](#ws_ts_compile) before debugging it.

During compilation, there can also be generated [source maps](https://code.tutsplus.com/tutorials/source-maps-101--net-29173) that set correspondence between your TypeScript code and the JavaScript code that is actually executed. As a result, you can set breakpoints in your TypeScript code, launch the application, and then step through your original TypeScript code, thanks to generated sourcemaps.

If your application is running on the built-in IntelliJ IDEA server, refer to [Running a client-side TypeScript application](#ws_ts_run) above, you can also debug it in the same way as [JavaScript running on the built-in server](debugging-javascript-in-chrome.html#debugging_js_on_built_in_server).

![Debug client-side TypeScript on the built-in server](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_debug_client_built_in_server.animated.gif)

#### Debug a TypeScript application running on an external web server

Most often, you may want to debug a client-side application running on an external development web server, for example, powered by Node.js.

![Debug client-side TypeScript on an external server](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_debug_client_external_server.animated.gif)

Procedure:

1. Configure the built-in debugger as described in [Configuring JavaScript debugger](configuring-javascript-debugger.html).

2. To enable source maps generation, open your `tsconfig.json` and set the `sourceMap` property to `true`, as described in [Create a tsconfig.json file](#ts_create_tsconfig_json).

3. [Configure and set breakpoints](using-breakpoints.html) in the TypeScript code.

4. Run the application in the development mode. Often you need to run `npm start` for that.

Most often, at this stage TypeScript is compiled into JavaScript and source maps are generated. For more information, refer to [Compile TypeScript into
JavaScript](#ws_ts_compile).

When the development server is ready, copy the URL address at which the application is running in the browser - you will need to specify this URL address in the run/debug configuration.

5. Go to `Run | Edit Configurations`. Alternatively, select Edit Configurations from the Run widget on the toolbar.

![Open the Edit Configurations dialog](https://resources.jetbrains.com/help/img/idea/2026.2/ws_client_ts_run_config_create.png)

In the Edit Configurations dialog that opens,    click the Add button (![the Add button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.add.svg)) on the toolbar and select JavaScript Debug from the list.

In the [Run/Debug Configuration: JavaScript Debug](run-debug-configuration-javascript-debug.html) dialog that opens, specify the URL address at which the application is running.

This URL can be copied from the address bar of your browser as described in Step 3 above.

![Debug client-side TypeScript on an external server: run configuration](https://resources.jetbrains.com/help/img/idea/2026.2/ws_ts_debug_client_external_server_rc.png)

6. From the Run widget list on the toolbar, select the newly created  configuration and click ![the Debug button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.run.debug.svg) next to it.  The URL address specified in the run configuration opens in the browser and the [Debug tool window](debug-tool-window.html) appears.

You may need to refresh the page in the browser to get the controls in the Debug tool window available.

7. In the Debug tool window,   proceed as usual: [step through the program](stepping-through-the-program.html),  [stop
and resume](starting-the-debugger-session.html#pause-resume)  program execution, [examine it when suspended](examining-suspended-program.html), explore the call stack and variables, set watches, evaluate variables, [view actual HTML DOM](viewing-actual-html-dom.html), and so on.

To ignore source maps and step through the actually executed code, press ![the Disable Source Maps toggle button](https://resources.jetbrains.com/help/img/idea/2026.2/sourceMapDisable.png) on the toolbar of the Debug tool window.

## See also

### Procedures

[HTML](editing-html-files.html) [TypeScript](typescript-support.html)

### Reference

[Web Browsers and Preview](settings-tools-web-browsers.html)