# Configuring JavaScript debugger

> **TL;DR**
> Required plugins:
>
>
>
> `JavaScript and TypeScript` -    the plugin is bundled with IntelliJ IDEA and enabled by default.
>
>
>
> `JavaScript Debugger` -     the plugin is available only in IntelliJ IDEA with the Ultimate subscription, where it is enabled by default.     The plugin is available only in IntelliJ IDEA with the Ultimate subscription.

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

IntelliJ IDEA provides a built-in debugger for your client-side JavaScript code.  The built-in debugger starts automatically when you [launch a debugging session](debugging-javascript-in-chrome.html#debugging_js_on_built_in_server).

To ensure successful debugging, it is enough to specify the built-in web server port and accept the default settings that IntelliJ IDEA suggests for other debugger options.

Procedure: Before you start

1. 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).

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

Procedure: Set the built-in web server port

IntelliJ IDEA has a built-in web server that can be used to debug your application in a web browser or preview your code in the IntelliJ IDEA built-in browser.   This server is always running and does not require any manual configuration.  Learn more from [Debug an application that is running on the
built-in server](debugging-javascript-in-chrome.html#debugging_js_on_built_in_server).

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 `Tools | Web Browsers and Preview`.

2. In the Built-in server area, specify the port where the built-in web server runs. By default, this port is set to the default IntelliJ IDEA port `63342` through which IntelliJ IDEA accepts connections from services. You can set the port number to any other value starting from 1024.

![Built-in server port](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_debugger_built_in_server_port.png)

## Customize the default debugger configuration

Procedure: Suppress calls

1. Open settings by pressing `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 navigate to `Tools | Web Browsers and Preview`.

2. Suppress calls to the files on the built-in server from other computers or from outside IntelliJ IDEA by clearing the Can accept external connections or the Allow unsigned requests checkbox respectively.

![Suppress external calls](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_debugger_suppress_external_calls.png)

Procedure: Choose the way to remove breakpoints

By default, you can toggle breakpoints by clicking the left mouse button. To change this behavior:

1. Open settings by pressing `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 navigate to `Build, Execution, Deployment | Debugger`.

2. In the Remove breakpoint area, select the appropriate option.

![Remove breakpoints](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ij_js_debugger_remove_breakpoints.png)

Procedure: Specify scripts to skip

By default, the debugger does not step only into library scripts. To expand the suppression list:

1. Open settings by pressing `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 navigate to `Build, Execution, Deployment | Debugger | Stepping`.

2. In the JavaScript area, select Do not step into scripts checkbox and add the URL addresses to skip using ![the Add button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg) and ![the Remove button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.remove.svg).

![JavaScript debugger: skip scripts](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_debugger_stepping.png)

Procedure: Advanced options

* Open settings by pressing `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 navigate to `Build, Execution, Deployment | Debugger | Data Views`.

Enable or disable  [Inline Debugging](examining-suspended-program.html#inline-view), specify when you want to see tooltips with object values and [expressions evaluation results](examining-suspended-program.html#evaluating-expressions), and so on.

![JavaScript debugger: Data views](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_debugger_data_views.png)

* Open settings by pressing `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 navigate to `Build, Execution, Deployment | Debugger | Data Views | JavaScript`.

Specify whether you want object properties to be shown in object nodes. If so, specify the properties. Use ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg) and ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.remove.svg) to manage the list of properties.

![Properties to show on object nodes](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_debugger_object_node.png)

## Start a debugging session with your preferred Chrome user data

You may notice that your debugging session starts in a new window with a custom [Chrome user data](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md) instead of your own, habitual, one. As a result, the window looks unusual, for example, your bookmarks, the browser history, and the extensions are missing, which altogether breaks your development experience. That happens because IntelliJ IDEA uses the [Chrome Debugging Protocol](https://nodejs.org/api/debugger.html#debugger_v8_inspector_integration_for_node_js) and runs Chrome with the `--remote-debugging-port` option. However, if Chrome is already started, a debugging port can't be opened for any new or existing Chrome instance that has the same user data directory. Therefore, IntelliJ IDEA always starts a debugging session in a new window with a custom user data directory.

To open a new Chrome instance with your familiar look-and-feel, configure Chrome in IntelliJ IDEA to start with your user data directory.

> **Note:**
> In this case, before starting a debugging session, always make sure that Chrome is not already running with your user data directory. Otherwise, Chrome opens a new tab in the existing process with your user data directory, and, as a result, IntelliJ IDEA debugger fails to connect to the application and the debugging session does not start.

![Custom Chrome user data](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_debugger_custom_chrome_user_data.animated.gif)

Procedure: Configure Chrome in IntelliJ IDEA to start with your preferred Chrome user data

1. Save your preferred [Chrome
user data](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md) on your computer in a separate custom directory different from the [Chrome default user data
directory](https://chromium.googlesource.com/chromium/src/+/main/docs/user_data_dir.md#Default-Location).

You need to save your preferred user data in a separate custom directory because Chrome 136 and later does not support debugging in the default user directory. Learn more from the [Chrome official
website](https://developer.chrome.com/blog/remote-debugging-port).

2. 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 `Tools | Web Browsers and Preview`.

3. To create a new Chrome configuration, click ![Add](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg). A new item appears in the list. In the Path field, specify the path to the Chrome installation folder.

4. Select the new configuration and click the Edit button (![Edit](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.edit.svg)).

5. In the Chrome Settings dialog, select the Use custom user data directory checkbox and specify the path to the custom directory with your preferred user data.

If you have several [user data
profiles](https://support.google.com/chrome/answer/2364824), each of them is stored in a separate subdirectory. To use a profile, specify it in the Command line options field as follows:

```BASH
--profile-directory="<profile_to_use>"
```

![Specify a custom profile subdirectory](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_debugger_custom_chrome_user_data_specify_profile_subdirectory.png)

6. Mark your Chrome browser configuration default as described in [Web Browsers](configuring-third-party-tools.html#web-browsers). Do not forget to select the necessary browser from the Browser list when [creating a
run/debug configuration](debugging-javascript-in-chrome.html#create_js_debug_configuration).

> **Tip:**
> Alternatively, always choose this Chrome browser configuration from the Browser list.

## See also

### Procedures

[Debug code](debugging-code.html) [Debug tool window](debug-tool-window.html)

### Reference

[Run/Debug Configuration: JavaScript Debug](run-debug-configuration-javascript-debug.html)