# Configuring JavaScript debugger > For the complete documentation index, see [llms.txt](https://www.jetbrains.com/help/idea/2026.3/llms.txt). > **TL;DR** > Available only in IntelliJ IDEA with the Ultimate subscription: [download](https://www.jetbrains.com/idea/download/) to try or [explore the features](https://www.jetbrains.com/products/compare/?product=idea&product=idea-ult). > > > > > > Required plugins: > > > > `JavaScript and TypeScript`, `JavaScript Debugger` - the plugins are bundled with IntelliJ IDEA and enabled by default. > **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. ## Before you start Procedure: 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` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Plugins`. In the search field, type JavaScript and TypeScript. For more information about plugins, refer to [Managing plugins](managing-plugins.html). 2. Make sure the JavaScript Debugger 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` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Plugins`. In the search field, type JavaScript Debugger. For more information about plugins, refer to [Managing plugins](managing-plugins.html). ## Set the built-in web server port Procedure: 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` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `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/help/img/idea/2026.3/js_debugger_built_in_server_port.png) ## Customize the default debugger configuration ### Suppress calls Procedure: 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` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `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/help/img/idea/2026.3/js_debugger_suppress_external_calls.png) ### Choose the way to remove breakpoints Procedure: 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` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `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/help/img/idea/2026.3/ij_js_debugger_remove_breakpoints.png) ### Specify scripts to skip Some scripts (for example, methods of standard Java classes like `System`) are skipped by Step into as you normally might not need to debug them. This list can be fine-tuned on the `Build, Execution, Deployment | Debugger | Stepping` page of 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` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))). Procedure: 1. Open the run/debug configuration to launch a debugging session with and switch to the Stepping tab. 2. To suppress automatic Smart Step Into, clear the Always do smart step into checkbox. 3. To skip scripts from the `ignoreList` field of the sourcemaps, select the Ignore known third party scripts specified in source maps checkbox. The older Chrome-specific field name `x_google_ignoreList` is deprecated but may still be recognized when the `ignoreList` field is absent. Learn more from the [source map specification](https://tc39.es/ecma426/#sec-source-map-format). 4. To suppress stepping into custom scripts, select the Do not step into scripts with a URL matching the patterns below checkbox and expand the default list of such scripts below. Use `*`, `?`, `**` and `!`. ![JavaScript debugger: skip scripts](https://resources.jetbrains.com/help/img/idea/2026.3/js_debugger_stepping.png) #### Pattern syntax The following characters are supported in patterns: * An asterisk `*` matches zero or more characters except a slash `/`. Use this character inside a single path part. * A question mark `?` matches exactly one character except a slash `/`. * A double asterisk `**` as a whole segment matches zero or more path segments. Its meaning depends on its position: * As the first part, it matches any leading symbols. * As the last part, it matches any trailing symbols. * In the middle, it matches one or more parts. For example, `a/**/b` matches `a/x/b` and `a/x/y/b`but not `a/b`. * A trailing double asterisk `**` at the end of the last segment (not on its own a full segment, for example, `foo**`) matches any suffix after that segment. For example, `foo**` matches `foo`, `foobar`, and `foo/bar`. * A pattern that starts with and exclamation mark `!` negates the given pattern and modifies the patterns added before it in the list. It does not add a new pattern of its own. Example 1 : In the pattern list `["**/*.ts", "!**/*.test.ts"]`, the first glob matches every `.ts` file. The second pattern modifies the first glob to exclude every `.test.ts` file from match. Example 2 : A passed URL is split into parts by means of a slash `/`. Accordingly, `**/node_modules/**` is split as follows:: : : : : 1. Double asterisk `**` matches any path before the `node_modules` segment. : : 2. `node_modules` matches against a `node_modules` in the URL. : : 3. Double asterisk `**` matches anything trailing. : : : : As a result, the pattern `**/node_modules/**` matches any URL that contains `node_modules`. : : : : Keep in mind that the URLs of the scripts are matched against the whole pattern. If we remove the second double asterisk `**`, the pattern will match any URL that ends with `node_modules` of which there will likely be zero. Example 3 : Skip the second double asterisk `**` to match against any pattern that ends with a particular filename. : : : : * `**/app.js` matches all URLs that end with `app.js`. : : * The following pattern list will ignore all scripts in `node_modules` except those named `app.js`. ``` **/node_modules/** !**/app.js ``` ### Advanced options Procedure: * 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` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `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/help/img/idea/2026.3/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` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `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/help/img/idea/2026.3/app.expui.general.add.svg) and ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.remove.svg) to manage the list of properties. ![Properties to show on object nodes](https://resources.jetbrains.com/help/img/idea/2026.3/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/help/img/idea/2026.3/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` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `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/help/img/idea/2026.3/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/help/img/idea/2026.3/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="" ``` ![Specify a custom profile subdirectory](https://resources.jetbrains.com/help/img/idea/2026.3/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)