CINXE.COM
Node.js debugging in VS Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="awa-expId" content="vscw_aaflight1016_treatment:103440;" /> <meta name="awa-env" content="prod" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="google-site-verification" content="hNs7DXrTySP_X-0P_AC0WulAXvUwgSXEmgfcO2r79dw" /> <!-- Twitter and Facebook OpenGraph Metadata--> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@code" /> <meta name="description" content="The Visual Studio Code editor includes Node.js debugging support. Set breakpoints, step-in, inspect variables and more." /> <meta name="keywords" content="" /> <meta name="ms.prod" content="vs-code" /> <meta name="ms.TOCTitle" content="" /> <meta name="ms.ContentId" content="3AC4DBB5-1469-47FD-9CC2-6C94684D4A9D" /> <meta name="ms.date" content="02/06/2025" /> <meta name="ms.topic" content="conceptual" /> <!-- Twitter and Facebook OpenGraph Metadata--> <meta name="twitter:card" content="summary_large_image" /> <meta property="og:url" content="https://code.visualstudio.com/docs/nodejs/nodejs-debugging" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Node.js debugging in VS Code" /> <meta property="og:description" content="The Visual Studio Code editor includes Node.js debugging support. Set breakpoints, step-in, inspect variables and more." /> <meta property="og:image" content="https://code.visualstudio.com/assets/docs/editor/debugging/debugging-social.png" /> <link rel="shortcut icon" href="/assets/favicon.ico" sizes="128x128" /> <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"> <title>Node.js debugging in VS Code</title> <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/dist/v2/style.css"> <script src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js"></script> <script type="text/javascript" src="https://js.monitor.azure.com/scripts/c/ms.analytics-web-4.min.js"></script> <script type="text/javascript"> // Leave as var; siteConsent is initialized and referenced elsewhere. var siteConsent = null; const GPC_DataSharingOptIn = false; WcpConsent.onInitCallback(function () { window.appInsights = new oneDS.ApplicationInsights(); window.appInsights.initialize({ instrumentationKey: "1a3eb3104447440391ad5f2a6ee06a0a-62879566-bc58-4741-9650-302bf2af703f-7103", propertyConfiguration: { userConsented: false, gpcDataSharingOptIn: false, callback: { userConsentDetails: siteConsent ? siteConsent.getConsent : undefined }, }, cookieCfg: { ignoreCookies: ["MSCC"] }, webAnalyticsConfiguration:{ // Web Analytics Plugin configuration urlCollectQuery: true, urlCollectHash: true, autoCapture: { scroll: true, pageView: true, onLoad: true, onUnload: true, click: true, resize: true, jsError: true } } }, []); window.appInsights.getPropertyManager().getPropertiesContext().web.gpcDataSharingOptIn = GPC_DataSharingOptIn; }); </script> <link rel="alternate" type="application/atom+xml" title="RSS Feed for code.visualstudio.com" href="/feed.xml" /> </head> <body > <!-- Setting theme here to avoid FOUC --> <script> function setTheme(themeName) { if (themeName === 'dark') { document.documentElement.removeAttribute('data-theme'); // dark is default, so no data-theme attribute needed } if (themeName === 'light') { document.documentElement.setAttribute('data-theme', themeName); } return; } // Determine initial theme: user preference or system preference let theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); setTheme(theme); // Apply the initial theme // Listen for changes in the system theme preference window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { if (!localStorage.getItem('theme')) { // Only if no user preference is saved setTheme(e.matches ? 'dark' : 'light'); } }); </script> <div id="main"> <div class="navbar-fixed-container"> <div class="navbar navbar-inverse navbar-fixed-top " data-spy="affix" data-offset-top="1"> <div id='cookie-banner'></div> <nav role="navigation" aria-label="Top Level"> <div class="container"> <div class="nav navbar-header"> <a class="navbar-brand" href="/"><span>Visual Studio Code</span></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Expand and Collapse Menu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left"> <li class="active" ><a id="nav-docs" href="/docs">Docs</a></li> <li ><a id="nav-updates" href="/updates">Updates</a></li> <li ><a id="nav-blogs" href="/blogs">Blog</a></li> <li ><a id="nav-extend" href="/api">API</a></li> <li><a href="https://marketplace.visualstudio.com/VSCode" target="_blank" rel="noopener" id="nav-extensions">Extensions</a></li> <li ><a id="nav-faqs" href="/docs/supporting/faq">FAQ</a></li> <li class='search visible-xs visible-sm' ><a href="/Search">Search</a></li> <li ><a id="nav-copilot" href="/docs/copilot/overview">GitHub Copilot</a></li> </ul> </ul> <ul class="nav navbar-nav navbar-right" role="presentation"> <li> <button type="button" class="theme-switch" id="theme-toggle"> <img class="theme-icon-light" src="/assets/icons/theme-light.svg" alt="Switch to the dark theme" /> <img class="theme-icon-dark" src="/assets/icons/theme-dark.svg" alt="Switch to the light theme" /> </button> </li> <li> <a href="/Search" title="Search" class="btn search-btn" id="nav-search"> <img class="search-icon-light" src="/assets/icons/search.svg" width="16px" height="16px" alt="Search" /> <img class="search-icon-dark" src="/assets/icons/search-dark.svg" width="16px" height="16px" alt="Search" /> </a> </li> <li class="search" role="presentation"> <form class="nav-search search-form" role="search" aria-label="Search"> <div class="input-group" role="presentation"> <input type="text" name="q" class="search-box form-control" placeholder="Search Docs" aria-label="Search text"/> <span class="input-group-btn"> <button tabindex="0" class="btn" type="submit" aria-label="Search"> <img class="search-icon-dark" src="/assets/icons/search-dark.svg" alt="Search" /> <img class="search-icon-light" src="/assets/icons/search.svg" alt="Search" /> </button> </span> </div> </form> </li> <!-- this was hiden in the home and download page, keeping it for now --> <li><a class="link-button" href="/Download" id="nav-download"> <span>Download</span></a></li> </ul> </div> </div> </nav> </div> </div> <div class="updates-banner "> <div class="container"> <p class="message">🚀 Get <a class="copilot-deep-link" href="vscode://github.copilot-chat?referrer=vscode-updatebanner" id="banner-link-updates" rel="noopener">GitHub Copilot Free</a> in VS Code!</p> </div> <div tabindex="0" role="button" title="Dismiss this update" class="dismiss-btn" id="banner-dismiss-btn"><span class="sr-only">Dismiss this update</span><span aria-hidden="true" class="glyph-icon"></span></div> </div> <!-- This div wraps around the entire site --> <!-- The body itself should already have a main tag --> <div id="main-content"> <script> function closeReportIssue() { var element = document.getElementById('surveypopup'); element.parentElement.removeChild(element); } function reportIssue(tutorial, page) { var div = document.createElement('div'); div.innerHTML = '<div id="surveypopup" class="overlay visible"><div class="surveypopup"><div id="surveytitle">Tell us more<a href="javascript:void(0)" onclick="closeReportIssue()">X</a></div><div id="surveydiv"><iframe frameBorder="0" scrolling="0" src="https://www.research.net/r/PWZWZ52?tutorial=' + tutorial + '&step=' + page + '"></iframe></div></div></div>'; document.body.appendChild(div.children[0]); } </script> <div class="container body-content docs"> <div class="row"> <!-- left nav --> <div class="col-xs-12 col-md-2 docs-navbar-container"> <nav id="docs-navbar" aria-label="Topics" class="docs-nav visible-md visible-lg"> <ul class="nav" id="main-nav"> <li > <a class="docs-home" href="/docs" >Overview</a> </li> <li class="panel collapsed"> <a class="area" role="button" href="#setup-articles" data-parent="#main-nav" data-toggle="collapse">Setup</a> <ul id="setup-articles" class="collapse "> <li > <a href="/docs/setup/setup-overview" >Overview</a> </li> <li > <a href="/docs/setup/linux" >Linux</a> </li> <li > <a href="/docs/setup/mac" >macOS</a> </li> <li > <a href="/docs/setup/windows" >Windows</a> </li> <li > <a href="/docs/setup/raspberry-pi" >Raspberry Pi</a> </li> <li > <a href="/docs/setup/network" >Network</a> </li> <li > <a href="/docs/setup/additional-components" >Additional Components</a> </li> <li > <a href="/docs/setup/enterprise" >Enterprise</a> </li> <li > <a href="/docs/setup/uninstall" >Uninstall</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#getstarted-articles" data-parent="#main-nav" data-toggle="collapse">Getting Started</a> <ul id="getstarted-articles" class="collapse "> <li > <a href="/docs/getstarted/getting-started" >Tutorial</a> </li> <li > <a href="/docs/getstarted/copilot-quickstart" >Copilot Quickstart</a> </li> <li > <a href="/docs/getstarted/introvideos" >Intro Videos</a> </li> <li > <a href="/docs/getstarted/userinterface" >User Interface</a> </li> <li > <a href="/docs/getstarted/tips-and-tricks" >Tips and Tricks</a> </li> <li > <a href="/docs/getstarted/themes" >Themes</a> </li> <li > <a href="/docs/getstarted/settings" >Settings</a> </li> <li > <a href="/docs/getstarted/keybindings" >Keyboard Shortcuts</a> </li> <li > <a href="/docs/getstarted/locales" >Display Language</a> </li> <li > <a href="/docs/getstarted/telemetry" >Telemetry</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#editor-articles" data-parent="#main-nav" data-toggle="collapse">User Guide</a> <ul id="editor-articles" class="collapse "> <li > <a href="/docs/editor/codebasics" >Basic Editing</a> </li> <li > <a href="/docs/editor/extension-marketplace" >Extension Marketplace</a> </li> <li > <a href="/docs/editor/extension-runtime-security" >Extension Runtime Security</a> </li> <li > <a href="/docs/editor/intellisense" >IntelliSense</a> </li> <li > <a href="/docs/editor/editingevolved" >Code Navigation</a> </li> <li > <a href="/docs/editor/refactoring" >Refactoring</a> </li> <li > <a href="/docs/editor/debugging" >Debugging</a> </li> <li > <a href="/docs/editor/testing" >Testing</a> </li> <li > <a href="/docs/editor/vscode-web" >VS Code for the Web</a> </li> <li > <a href="/docs/editor/tasks" >Tasks</a> </li> <li > <a href="/docs/editor/profiles" >Profiles</a> </li> <li > <a href="/docs/editor/settings-sync" >Settings Sync</a> </li> <li > <a href="/docs/editor/userdefinedsnippets" >Snippets</a> </li> <li > <a href="/docs/editor/emmet" >Emmet</a> </li> <li > <a href="/docs/editor/command-line" >Command Line Interface</a> </li> <li class="panel collapsed"> <a class="area" role="button" href="#editor-workspaces-articles" data-parent="#editor-articles" data-toggle="collapse">Workspaces</a> <ul id="editor-workspaces-articles" class="collapse "> <li > <a href="/docs/editor/workspaces/workspaces" >Workspaces</a> </li> <li > <a href="/docs/editor/workspaces/workspace-trust" >Workspace Trust</a> </li> <li > <a href="/docs/editor/workspaces/multi-root-workspaces" >Multi-root Workspaces</a> </li> </ul> </li> <li > <a href="/docs/editor/accessibility" >Accessibility</a> </li> <li > <a href="/docs/editor/voice" >Voice Interactions</a> </li> <li > <a href="/docs/editor/custom-layout" >Custom Layout</a> </li> <li > <a href="/docs/editor/port-forwarding" >Port Forwarding</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#sourcecontrol-articles" data-parent="#main-nav" data-toggle="collapse">Source Control</a> <ul id="sourcecontrol-articles" class="collapse "> <li > <a href="/docs/sourcecontrol/overview" >Overview</a> </li> <li > <a href="/docs/sourcecontrol/intro-to-git" >Introduction to Git</a> </li> <li > <a href="/docs/sourcecontrol/github" >Collaborate on GitHub</a> </li> <li > <a href="/docs/sourcecontrol/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#terminal-articles" data-parent="#main-nav" data-toggle="collapse">Terminal</a> <ul id="terminal-articles" class="collapse "> <li > <a href="/docs/terminal/getting-started" >Getting Started Tutorial</a> </li> <li > <a href="/docs/terminal/basics" >Terminal Basics</a> </li> <li > <a href="/docs/terminal/profiles" >Terminal Profiles</a> </li> <li > <a href="/docs/terminal/shell-integration" >Shell Integration</a> </li> <li > <a href="/docs/terminal/appearance" >Appearance</a> </li> <li > <a href="/docs/terminal/advanced" >Advanced</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#copilot-articles" data-parent="#main-nav" data-toggle="collapse">GitHub Copilot</a> <ul id="copilot-articles" class="collapse "> <li > <a href="/docs/copilot/overview" >Overview</a> </li> <li > <a href="/docs/copilot/setup" >Setup</a> </li> <li > <a href="/docs/copilot/getting-started" >Copilot Quickstart</a> </li> <li > <a href="/docs/copilot/ai-powered-suggestions" >Code Completions</a> </li> <li > <a href="/docs/copilot/copilot-chat" >Copilot Chat</a> </li> <li > <a href="/docs/copilot/getting-started-chat" >Copilot Chat Tutorial</a> </li> <li > <a href="/docs/copilot/copilot-edits" >Copilot Edits</a> </li> <li > <a href="/docs/copilot/copilot-customization" >Customizing Copilot</a> </li> <li > <a href="/docs/copilot/prompt-crafting" >Best Practices</a> </li> <li > <a href="/docs/copilot/workspace-context" >Workspace Context</a> </li> <li > <a href="/docs/copilot/copilot-vscode-features" >Copilot Cheat Sheet</a> </li> <li > <a href="/docs/copilot/copilot-settings" >Settings Reference</a> </li> <li > <a href="/docs/copilot/copilot-extensibility-overview" >Copilot Extensibility</a> </li> <li > <a href="/docs/copilot/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#languages-articles" data-parent="#main-nav" data-toggle="collapse">Languages</a> <ul id="languages-articles" class="collapse "> <li > <a href="/docs/languages/overview" >Overview</a> </li> <li > <a href="/docs/languages/javascript" >JavaScript</a> </li> <li > <a href="/docs/languages/json" >JSON</a> </li> <li > <a href="/docs/languages/html" >HTML</a> </li> <li > <a href="/docs/languages/css" >CSS, SCSS and Less</a> </li> <li > <a href="/docs/languages/typescript" >TypeScript</a> </li> <li > <a href="/docs/languages/markdown" >Markdown</a> </li> <li > <a href="/docs/languages/powershell" >PowerShell</a> </li> <li > <a href="/docs/languages/cpp" >C++</a> </li> <li > <a href="/docs/languages/java" >Java</a> </li> <li > <a href="/docs/languages/php" >PHP</a> </li> <li > <a href="/docs/languages/python" >Python</a> </li> <li > <a href="/docs/languages/julia" >Julia</a> </li> <li > <a href="/docs/languages/r" >R</a> </li> <li > <a href="/docs/languages/ruby" >Ruby</a> </li> <li > <a href="/docs/languages/rust" >Rust</a> </li> <li > <a href="/docs/languages/go" >Go</a> </li> <li > <a href="/docs/languages/tsql" >T-SQL</a> </li> <li > <a href="/docs/languages/csharp" >C#</a> </li> <li > <a href="/docs/languages/dotnet" >.NET</a> </li> <li > <a href="/docs/languages/polyglot" >Polyglot</a> </li> </ul> </li> <li class="panel active expanded"> <a class="area" role="button" href="#nodejs-articles" data-parent="#main-nav" data-toggle="collapse">Node.js / JavaScript</a> <ul id="nodejs-articles" class="collapse in"> <li > <a href="/docs/nodejs/working-with-javascript" >Working with JavaScript</a> </li> <li > <a href="/docs/nodejs/nodejs-tutorial" >Node.js Tutorial</a> </li> <li class="active"> <a href="/docs/nodejs/nodejs-debugging" aria-label="Current Page: Node.js Debugging">Node.js Debugging</a> </li> <li > <a href="/docs/nodejs/nodejs-deployment" >Deploy Node.js Apps</a> </li> <li > <a href="/docs/nodejs/browser-debugging" >Browser Debugging</a> </li> <li > <a href="/docs/nodejs/angular-tutorial" >Angular Tutorial</a> </li> <li > <a href="/docs/nodejs/reactjs-tutorial" >React Tutorial</a> </li> <li > <a href="/docs/nodejs/vuejs-tutorial" >Vue Tutorial</a> </li> <li > <a href="/docs/nodejs/debugging-recipes" >Debugging Recipes</a> </li> <li > <a href="/docs/nodejs/profiling" >Performance Profiling</a> </li> <li > <a href="/docs/nodejs/extensions" >Extensions</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#typescript-articles" data-parent="#main-nav" data-toggle="collapse">TypeScript</a> <ul id="typescript-articles" class="collapse "> <li > <a href="/docs/typescript/typescript-tutorial" >Tutorial</a> </li> <li > <a href="/docs/typescript/typescript-compiling" >Compiling</a> </li> <li > <a href="/docs/typescript/typescript-editing" >Editing</a> </li> <li > <a href="/docs/typescript/typescript-refactoring" >Refactoring</a> </li> <li > <a href="/docs/typescript/typescript-debugging" >Debugging</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#python-articles" data-parent="#main-nav" data-toggle="collapse">Python</a> <ul id="python-articles" class="collapse "> <li > <a href="/docs/python/python-quick-start" >Quick Start</a> </li> <li > <a href="/docs/python/python-tutorial" >Tutorial</a> </li> <li > <a href="/docs/python/run" >Run Python Code</a> </li> <li > <a href="/docs/python/editing" >Editing</a> </li> <li > <a href="/docs/python/linting" >Linting</a> </li> <li > <a href="/docs/python/formatting" >Formatting</a> </li> <li > <a href="/docs/python/debugging" >Debugging</a> </li> <li > <a href="/docs/python/environments" >Environments</a> </li> <li > <a href="/docs/python/testing" >Testing</a> </li> <li > <a href="/docs/python/jupyter-support-py" >Python Interactive</a> </li> <li > <a href="/docs/python/tutorial-django" >Django Tutorial</a> </li> <li > <a href="/docs/python/tutorial-fastapi" >FastAPI Tutorial</a> </li> <li > <a href="/docs/python/tutorial-flask" >Flask Tutorial</a> </li> <li > <a href="/docs/python/tutorial-create-containers" >Create Containers</a> </li> <li > <a href="/docs/python/python-on-azure" >Deploy Python Apps</a> </li> <li > <a href="/docs/python/python-web" >Python in the Web</a> </li> <li > <a href="/docs/python/settings-reference" >Settings Reference</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#java-articles" data-parent="#main-nav" data-toggle="collapse">Java</a> <ul id="java-articles" class="collapse "> <li > <a href="/docs/java/java-tutorial" >Getting Started</a> </li> <li > <a href="/docs/java/java-editing" >Navigate and Edit</a> </li> <li > <a href="/docs/java/java-refactoring" >Refactoring</a> </li> <li > <a href="/docs/java/java-linting" >Formatting and Linting</a> </li> <li > <a href="/docs/java/java-project" >Project Management</a> </li> <li > <a href="/docs/java/java-build" >Build Tools</a> </li> <li > <a href="/docs/java/java-debugging" >Run and Debug</a> </li> <li > <a href="/docs/java/java-testing" >Testing</a> </li> <li > <a href="/docs/java/java-spring-boot" >Spring Boot</a> </li> <li > <a href="/docs/java/java-tomcat-jetty" >Application Servers</a> </li> <li > <a href="/docs/java/java-on-azure" >Deploy Java Apps</a> </li> <li > <a href="/docs/java/java-gui" >GUI Applications</a> </li> <li > <a href="/docs/java/extensions" >Extensions</a> </li> <li > <a href="/docs/java/java-faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#cpp-articles" data-parent="#main-nav" data-toggle="collapse">C++</a> <ul id="cpp-articles" class="collapse "> <li > <a href="/docs/cpp/introvideos-cpp" >Intro Videos</a> </li> <li > <a href="/docs/cpp/config-linux" >GCC on Linux</a> </li> <li > <a href="/docs/cpp/config-mingw" >GCC on Windows</a> </li> <li > <a href="/docs/cpp/config-wsl" >GCC on Windows Subsystem for Linux</a> </li> <li > <a href="/docs/cpp/config-clang-mac" >Clang on macOS</a> </li> <li > <a href="/docs/cpp/config-msvc" >Microsoft C++ on Windows</a> </li> <li > <a href="/docs/cpp/build-with-cmake" >Build with CMake</a> </li> <li > <a href="/docs/cpp/cmake-linux" >CMake Tools on Linux</a> </li> <li > <a href="/docs/cpp/cmake-quickstart" >CMake Quick Start</a> </li> <li > <a href="/docs/cpp/cpp-ide" >Editing and Navigating</a> </li> <li > <a href="/docs/cpp/cpp-debug" >Debugging</a> </li> <li > <a href="/docs/cpp/launch-json-reference" >Configure Debugging</a> </li> <li > <a href="/docs/cpp/cpp-refactoring" >Refactoring</a> </li> <li > <a href="/docs/cpp/customize-default-settings-cpp" >Settings</a> </li> <li > <a href="/docs/cpp/configure-intellisense" >Configure IntelliSense</a> </li> <li > <a href="/docs/cpp/configure-intellisense-crosscompilation" >Configure IntelliSense for Cross-Compiling</a> </li> <li > <a href="/docs/cpp/faq-cpp" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#csharp-articles" data-parent="#main-nav" data-toggle="collapse">C#</a> <ul id="csharp-articles" class="collapse "> <li > <a href="/docs/csharp/introvideos-csharp" >Intro Videos</a> </li> <li > <a href="/docs/csharp/get-started" >Get Started</a> </li> <li > <a href="/docs/csharp/navigate-edit" >Navigate and Edit</a> </li> <li > <a href="/docs/csharp/intellicode" >IntelliCode</a> </li> <li > <a href="/docs/csharp/refactoring" >Refactoring</a> </li> <li > <a href="/docs/csharp/formatting-linting" >Formatting and Linting</a> </li> <li > <a href="/docs/csharp/project-management" >Project Management</a> </li> <li > <a href="/docs/csharp/build-tools" >Build Tools</a> </li> <li > <a href="/docs/csharp/package-management" >Package Management</a> </li> <li > <a href="/docs/csharp/debugging" >Run and Debug</a> </li> <li > <a href="/docs/csharp/testing" >Testing</a> </li> <li > <a href="/docs/csharp/cs-dev-kit-faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#containers-articles" data-parent="#main-nav" data-toggle="collapse">Docker</a> <ul id="containers-articles" class="collapse "> <li > <a href="/docs/containers/overview" >Overview</a> </li> <li > <a href="/docs/containers/quickstart-node" >Node.js</a> </li> <li > <a href="/docs/containers/quickstart-python" >Python</a> </li> <li > <a href="/docs/containers/quickstart-aspnet-core" >ASP.NET Core</a> </li> <li > <a href="/docs/containers/debug-common" >Debug</a> </li> <li > <a href="/docs/containers/docker-compose" >Docker Compose</a> </li> <li > <a href="/docs/containers/quickstart-container-registries" >Registries</a> </li> <li > <a href="/docs/containers/app-service" >Deploy to Azure</a> </li> <li > <a href="/docs/containers/choosing-dev-environment" >Choose a Dev Environment</a> </li> <li > <a href="/docs/containers/reference" >Customize</a> </li> <li > <a href="/docs/containers/bridge-to-kubernetes" >Develop with Kubernetes</a> </li> <li > <a href="/docs/containers/troubleshooting" >Tips and Tricks</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#datascience-articles" data-parent="#main-nav" data-toggle="collapse">Data Science</a> <ul id="datascience-articles" class="collapse "> <li > <a href="/docs/datascience/overview" >Overview</a> </li> <li > <a href="/docs/datascience/jupyter-notebooks" >Jupyter Notebooks</a> </li> <li > <a href="/docs/datascience/data-science-tutorial" >Data Science Tutorial</a> </li> <li > <a href="/docs/datascience/python-interactive" >Python Interactive</a> </li> <li > <a href="/docs/datascience/data-wrangler-quick-start" >Data Wrangler Quick Start</a> </li> <li > <a href="/docs/datascience/data-wrangler" >Data Wrangler</a> </li> <li > <a href="/docs/datascience/pytorch-support" >PyTorch Support</a> </li> <li > <a href="/docs/datascience/azure-machine-learning" >Azure Machine Learning</a> </li> <li > <a href="/docs/datascience/jupyter-kernel-management" >Manage Jupyter Kernels</a> </li> <li > <a href="/docs/datascience/notebooks-web" >Jupyter Notebooks on the Web</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#intelligentapps-articles" data-parent="#main-nav" data-toggle="collapse">Intelligent Apps</a> <ul id="intelligentapps-articles" class="collapse "> <li > <a href="/docs/intelligentapps/overview" >AI Toolkit Overview</a> </li> <li > <a href="/docs/intelligentapps/models" >Models</a> </li> <li > <a href="/docs/intelligentapps/playground" >Playground</a> </li> <li > <a href="/docs/intelligentapps/bulkrun" >Bulk Run</a> </li> <li > <a href="/docs/intelligentapps/evaluation" >Evaluation</a> </li> <li > <a href="/docs/intelligentapps/finetune" >Fine-tune</a> </li> <li > <a href="/docs/intelligentapps/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#azure-articles" data-parent="#main-nav" data-toggle="collapse">Azure</a> <ul id="azure-articles" class="collapse "> <li > <a href="/docs/azure/overview" >Overview</a> </li> <li > <a href="/docs/azure/gettingstarted" >Getting Started</a> </li> <li > <a href="/docs/azure/deployment" >Deployment</a> </li> <li > <a href="/docs/azure/docker" >Docker</a> </li> <li > <a href="/docs/azure/aksextensions" >Azure Kubernetes Service</a> </li> <li > <a href="/docs/azure/kubernetes" >Kubernetes</a> </li> <li > <a href="/docs/azure/mongodb" >MongoDB</a> </li> <li > <a href="/docs/azure/remote-debugging" >Remote Debugging for Node.js</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#remote-articles" data-parent="#main-nav" data-toggle="collapse">Remote</a> <ul id="remote-articles" class="collapse "> <li > <a href="/docs/remote/remote-overview" >Overview</a> </li> <li > <a href="/docs/remote/ssh" >SSH</a> </li> <li > <a href="/docs/remote/dev-containers" >Dev Containers</a> </li> <li > <a href="/docs/remote/wsl" >Windows Subsystem for Linux</a> </li> <li > <a href="/docs/remote/codespaces" >GitHub Codespaces</a> </li> <li > <a href="/docs/remote/vscode-server" >VS Code Server</a> </li> <li > <a href="/docs/remote/tunnels" >Tunnels</a> </li> <li > <a href="/docs/remote/ssh-tutorial" >SSH Tutorial</a> </li> <li > <a href="/docs/remote/wsl-tutorial" >WSL Tutorial</a> </li> <li > <a href="/docs/remote/troubleshooting" >Tips and Tricks</a> </li> <li > <a href="/docs/remote/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#devcontainers-articles" data-parent="#main-nav" data-toggle="collapse">Dev Containers</a> <ul id="devcontainers-articles" class="collapse "> <li > <a href="/docs/devcontainers/containers" >Overview</a> </li> <li > <a href="/docs/devcontainers/tutorial" >Tutorial</a> </li> <li > <a href="/docs/devcontainers/attach-container" >Attach to Container</a> </li> <li > <a href="/docs/devcontainers/create-dev-container" >Create Dev Container</a> </li> <li > <a href="/docs/devcontainers/containers-advanced" >Advanced Containers</a> </li> <li > <a href="/docs/devcontainers/devcontainerjson-reference" >devcontainer.json</a> </li> <li > <a href="/docs/devcontainers/devcontainer-cli" >Dev Container CLI</a> </li> <li > <a href="/docs/devcontainers/tips-and-tricks" >Tips and Tricks</a> </li> <li > <a href="/docs/devcontainers/faq" >FAQ</a> </li> </ul> </li> </ul> </nav> <nav id="small-nav" aria-label="Topics" class="docs-nav hidden-md hidden-lg"> <label class="faux-h4" for="small-nav-dropdown">Topics</label> <select id="small-nav-dropdown" aria-label="topics"> <option value="/docs" >Overview</option> <optgroup label="Setup"> <option value="/docs/setup/setup-overview" >Overview</option> <option value="/docs/setup/linux" >Linux</option> <option value="/docs/setup/mac" >macOS</option> <option value="/docs/setup/windows" >Windows</option> <option value="/docs/setup/raspberry-pi" >Raspberry Pi</option> <option value="/docs/setup/network" >Network</option> <option value="/docs/setup/additional-components" >Additional Components</option> <option value="/docs/setup/enterprise" >Enterprise</option> <option value="/docs/setup/uninstall" >Uninstall</option> </optgroup> <optgroup label="Getting Started"> <option value="/docs/getstarted/getting-started" >Tutorial</option> <option value="/docs/getstarted/copilot-quickstart" >Copilot Quickstart</option> <option value="/docs/getstarted/introvideos" >Intro Videos</option> <option value="/docs/getstarted/userinterface" >User Interface</option> <option value="/docs/getstarted/tips-and-tricks" >Tips and Tricks</option> <option value="/docs/getstarted/themes" >Themes</option> <option value="/docs/getstarted/settings" >Settings</option> <option value="/docs/getstarted/keybindings" >Keyboard Shortcuts</option> <option value="/docs/getstarted/locales" >Display Language</option> <option value="/docs/getstarted/telemetry" >Telemetry</option> </optgroup> <optgroup label="User Guide"> <option value="/docs/editor/codebasics" >Basic Editing</option> <option value="/docs/editor/extension-marketplace" >Extension Marketplace</option> <option value="/docs/editor/extension-runtime-security" >Extension Runtime Security</option> <option value="/docs/editor/intellisense" >IntelliSense</option> <option value="/docs/editor/editingevolved" >Code Navigation</option> <option value="/docs/editor/refactoring" >Refactoring</option> <option value="/docs/editor/debugging" >Debugging</option> <option value="/docs/editor/testing" >Testing</option> <option value="/docs/editor/vscode-web" >VS Code for the Web</option> <option value="/docs/editor/tasks" >Tasks</option> <option value="/docs/editor/profiles" >Profiles</option> <option value="/docs/editor/settings-sync" >Settings Sync</option> <option value="/docs/editor/userdefinedsnippets" >Snippets</option> <option value="/docs/editor/emmet" >Emmet</option> <option value="/docs/editor/command-line" >Command Line Interface</option> <optgroup label="User Guide - Workspaces"> <option value="/docs/editor/workspaces/workspaces" >Workspaces</option> <option value="/docs/editor/workspaces/workspace-trust" >Workspace Trust</option> <option value="/docs/editor/workspaces/multi-root-workspaces" >Multi-root Workspaces</option> </optgroup> <option value="/docs/editor/accessibility" >Accessibility</option> <option value="/docs/editor/voice" >Voice Interactions</option> <option value="/docs/editor/custom-layout" >Custom Layout</option> <option value="/docs/editor/port-forwarding" >Port Forwarding</option> </optgroup> <optgroup label="Source Control"> <option value="/docs/sourcecontrol/overview" >Overview</option> <option value="/docs/sourcecontrol/intro-to-git" >Introduction to Git</option> <option value="/docs/sourcecontrol/github" >Collaborate on GitHub</option> <option value="/docs/sourcecontrol/faq" >FAQ</option> </optgroup> <optgroup label="Terminal"> <option value="/docs/terminal/getting-started" >Getting Started Tutorial</option> <option value="/docs/terminal/basics" >Terminal Basics</option> <option value="/docs/terminal/profiles" >Terminal Profiles</option> <option value="/docs/terminal/shell-integration" >Shell Integration</option> <option value="/docs/terminal/appearance" >Appearance</option> <option value="/docs/terminal/advanced" >Advanced</option> </optgroup> <optgroup label="GitHub Copilot"> <option value="/docs/copilot/overview" >Overview</option> <option value="/docs/copilot/setup" >Setup</option> <option value="/docs/copilot/getting-started" >Copilot Quickstart</option> <option value="/docs/copilot/ai-powered-suggestions" >Code Completions</option> <option value="/docs/copilot/copilot-chat" >Copilot Chat</option> <option value="/docs/copilot/getting-started-chat" >Copilot Chat Tutorial</option> <option value="/docs/copilot/copilot-edits" >Copilot Edits</option> <option value="/docs/copilot/copilot-customization" >Customizing Copilot</option> <option value="/docs/copilot/prompt-crafting" >Best Practices</option> <option value="/docs/copilot/workspace-context" >Workspace Context</option> <option value="/docs/copilot/copilot-vscode-features" >Copilot Cheat Sheet</option> <option value="/docs/copilot/copilot-settings" >Settings Reference</option> <option value="/docs/copilot/copilot-extensibility-overview" >Copilot Extensibility</option> <option value="/docs/copilot/faq" >FAQ</option> </optgroup> <optgroup label="Languages"> <option value="/docs/languages/overview" >Overview</option> <option value="/docs/languages/javascript" >JavaScript</option> <option value="/docs/languages/json" >JSON</option> <option value="/docs/languages/html" >HTML</option> <option value="/docs/languages/css" >CSS, SCSS and Less</option> <option value="/docs/languages/typescript" >TypeScript</option> <option value="/docs/languages/markdown" >Markdown</option> <option value="/docs/languages/powershell" >PowerShell</option> <option value="/docs/languages/cpp" >C++</option> <option value="/docs/languages/java" >Java</option> <option value="/docs/languages/php" >PHP</option> <option value="/docs/languages/python" >Python</option> <option value="/docs/languages/julia" >Julia</option> <option value="/docs/languages/r" >R</option> <option value="/docs/languages/ruby" >Ruby</option> <option value="/docs/languages/rust" >Rust</option> <option value="/docs/languages/go" >Go</option> <option value="/docs/languages/tsql" >T-SQL</option> <option value="/docs/languages/csharp" >C#</option> <option value="/docs/languages/dotnet" >.NET</option> <option value="/docs/languages/polyglot" >Polyglot</option> </optgroup> <optgroup label="Node.js / JavaScript"> <option value="/docs/nodejs/working-with-javascript" >Working with JavaScript</option> <option value="/docs/nodejs/nodejs-tutorial" >Node.js Tutorial</option> <option value="/docs/nodejs/nodejs-debugging" selected>Node.js Debugging</option> <option value="/docs/nodejs/nodejs-deployment" >Deploy Node.js Apps</option> <option value="/docs/nodejs/browser-debugging" >Browser Debugging</option> <option value="/docs/nodejs/angular-tutorial" >Angular Tutorial</option> <option value="/docs/nodejs/reactjs-tutorial" >React Tutorial</option> <option value="/docs/nodejs/vuejs-tutorial" >Vue Tutorial</option> <option value="/docs/nodejs/debugging-recipes" >Debugging Recipes</option> <option value="/docs/nodejs/profiling" >Performance Profiling</option> <option value="/docs/nodejs/extensions" >Extensions</option> </optgroup> <optgroup label="TypeScript"> <option value="/docs/typescript/typescript-tutorial" >Tutorial</option> <option value="/docs/typescript/typescript-compiling" >Compiling</option> <option value="/docs/typescript/typescript-editing" >Editing</option> <option value="/docs/typescript/typescript-refactoring" >Refactoring</option> <option value="/docs/typescript/typescript-debugging" >Debugging</option> </optgroup> <optgroup label="Python"> <option value="/docs/python/python-quick-start" >Quick Start</option> <option value="/docs/python/python-tutorial" >Tutorial</option> <option value="/docs/python/run" >Run Python Code</option> <option value="/docs/python/editing" >Editing</option> <option value="/docs/python/linting" >Linting</option> <option value="/docs/python/formatting" >Formatting</option> <option value="/docs/python/debugging" >Debugging</option> <option value="/docs/python/environments" >Environments</option> <option value="/docs/python/testing" >Testing</option> <option value="/docs/python/jupyter-support-py" >Python Interactive</option> <option value="/docs/python/tutorial-django" >Django Tutorial</option> <option value="/docs/python/tutorial-fastapi" >FastAPI Tutorial</option> <option value="/docs/python/tutorial-flask" >Flask Tutorial</option> <option value="/docs/python/tutorial-create-containers" >Create Containers</option> <option value="/docs/python/python-on-azure" >Deploy Python Apps</option> <option value="/docs/python/python-web" >Python in the Web</option> <option value="/docs/python/settings-reference" >Settings Reference</option> </optgroup> <optgroup label="Java"> <option value="/docs/java/java-tutorial" >Getting Started</option> <option value="/docs/java/java-editing" >Navigate and Edit</option> <option value="/docs/java/java-refactoring" >Refactoring</option> <option value="/docs/java/java-linting" >Formatting and Linting</option> <option value="/docs/java/java-project" >Project Management</option> <option value="/docs/java/java-build" >Build Tools</option> <option value="/docs/java/java-debugging" >Run and Debug</option> <option value="/docs/java/java-testing" >Testing</option> <option value="/docs/java/java-spring-boot" >Spring Boot</option> <option value="/docs/java/java-tomcat-jetty" >Application Servers</option> <option value="/docs/java/java-on-azure" >Deploy Java Apps</option> <option value="/docs/java/java-gui" >GUI Applications</option> <option value="/docs/java/extensions" >Extensions</option> <option value="/docs/java/java-faq" >FAQ</option> </optgroup> <optgroup label="C++"> <option value="/docs/cpp/introvideos-cpp" >Intro Videos</option> <option value="/docs/cpp/config-linux" >GCC on Linux</option> <option value="/docs/cpp/config-mingw" >GCC on Windows</option> <option value="/docs/cpp/config-wsl" >GCC on Windows Subsystem for Linux</option> <option value="/docs/cpp/config-clang-mac" >Clang on macOS</option> <option value="/docs/cpp/config-msvc" >Microsoft C++ on Windows</option> <option value="/docs/cpp/build-with-cmake" >Build with CMake</option> <option value="/docs/cpp/cmake-linux" >CMake Tools on Linux</option> <option value="/docs/cpp/cmake-quickstart" >CMake Quick Start</option> <option value="/docs/cpp/cpp-ide" >Editing and Navigating</option> <option value="/docs/cpp/cpp-debug" >Debugging</option> <option value="/docs/cpp/launch-json-reference" >Configure Debugging</option> <option value="/docs/cpp/cpp-refactoring" >Refactoring</option> <option value="/docs/cpp/customize-default-settings-cpp" >Settings</option> <option value="/docs/cpp/configure-intellisense" >Configure IntelliSense</option> <option value="/docs/cpp/configure-intellisense-crosscompilation" >Configure IntelliSense for Cross-Compiling</option> <option value="/docs/cpp/faq-cpp" >FAQ</option> </optgroup> <optgroup label="C#"> <option value="/docs/csharp/introvideos-csharp" >Intro Videos</option> <option value="/docs/csharp/get-started" >Get Started</option> <option value="/docs/csharp/navigate-edit" >Navigate and Edit</option> <option value="/docs/csharp/intellicode" >IntelliCode</option> <option value="/docs/csharp/refactoring" >Refactoring</option> <option value="/docs/csharp/formatting-linting" >Formatting and Linting</option> <option value="/docs/csharp/project-management" >Project Management</option> <option value="/docs/csharp/build-tools" >Build Tools</option> <option value="/docs/csharp/package-management" >Package Management</option> <option value="/docs/csharp/debugging" >Run and Debug</option> <option value="/docs/csharp/testing" >Testing</option> <option value="/docs/csharp/cs-dev-kit-faq" >FAQ</option> </optgroup> <optgroup label="Docker"> <option value="/docs/containers/overview" >Overview</option> <option value="/docs/containers/quickstart-node" >Node.js</option> <option value="/docs/containers/quickstart-python" >Python</option> <option value="/docs/containers/quickstart-aspnet-core" >ASP.NET Core</option> <option value="/docs/containers/debug-common" >Debug</option> <option value="/docs/containers/docker-compose" >Docker Compose</option> <option value="/docs/containers/quickstart-container-registries" >Registries</option> <option value="/docs/containers/app-service" >Deploy to Azure</option> <option value="/docs/containers/choosing-dev-environment" >Choose a Dev Environment</option> <option value="/docs/containers/reference" >Customize</option> <option value="/docs/containers/bridge-to-kubernetes" >Develop with Kubernetes</option> <option value="/docs/containers/troubleshooting" >Tips and Tricks</option> </optgroup> <optgroup label="Data Science"> <option value="/docs/datascience/overview" >Overview</option> <option value="/docs/datascience/jupyter-notebooks" >Jupyter Notebooks</option> <option value="/docs/datascience/data-science-tutorial" >Data Science Tutorial</option> <option value="/docs/datascience/python-interactive" >Python Interactive</option> <option value="/docs/datascience/data-wrangler-quick-start" >Data Wrangler Quick Start</option> <option value="/docs/datascience/data-wrangler" >Data Wrangler</option> <option value="/docs/datascience/pytorch-support" >PyTorch Support</option> <option value="/docs/datascience/azure-machine-learning" >Azure Machine Learning</option> <option value="/docs/datascience/jupyter-kernel-management" >Manage Jupyter Kernels</option> <option value="/docs/datascience/notebooks-web" >Jupyter Notebooks on the Web</option> </optgroup> <optgroup label="Intelligent Apps"> <option value="/docs/intelligentapps/overview" >AI Toolkit Overview</option> <option value="/docs/intelligentapps/models" >Models</option> <option value="/docs/intelligentapps/playground" >Playground</option> <option value="/docs/intelligentapps/bulkrun" >Bulk Run</option> <option value="/docs/intelligentapps/evaluation" >Evaluation</option> <option value="/docs/intelligentapps/finetune" >Fine-tune</option> <option value="/docs/intelligentapps/faq" >FAQ</option> </optgroup> <optgroup label="Azure"> <option value="/docs/azure/overview" >Overview</option> <option value="/docs/azure/gettingstarted" >Getting Started</option> <option value="/docs/azure/deployment" >Deployment</option> <option value="/docs/azure/docker" >Docker</option> <option value="/docs/azure/aksextensions" >Azure Kubernetes Service</option> <option value="/docs/azure/kubernetes" >Kubernetes</option> <option value="/docs/azure/mongodb" >MongoDB</option> <option value="/docs/azure/remote-debugging" >Remote Debugging for Node.js</option> </optgroup> <optgroup label="Remote"> <option value="/docs/remote/remote-overview" >Overview</option> <option value="/docs/remote/ssh" >SSH</option> <option value="/docs/remote/dev-containers" >Dev Containers</option> <option value="/docs/remote/wsl" >Windows Subsystem for Linux</option> <option value="/docs/remote/codespaces" >GitHub Codespaces</option> <option value="/docs/remote/vscode-server" >VS Code Server</option> <option value="/docs/remote/tunnels" >Tunnels</option> <option value="/docs/remote/ssh-tutorial" >SSH Tutorial</option> <option value="/docs/remote/wsl-tutorial" >WSL Tutorial</option> <option value="/docs/remote/troubleshooting" >Tips and Tricks</option> <option value="/docs/remote/faq" >FAQ</option> </optgroup> <optgroup label="Dev Containers"> <option value="/docs/devcontainers/containers" >Overview</option> <option value="/docs/devcontainers/tutorial" >Tutorial</option> <option value="/docs/devcontainers/attach-container" >Attach to Container</option> <option value="/docs/devcontainers/create-dev-container" >Create Dev Container</option> <option value="/docs/devcontainers/containers-advanced" >Advanced Containers</option> <option value="/docs/devcontainers/devcontainerjson-reference" >devcontainer.json</option> <option value="/docs/devcontainers/devcontainer-cli" >Dev Container CLI</option> <option value="/docs/devcontainers/tips-and-tricks" >Tips and Tricks</option> <option value="/docs/devcontainers/faq" >FAQ</option> </optgroup> </select> </nav> </div> <!-- small right nav --> <div class="col-xs-12 visible-xs"> <nav aria-labelledby="small-right-nav-label" class="small-nav docs-nav updates-nav"> <label class="faux-h4" for="small-right-nav-dropdown" id="small-right-nav-label">In this article</label> <select id="small-right-nav-dropdown" class="small-nav-select" aria-label="Sections"> <option value="#_auto-attach">Auto Attach</option> <option value="#_javascript-debug-terminal">JavaScript Debug Terminal</option> <option value="#_launch-configuration">Launch Configuration</option> <option value="#_launch-configuration-attributes">Launch configuration attributes</option> <option value="#_attaching-to-nodejs">Attaching to Node.js</option> <option value="#_stop-debugging">Stop debugging</option> <option value="#_source-maps">Source maps</option> <option value="#_remote-debugging">Remote debugging</option> <option value="#_access-loaded-scripts">Access Loaded Scripts</option> <option value="#_restarting-debug-sessions-automatically-when-source-is-edited">Restarting debug sessions automatically when source is edited</option> <option value="#_restart-frame">Restart frame</option> <option value="#_breakpoints">Breakpoints</option> <option value="#_skipping-uninteresting-code">Skipping uninteresting code</option> <option value="#_debugging-webassembly">Debugging WebAssembly</option> <option value="#_supported-nodelike-runtimes">Supported Node-like runtimes</option> <option value="#_next-steps">Next steps</option> <option value="#_common-questions">Common questions</option> </select> </nav> </div> <!-- main content --> <main class="col-xs-12 col-sm-9 col-md-8 body"> <div class="edit-github pull-right"> <a href="https://vscode.dev/github/microsoft/vscode-docs/blob/main/docs/nodejs/nodejs-debugging.md" class="btn btn-default" title="Edit this document in vscode.dev"> <span class="glyphicon glyphicon-pencil"></span> <span class="hidden-xs">Edit</span> </a> </div> <h1>Node.js debugging in VS Code</h1> <p>The Visual Studio Code editor has built-in debugging support for the <a href="https://nodejs.org/" class="external-link" target="_blank">Node.js</a> runtime and can debug JavaScript, TypeScript, and many other languages that are transpiled into JavaScript. Setting up a project for Node.js debugging is straightforward with VS Code providing appropriate launch configuration defaults and snippets.</p> <p>There are a few ways you can debug your Node.js programs in VS Code:</p> <ul> <li>Use <a href="#_auto-attach">auto attach</a> to debug processes you run in VS Code's integrated terminal.</li> <li>Use the <a href="#_javascript-debug-terminal">JavaScript debug terminal</a>, similar to using the integrated terminal.</li> <li>Use a <a href="#_launch-configuration">launch config</a> to start your program, or <a href="#_attaching-to-nodejs">attach to a process</a> launched outside of VS Code.</li> </ul> <h2 id="_auto-attach" data-needslink="_auto-attach">Auto Attach</h2> <p>If the <strong>Auto Attach</strong> feature is enabled, the Node debugger automatically attaches to certain Node.js processes that have been launched from VS Code's Integrated Terminal. To enable the feature, either use the <strong>Toggle Auto Attach</strong> command from the Command Palette (<span class="dynamic-keybinding" data-commandId="workbench.action.showCommands" data-osx="⇧⌘P" data-win="Ctrl+Shift+P" data-linux="Ctrl+Shift+P"><span class="keybinding">⇧⌘P</span> (Windows, Linux <span class="keybinding">Ctrl+Shift+P</span>)</span>) or, if it's already activated, use the <strong>Auto Attach</strong> Status bar item.</p> <p>There are three modes for auto attach, which you can select in the resulting Quick Pick and via the <strong>debug.javascript.autoAttachFilter</strong> setting:</p> <ul> <li><code>smart</code> - If you execute a script outside of your <code>node_modules</code> folder or use a common 'runner' script like mocha or ts-node, the process will be debugged. You can configure the 'runner' script allow list using the <strong>Auto Attach Smart Pattern</strong> setting (<code>debug.javascript.autoAttachSmartPattern</code>).</li> <li><code>always</code> - All Node.js processes launched in the Integrated Terminal will be debugged.</li> <li><code>onlyWithFlag</code> - Only processes launched with the <code>--inspect</code> or <code>--inspect-brk</code> flag will be debugged.</li> </ul> <p>After enabling <strong>Auto Attach</strong>, you'll need to restart your terminal by clicking the ⚠ icon in the top right of the terminal, or just creating a new one. Then, the debugger should attach to your program within a second:</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/auto-attach.gif" alt="Auto Attach" loading="lazy"></p> <p>When auto attach is on, the <code>Auto Attach</code> item will appear in the status bar across the bottom of the VS Code window. Clicking it allows you to change the auto attach mode, or temporarily turn it off. Temporarily turning off auto attach is useful if you're running some one-off programs where you don't need debugging, but you don't want to disable the feature entirely.</p> <h3 id="_additional-configuration" data-needslink="_additional-configuration">Additional Configuration</h3> <p><strong>Other Launch Configuration Properties</strong></p> <p>You can apply <a href="#_launch-configuration-attributes">other properties normally found in launch.json</a> to auto attach in the <strong>debug.javascript.terminalOptions</strong> setting. For example, to add node internals to your skipFiles, you could add the following to your user or workspace settings:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"debug.javascript.terminalOptions"</span><span style="color: #BBBBBB">: {</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"skipFiles"</span><span style="color: #9CDCFE">:</span><span style="color: #BBBBBB"> [</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"<node_internals>/**"</span></span> <span class="line"><span style="color: #BBBBBB"> ]</span></span> <span class="line"><span style="color: #BBBBBB"> },</span></span> <span class="line"></span></code></pre> <p><strong>Auto Attach Smart Patterns</strong></p> <p>In <code>smart</code> Auto Attach mode, VS Code will try to attach to your code, and not attach to build tools you aren't interested in debugging. It does this by matching the main script against a list of <a href="/docs/editor/glob-patterns">glob patterns</a>. The glob patterns are configurable in the <strong>debug.javascript.autoAttachSmartPattern</strong> setting, which defaults to:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">[</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">'!**/node_modules/**'</span><span style="color: #BBBBBB">, </span><span style="color: #6A9955">// exclude scripts in node_modules folders</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">'**/$KNOWN_TOOLS$/**'</span><span style="color: #BBBBBB"> </span><span style="color: #6A9955">// but include some common tools</span></span> <span class="line"><span style="color: #BBBBBB">];</span></span> <span class="line"></span></code></pre> <p><code>$KNOWN_TOOLS$</code> is replaced with a list of common 'code runners' such as <code>ts-node</code>, <code>mocha</code>, <code>ava</code>, and so on. You can modify this list if these settings don't work. For example, to exclude <code>mocha</code> and include <code>my-cool-test-runner</code>, you could add two lines:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">[</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">'!**/node_modules/**'</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">'**/$KNOWN_TOOLS$/**'</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">'!**/node_modules/mocha/**'</span><span style="color: #BBBBBB">, </span><span style="color: #6A9955">// use "!" to exclude all scripts in "mocha" node modules</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">'**/node_modules/my-cool-test-runner/**'</span><span style="color: #BBBBBB"> </span><span style="color: #6A9955">// include scripts in the custom test runner</span></span> <span class="line"><span style="color: #BBBBBB">];</span></span> <span class="line"></span></code></pre> <h2 id="_javascript-debug-terminal" data-needslink="_javascript-debug-terminal">JavaScript Debug Terminal</h2> <p>In a similar way to <a href="#_auto-attach">auto attach</a>, the JavaScript Debug Terminal will automatically debug any Node.js process you run in it. You can create a Debug Terminal by running the <strong>Debug: Create JavaScript Debug Terminal</strong> command from the Command Palette (<code>kbs(workbench.action.showCommands)</code>), or by selecting the <strong>Create JavaScript Debug Terminal</strong> from the terminal switcher dropdown.</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/create-debug-terminal.png" alt="Create Debug Terminal" loading="lazy"></p> <h3 id="_additional-configuration" data-needslink="_additional-configuration">Additional Configuration</h3> <p><strong>Other Launch Configuration Properties</strong></p> <p>You can apply <a href="#_launch-configuration-attributes">other properties normally found in launch.json</a> to the debug terminal in the <strong>debug.javascript.terminalOptions</strong> setting. For example, to add node internals to your skipFiles, you could add the following to your user or workspace settings:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #CE9178">"debug.javascript.terminalOptions"</span><span style="color: #BBBBBB">: {</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"skipFiles"</span><span style="color: #9CDCFE">:</span><span style="color: #BBBBBB"> [</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"<node_internals>/**"</span></span> <span class="line"><span style="color: #BBBBBB"> ]</span></span> <span class="line"><span style="color: #BBBBBB">},</span></span> <span class="line"></span></code></pre> <h2 id="_launch-configuration" data-needslink="_launch-configuration">Launch Configuration</h2> <p>Launch configs are the traditional way to set up debugging in VS Code, and provide you the most configuration options for running complex applications.</p> <p>In this section we'll go into more detail about configurations and features for more advanced debugging scenarios. You'll find instruction for debugging with <a href="/docs/nodejs/nodejs-debugging#_source-maps">source maps</a>, <a href="/docs/nodejs/nodejs-debugging#_skipping-uninteresting-code">stepping over external code</a>, doing <a href="/docs/nodejs/nodejs-debugging#_remote-debugging">remote debugging</a>, and much more.</p> <p>If you'd like to watch an introductory video, see <a href="https://www.youtube.com/watch?v=3HiLLByBWkg" class="external-link" target="_blank">Getting started with debugging in VS Code</a>.</p> <blockquote><p><strong>Note</strong>: If you are just getting started with VS Code, you can learn about general debugging features and creating <code>launch.json</code> configuration files in the <a href="/docs/editor/debugging">Debugging</a> topic.</p> </blockquote><h2 id="_launch-configuration-attributes" data-needslink="_launch-configuration-attributes">Launch configuration attributes</h2> <p>Debugging configurations are stored in a <code>launch.json</code> file located in your workspace's <code>.vscode</code> folder. An introduction into the creation and use of debugging configuration files is in the general <a href="/docs/editor/debugging#_launch-configurations">Debugging</a> article.</p> <p>Below is a reference of common <code>launch.json</code> attributes specific to the Node.js debugger. You can view the complete set of options in the <a href="https://github.com/microsoft/vscode-js-debug/blob/main/OPTIONS.md" class="external-link" target="_blank">vscode-js-debug options</a> documentation.</p> <p>The following attributes are supported in launch configurations of type <code>launch</code> and <code>attach</code>:</p> <ul> <li><code>outFiles</code> - array of <a href="/docs/editor/glob-patterns">glob patterns</a> for locating generated JavaScript files. See section <a href="/docs/nodejs/nodejs-debugging#_source-maps">Source maps</a>.</li> <li><code>resolveSourceMapLocations</code> - an array of <a href="/docs/editor/glob-patterns">glob patterns</a> for locations where source maps should be parsed. See section <a href="/docs/nodejs/nodejs-debugging#_source-maps">Source maps</a>.</li> <li><code>timeout</code> - when restarting a session, give up after this number of milliseconds. See section <a href="/docs/nodejs/nodejs-debugging#_attaching-to-nodejs">Attaching to Node.js</a>.</li> <li><code>stopOnEntry</code> - break immediately when the program launches.</li> <li><code>localRoot</code> - VS Code's root directory. See section <a href="/docs/nodejs/nodejs-debugging#_remote-debugging">Remote debugging</a> below.</li> <li><code>remoteRoot</code> - Node's root directory. See section <a href="/docs/nodejs/nodejs-debugging#_remote-debugging">Remote debugging</a> below.</li> <li><code>smartStep</code>- try to automatically step over code that doesn't map to source files. See section <a href="/docs/nodejs/nodejs-debugging#_smart-stepping">Smart stepping</a>.</li> <li><code>skipFiles</code> - automatically skip files covered by these <a href="/docs/editor/glob-patterns">glob patterns</a>. See section <a href="/docs/nodejs/nodejs-debugging#_skipping-uninteresting-code">Skipping uninteresting code</a>.</li> <li><code>trace</code> - enable diagnostic output.</li> </ul> <p>These attributes are only available for launch configurations of request type <code>launch</code>:</p> <ul> <li><code>program</code> - an absolute path to the Node.js program to debug.</li> <li><code>args</code> - arguments passed to the program to debug. This attribute is of type array and expects individual arguments as array elements.</li> <li><code>cwd</code> - launch the program to debug in this directory.</li> <li><code>runtimeExecutable</code> - absolute path to the runtime executable to be used. Default is <code>node</code>. See section <a href="/docs/nodejs/nodejs-debugging#_launch-configuration-support-for-npm-and-other-tools">Launch configuration support for 'npm' and other tools</a>.</li> <li><code>runtimeArgs</code> - optional arguments passed to the runtime executable.</li> <li><code>runtimeVersion</code> - if "<a href="https://github.com/creationix/nvm" class="external-link" target="_blank">nvm</a>" (or "<a href="https://github.com/coreybutler/nvm-windows" class="external-link" target="_blank">nvm-windows</a>") or "<a href="https://github.com/jasongin/nvs" class="external-link" target="_blank">nvs</a>" is used for managing Node.js versions, this attribute can be used to select a specific version of Node.js. See section <a href="/docs/nodejs/nodejs-debugging#_multi-version-support">Multi version support</a> below.</li> <li><code>env</code> - optional environment variables. This attribute expects environment variables as a list of string typed key/value pairs.</li> <li><code>envFile</code> - optional path to a file containing environment variable definitions. See section <a href="/docs/nodejs/nodejs-debugging#_load-environment-variables-from-external-file">Load environment variables from external file</a> below.</li> <li><code>console</code> - the console to launch the program (<code>internalConsole</code>, <code>integratedTerminal</code>, <code>externalTerminal</code>). See section <a href="/docs/nodejs/nodejs-debugging#_node-console">Node Console</a> below.</li> <li><code>outputCapture</code> - if set to <code>std</code>, output from the process stdout/stderr will be shown in the Debug Console, instead of listening to output over the debug port. This is useful for programs or log libraries that write directly to the stdout/stderr streams instead of using <code>console.*</code> APIs.</li> </ul> <p>This attribute is only available for launch configurations of request type <code>attach</code>:</p> <ul> <li><code>restart</code> - restart the connection on termination. See section <a href="/docs/nodejs/nodejs-debugging#_restarting-debug-sessions-automatically-when-source-is-edited">Restarting debug session automatically</a>.</li> <li><code>port</code> - debug port to use. See sections <a href="/docs/nodejs/nodejs-debugging#_attaching-to-nodejs">Attaching to Node.js</a> and <a href="/docs/nodejs/nodejs-debugging#_remote-debugging">Remote debugging</a>.</li> <li><code>address</code> - TCP/IP address of the debug port. See sections <a href="/docs/nodejs/nodejs-debugging#_attaching-to-nodejs">Attaching to Node.js</a> and <a href="/docs/nodejs/nodejs-debugging#_remote-debugging">Remote debugging</a>.</li> <li><code>processId</code> - the debugger tries to attach to this process after having sent a USR1 signal. With this setting, the debugger can attach to an already running process that was not started in debug mode. When using the <code>processId</code> attribute, the debug port is determined automatically based on the Node.js version (and the used protocol) and cannot be configured explicitly. So don't specify a <code>port</code> attribute.</li> <li><code>continueOnAttach</code> - whether to continue the process if it's paused when we attach to it. This option is useful if you launch your program with <code>--inspect-brk</code>.</li> </ul> <h3 id="_launch-configurations-for-common-scenarios" data-needslink="_launch-configurations-for-common-scenarios">Launch configurations for common scenarios</h3> <p>You can trigger IntelliSense (<span class="dynamic-keybinding" data-commandId="editor.action.triggerSuggest" data-osx="⌃Space" data-win="Ctrl+Space" data-linux="Ctrl+Space"><span class="keybinding">⌃Space</span> (Windows, Linux <span class="keybinding">Ctrl+Space</span>)</span>) in your <code>launch.json</code> file to see launch configuration snippets for commonly used Node.js debugging scenarios.</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/launch-snippets.png" alt="Launch configuration snippets for Node.js" loading="lazy"></p> <p>You can also bring up the snippets with the <strong>Add Configuration...</strong> button in the lower right of the <code>launch.json</code> editor window.</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/add-configuration-button.png" alt="Add Configuration button" loading="lazy"></p> <p>The following snippets are available:</p> <ul> <li><strong>Launch Program</strong>: Launch a Node.js program in debug mode.</li> <li><strong>Launch via npm</strong>: Launch a Node.js program through an npm 'debug' script. You can use an npm debug script from your launch configuration if it has been defined in your package.json. The debug port used in the npm script must correspond to the port specified in the snippet.</li> <li><strong>Attach</strong>: Attach to the debug port of a locally running Node.js program. Make sure that the Node.js program to debug has been started in debug mode, and the debug port used is the same as the one specified in the snippet.</li> <li><strong>Attach to Remote Program</strong>: Attach to the debug port of a Node.js program running on the host specified by the <code>address</code> attribute. Make sure that the Node.js program to debug has been started in debug mode, and the debug port used is the same as the one specified in the snippet. To help VS Code map source files between your workspace and the filesystem of the remote host, make sure to specify correct paths for the <code>localRoot</code>and <code>remoteRoot</code> attributes.</li> <li><strong>Attach by Process ID</strong>: Open the process picker to select a node or gulp process for debugging. With this launch configuration, you can even attach to a node or gulp process that was not started in debug mode.</li> <li><strong>Nodemon Setup</strong>: Use nodemon to relaunch a debug session automatically whenever the JavaScript source has changed. Make sure that you have nodemon installed globally. Note that terminating the debug session only terminates the program to debug, not nodemon itself. To terminate nodemon, press <span class="keybinding">Ctrl+C</span> in the Integrated Terminal.</li> <li><strong>Mocha Tests</strong>: Debug mocha tests in a <code>test</code> folder of your project. Make sure that your project has 'mocha' installed in its <code>node_modules</code> folder.</li> <li><strong>Yeoman generator</strong>: Debug a yeoman generator. The snippet asks you to specify the name of the generator. Make sure that your project has 'yo' installed in its <code>node_modules</code> folder and that your generated project has been installed for debugging by running <code>npm link</code> in the project folder.</li> <li><strong>Gulp task</strong>: Debug a gulp task. Make sure that your project has 'gulp' installed in its <code>node_modules</code> folder.</li> <li><strong>Electron Main</strong>: Debug the main Node.js process of an Electron application. The snippet assumes that the Electron executable has been installed inside the <code>node_modules/.bin</code> directory of the workspace.</li> </ul> <h3 id="_node-console" data-needslink="_node-console">Node console</h3> <p>By default, Node.js debug sessions launch the target in the internal VS Code Debug Console. Since the Debug Console does not support programs that need to read input from the console, you can enable either an external terminal or use the VS Code Integrated Terminal by setting the <code>console</code> attribute in your launch configuration to <code>externalTerminal</code> or <code>integratedTerminal</code> respectively. The default is <code>internalConsole</code>.</p> <p>In an external terminal, you can configure which terminal program to use via the <code>terminal.external.windowsExec</code>, <code>terminal.external.osxExec</code>, and <code>terminal.external.linuxExec</code> settings.</p> <h3 id="_launch-configuration-support-for-npm-and-other-tools" data-needslink="_launch-configuration-support-for-npm-and-other-tools">Launch configuration support for 'npm' and other tools</h3> <p>Instead of launching the Node.js program directly with node, you can use 'npm' scripts or other task runner tools directly from a launch configuration:</p> <ul> <li>You can use any program available on the PATH (for example 'npm', 'mocha', 'gulp', etc.) for the <code>runtimeExecutable</code> attribute and arguments can be passed via <code>runtimeArgs</code>.</li> <li>You do not have to set the <code>program</code> attribute if your npm script or other tool implicitly specifies the program to launch.</li> </ul> <p>Let's look at an 'npm' example. If your <code>package.json</code> has a 'debug' script, for example:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"scripts"</span><span style="color: #BBBBBB">: {</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"debug"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"node myProgram.js"</span></span> <span class="line"><span style="color: #BBBBBB"> },</span></span> <span class="line"></span></code></pre> <p>the corresponding launch configuration would look like this:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"name"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"Launch via npm"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"type"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"node"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"request"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"launch"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"cwd"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"${workspaceFolder}"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"runtimeExecutable"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"npm"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"runtimeArgs"</span><span style="color: #BBBBBB">: [</span><span style="color: #CE9178">"run-script"</span><span style="color: #BBBBBB">, </span><span style="color: #CE9178">"debug"</span><span style="color: #BBBBBB">]</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <h3 id="_multi-version-support" data-needslink="_multi-version-support">Multi version support</h3> <p>If you are using '<a href="https://github.com/creationix/nvm" class="external-link" target="_blank">nvm</a>' (or '<a href="https://github.com/coreybutler/nvm-windows" class="external-link" target="_blank">nvm-windows</a>') to manage your Node.js versions, it is possible to specify a <code>runtimeVersion</code> attribute in a launch configuration for selecting a specific version of Node.js:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"type"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"node"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"request"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"launch"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"name"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"Launch test"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"runtimeVersion"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"14"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"program"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"${workspaceFolder}/test.js"</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <p>If you are using '<a href="https://github.com/jasongin/nvs" class="external-link" target="_blank">nvs</a>' to manage your Node.js versions, it is possible to use <code>runtimeVersion</code> attribute to select a specific version, architecture, and flavor Node.js, for example:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"type"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"node"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"request"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"launch"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"name"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"Launch test"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"runtimeVersion"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"chackracore/8.9.4/x64"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"program"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"${workspaceFolder}/test.js"</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <p>Make sure to have those Node.js versions installed that you want to use with the <code>runtimeVersion</code> attribute, as the feature will not download and install the version automatically. For example, you'll have to run something like <code>nvm install 7.10.1</code> or <code>nvs add 7.10.1</code> from the integrated terminal if you plan to add <code>"runtimeVersion": "7.10.1"</code> to your launch configuration.</p> <p>If you omit the minor and patch version and have, for example, <code>"runtimeVersion": "14"</code>, then the most recent <code>14.x.y</code> version installed on your system will be used.</p> <h3 id="_load-environment-variables-from-external-file" data-needslink="_load-environment-variables-from-external-file">Load environment variables from external file</h3> <p>The VS Code Node debugger supports loading environment variables from a file and passing them to the Node.js runtime. To use this feature, add an attribute <code>envFile</code> to your launch configuration and specify the absolute path to the file containing the environment variables:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB"> </span><span style="color: #6A9955">//...</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"envFile"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"${workspaceFolder}/.env"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"env"</span><span style="color: #BBBBBB">: { </span><span style="color: #9CDCFE">"USER"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"john doe"</span><span style="color: #BBBBBB"> }</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #6A9955">//...</span></span> <span class="line"></span></code></pre> <p>Any environment variable specified in the <code>env</code> dictionary will override variables loaded from the file.</p> <p>Here's an example of an <code>.env</code> file:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #bbbbbb">USER=doe</span></span> <span class="line"><span style="color: #bbbbbb">PASSWORD=abc123</span></span> <span class="line"><span style="color: #bbbbbb"></span></span> <span class="line"><span style="color: #bbbbbb"># a comment</span></span> <span class="line"><span style="color: #bbbbbb"></span></span> <span class="line"><span style="color: #bbbbbb"># an empty value:</span></span> <span class="line"><span style="color: #bbbbbb">empty=</span></span> <span class="line"><span style="color: #bbbbbb"></span></span> <span class="line"><span style="color: #bbbbbb"># new lines expanded in quoted strings:</span></span> <span class="line"><span style="color: #bbbbbb">lines="foo\nbar"</span></span> <span class="line"><span style="color: #bbbbbb"></span></span></code></pre> <h2 id="_attaching-to-nodejs" data-needslink="_attaching-to-nodejs">Attaching to Node.js</h2> <p>If you want to attach the VS Code debugger to an external Node.js program, launch Node.js as follows:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">node --inspect program.js</span></span> <span class="line"></span></code></pre> <p>or if the program shouldn't start running, but must wait for the debugger to attach:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">node --inspect-brk program.js</span></span> <span class="line"></span></code></pre> <p>Options to attach the debugger to your program:</p> <ul> <li>Open a "process picker" that lists all potential candidate processes and let you pick one, or</li> <li>Create an "attach" configuration that explicitly specifies all configuration options and then press <strong>F5</strong>.</li> </ul> <p>Let's go through these options in detail:</p> <h3 id="_attach-to-node-process-action" data-needslink="_attach-to-node-process-action">Attach to Node Process action</h3> <p>The <strong>Attach to Node Process</strong> command from the Command Palette (<span class="dynamic-keybinding" data-commandId="workbench.action.showCommands" data-osx="⇧⌘P" data-win="Ctrl+Shift+P" data-linux="Ctrl+Shift+P"><span class="keybinding">⇧⌘P</span> (Windows, Linux <span class="keybinding">Ctrl+Shift+P</span>)</span>) opens a Quick Pick menu that lists all potential processes that are available to the Node.js debugger:</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/process-picker.png" alt="Node.js Process picker" loading="lazy"></p> <p>The individual processes listed in the picker show the debug port and process ID. Once you select your Node.js process in that list, the Node.js debugger will try to attach to it.</p> <p>In addition to Node.js processes, the picker also shows other programs that were launched with one of the various forms <code>--inspect</code> arguments. This makes it possible to attach to Electron's or VS Code's helper processes.</p> <h3 id="_setting-up-an-attach-configuration" data-needslink="_setting-up-an-attach-configuration">Setting up an "Attach" configuration</h3> <p>This option requires more work but in contrast to the previous two options it allows you to configure various debug configuration options explicitly.</p> <p>The simplest "attach" configuration looks like this:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"name"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"Attach to Process"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"type"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"node"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"request"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"attach"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"port"</span><span style="color: #BBBBBB">: </span><span style="color: #B5CEA8">9229</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <p>The port <code>9229</code> is the default debug port of the <code>--inspect</code> and <code>--inspect-brk</code> options. To use a different port (for example <code>12345</code>), add it to the options like this: <code>--inspect=12345</code> and <code>--inspect-brk=12345</code> and change the <code>port</code> attribute in the launch configuration to match.</p> <p>To attach to a Node.js process that hasn't been started in debug mode, you can do this by specifying the process ID of the Node.js process as a string:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"name"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"Attach to Process"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"type"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"node"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"request"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"attach"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"processId"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"53426"</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <p>To avoid repeatedly entering a new process ID in the launch configuration, Node debug supports a command variable <code>PickProcess</code> that will open the process picker (from above).</p> <p>Using the <code>PickProcess</code> variable the launch configuration looks like this:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"name"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"Attach to Process"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"type"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"node"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"request"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"attach"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"processId"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"${command:PickProcess}"</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <h2 id="_stop-debugging" data-needslink="_stop-debugging">Stop debugging</h2> <p>Using the <strong>Debug: Stop</strong> action (available in the Debug toolbar or via the <strong>Command Palette</strong>) stops the debug session.</p> <p>If the debug session was started in "attach" mode (and the red terminate button in the Debug toolbar shows a superimposed "plug"), pressing <strong>Stop</strong> disconnects the Node.js debugger from the debuggee that then continues execution.</p> <p>If the debug session is in "launch" mode, pressing <strong>Stop</strong> does the following:</p> <ol> <li> <p>When pressing <strong>Stop</strong> for the first time, the debuggee is requested to shut down gracefully by sending a <code>SIGINT</code> signal. The debuggee is free to intercept this signal and clean up anything as necessary and then shut down. If there are no breakpoints (or problems) in that shutdown code, the debuggee and the debug session will terminate.</p> </li> <li> <p>However, if the debugger hits a breakpoint in the shutdown code or if the debuggee does not terminate properly by itself, then the debug session will not end. In this case, pressing <strong>Stop</strong> again will force terminate the debuggee and its child processes (<code>SIGKILL</code>).</p> </li> </ol> <p>If you see that a debug session doesn't end when you press the red <strong>Stop</strong> button, then press the button again to force a shutdown of the debuggee.</p> <p>On Windows, pressing <strong>Stop</strong> forcibly kills the debuggee and its child processes.</p> <h2 id="_source-maps" data-needslink="_source-maps">Source maps</h2> <p>The JavaScript debugger of VS Code supports source maps that help debugging of transpiled languages, for example, TypeScript or minified/uglified JavaScript. With source maps, it's possible to single step through or set breakpoints in the original source. If no source map exists for the original source, or if the source map is broken and cannot successfully map between the source and the generated JavaScript, then breakpoints show up as unverified (gray hollow circles).</p> <p>The <code>sourceMaps</code> attribute that defaults to <code>true</code> controls the source map feature. The debugger always tries to use source maps (if it can find any) and as a consequence, you can even specify a source file (for example, app.ts) with the <code>program</code> attribute. If you need to disable source maps for some reason, you can set the <code>sourceMaps</code> attribute to <code>false</code>.</p> <h3 id="_tool-configuration" data-needslink="_tool-configuration">Tool Configuration</h3> <p>Since source maps are not always automatically created, you should make sure to configure your transpiler to create them. For example:</p> <p><strong>TypeScript</strong></p> <p>For TypeScript, you can enable sourcemaps by passing <code>--sourceMap</code> to <code>tsc</code>, or by adding <code>"sourceMap": true</code> in your tsconfig.json file.</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">tsc --sourceMap --outDir bin app.ts</span></span> <span class="line"></span></code></pre> <p><strong>Babel</strong></p> <p>For Babel, you'll want to set the <a href="https://babeljs.io/docs/en/options#sourcemaps" class="external-link" target="_blank">sourceMaps</a> option to <code>true</code>, or pass the <code>--source-maps</code> option when compiling your code.</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">npx babel script.js --out-file script-compiled.js --source-maps</span></span> <span class="line"></span></code></pre> <p><strong>Webpack</strong></p> <p>Webpack has <a href="https://webpack.js.org/configuration/devtool/" class="external-link" target="_blank">numerous</a> source map options. We recommend setting the property <code>devtool: "source-map"</code> in your <code>webpack.config.js</code> for the best fidelity of results, although you can experiment with other settings causes slowdowns in your build.</p> <p>Also, if you have additional compilation steps in webpack, such as using a TypeScript loader, you'll also want to make sure that those steps are set up to generate sourcemaps. Otherwise, the sourcemaps that webpack generates will map back to the compiled code from the loader, instead of the real sources.</p> <h3 id="_source-map-discovery" data-needslink="_source-map-discovery">Source Map Discovery</h3> <p>By default, VS Code will search your entire workspace, excluding <code>node_modules</code>, for sourcemaps. In large workspaces, this search might be slow. You can configure the locations where VS Code will search for source maps by setting the <code>outFiles</code> attribute in your <code>launch.json</code>. For example, this configuration will only discover sourcemaps for <code>.js</code> files in the <code>bin</code> folder:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"version"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"0.2.0"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"configurations"</span><span style="color: #BBBBBB">: [</span></span> <span class="line"><span style="color: #BBBBBB"> {</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"name"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"Launch TypeScript"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"type"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"node"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"request"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"launch"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"program"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"app.ts"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"outFiles"</span><span style="color: #BBBBBB">: [</span><span style="color: #CE9178">"${workspaceFolder}/bin/**/*.js"</span><span style="color: #BBBBBB">]</span></span> <span class="line"><span style="color: #BBBBBB"> }</span></span> <span class="line"><span style="color: #BBBBBB"> ]</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <p>Note that the <code>outFiles</code> should match your JavaScript files, not the source map files (which may end in <code>.map</code> instead of <code>.js</code>).</p> <h3 id="_source-map-resolution" data-needslink="_source-map-resolution">Source Map Resolution</h3> <p>By default, only source maps in your <code>outFiles</code> will be resolved. This behavior is used to prevent dependencies from interfering with breakpoints you set. For example, if you had a file <code>src/index.ts</code> and a dependency had a source map that referenced <code>webpack:///./src/index.ts</code>, that would incorrectly resolve to your source file and could lead to surprising results.</p> <p>You can configure this behavior by setting the <code>resolveSourceMapLocations</code> option. If set to <code>null</code>, every source map will be resolved. For example, this configuration will additionally allow source maps in <code>node_modules/some-dependency</code> to be resolved:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"resolveSourceMapLocations"</span><span style="color: #BBBBBB">: [</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"out/**/*.js"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"node_modules/some-dependency/**/*.js"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> ]</span></span> <span class="line"></span></code></pre> <h3 id="_smart-stepping" data-needslink="_smart-stepping">Smart stepping</h3> <p>With the <code>smartStep</code> attribute set to <code>true</code> in a launch configuration, VS Code will automatically skip 'uninteresting code' when stepping through code in the debugger. 'Uninteresting code' is code that is generated by a transpiling process but is not covered by a source map so it does not map back to the original source. This code gets in your way when stepping through source code in the debugger because it makes the debugger switch between the original source code and generated code that you are not interested in. <code>smartStep</code> will automatically step through code not covered by a source map until it reaches a location that is covered by a source map again.</p> <p>Smart stepping is especially useful for cases like async/await downcompilation in TypeScript, where the compiler injects helper code that is not covered by a source map.</p> <p>The <code>smartStep</code> feature only applies to JavaScript code that was generated from source and therefore has a source map. For JavaScript without sources, the smart stepping option has no effect.</p> <h3 id="_javascript-source-map-tips" data-needslink="_javascript-source-map-tips">JavaScript source map tips</h3> <p>A common issue when debugging with source maps is that you'll set a breakpoint, and it will turn gray. If you hover the cursor over it, you'll see the message, <code>"Breakpoint ignored because generated code not found (source map problem?)"</code>. What now? There are a range of issues that can lead to this. First, a quick explanation of how the Node debug adapter handles source maps.</p> <p>When you set a breakpoint in <code>app.ts</code>, the debug adapter has to figure out the path to <code>app.js</code>, the transpiled version of your TypeScript file, which is what is actually running in Node. But, there is not a straightforward way to figure this out starting from the <code>.ts</code> file. Instead, the debug adapter uses the <code>outFiles</code> attribute in the <code>launch.json</code> to find all the transpiled <code>.js</code> files, and parses them for a source map, which contains the locations of its associated <code>.ts</code> files.</p> <p>When you build your <code>app.ts</code> file in TypeScript with source maps enabled, it either produces an <code>app.js.map</code> file, or a source map inlined as a base64-encoded string in a comment at the bottom of the <code>app.js</code> file. To find the <code>.ts</code> files associated with this map, the debug adapter looks at two properties in the source map, <code>sources</code>, and <code>sourceRoot</code>. <code>sourceRoot</code> is optional - if present, it is prepended to each path in <code>sources</code>, which is an array of paths. The result is an array of absolute or relative paths to <code>.ts</code> files. Relative paths are resolved relative to the source map.</p> <p>Finally, the debug adapter searches for the full path of <code>app.ts</code> in this resulting list of <code>.ts</code> files. If there's a match, it has found the source map file to use when mapping <code>app.ts</code> to <code>app.js</code>. If there is no match, then it can't bind the breakpoint, and it will turn gray.</p> <p>Here are some things to try when your breakpoints turn gray:</p> <ul> <li>While debugging, run the <strong>Debug: Diagnose Breakpoint Problems</strong> command. This command will bring up a tool that can provide hints to help you resolve any issues from the Command Palette (<span class="dynamic-keybinding" data-commandId="workbench.action.showCommands" data-osx="⇧⌘P" data-win="Ctrl+Shift+P" data-linux="Ctrl+Shift+P"><span class="keybinding">⇧⌘P</span> (Windows, Linux <span class="keybinding">Ctrl+Shift+P</span>)</span>).</li> <li>Did you build with source maps enabled? Make sure there are <code>.js.map</code> files, or inlined source maps in your <code>.js</code> files.</li> <li>Are the <code>sourceRoot</code> and <code>sources</code> properties in your source map correct? Can they be combined to get the correct path to the <code>.ts</code> file?</li> <li>Have you opened the folder in VS Code with the incorrect case? It's possible to open folder <code>foo/</code> from the command line like <code>code FOO</code> in which case source maps may not be resolved correctly.</li> <li>Try searching for help with your particular setup on Stack Overflow or by filing an issue on GitHub.</li> <li>Try adding a <code>debugger</code> statement. If it breaks into the <code>.ts</code> file there, but breakpoints at that spot don't bind, that is useful information to include with a GitHub issue.</li> </ul> <h3 id="_overriding-source-map-paths" data-needslink="_overriding-source-map-paths">Overriding source map paths</h3> <p>The debugger uses <code>sourceMapPathOverrides</code> to implement custom sourcemap-to-disk path mapping. Good defaults are in place for most tools, but in advanced cases you may need to customize it. The default paths overrides is an object map that looks like this:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">'webpack:///./~/*'</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"${workspaceFolder}/node_modules/*"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">'webpack:////*'</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">'/*'</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">'webpack://@?:*/?:*/*'</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"${workspaceFolder}/*"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #6A9955">// and some more patterns...</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <p>This maps paths or URLs in the source map from the left to the right. The pattern <code>?:*</code> is a non-greedy, non-capturing match, and <code>*</code> is a greedy capturing match. The debugger then replaces the corresponding <code>*</code> in the right-hand pattern with the fragment captured from the source map path. For example, the last pattern in the above example would map <code>webpack://@my/package/foo/bar</code> to <code>${workspaceFolder}/foo/bar</code>.</p> <p>Note that for browser debugging, the <code>webRoot</code> is used in place of the <code>workspaceFolder</code> in the default <code>sourceMapPathOverrides</code>.</p> <h2 id="_remote-debugging" data-needslink="_remote-debugging">Remote debugging</h2> <blockquote><p><strong>Note:</strong> VS Code now has universal <a href="/docs/remote/remote-overview">remote development capabilities</a>. Using the <a href="https://aka.ms/vscode-remote/download/extension" class="external-link" target="_blank">Remote Development</a> extensions, Node.js development in remote scenarios and containers is no different than Node.js development in a local setup. <strong>This is the recommended way to remote debug Node.js programs</strong>. Check out the <a href="/docs/remote/remote-overview#_getting-started">Getting started</a> section and <a href="/docs/remote/remote-overview#_remote-tutorials">Remote tutorials</a> to learn more.</p> </blockquote><p>If you are unable to use any of the Remote Development extensions to debug your Node.js program, below is a guide on how to debug a remote Node.js program from your local instance of VS Code.</p> <p>The Node.js debugger supports remote debugging where you attach to a process running on a different machine, or in a container. Specify a remote host via the <code>address</code> attribute. For example:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"type"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"node"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"request"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"attach"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"name"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"Attach to remote"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"address"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"192.168.148.2"</span><span style="color: #BBBBBB">, </span><span style="color: #6A9955">// <- remote address here</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"port"</span><span style="color: #BBBBBB">: </span><span style="color: #B5CEA8">9229</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <p>By default, VS Code will stream the debugged source from the remote Node.js folder to the local VS Code and show it in a read-only editor. You can step through this code, but cannot modify it. If you want VS Code to open the editable source from your workspace instead, you can set up a mapping between the remote and local locations. A <code>localRoot</code> and a <code>remoteRoot</code> attribute can be used to map paths between a local VS Code project and a (remote) Node.js folder. This works even locally on the same system or across different operating systems. Whenever a code path needs to be converted from the remote Node.js folder to a local VS Code path, the <code>remoteRoot</code> path is stripped off the path and replaced by <code>localRoot</code>. For the reverse conversion, the <code>localRoot</code> path is replaced by the <code>remoteRoot</code>.</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"type"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"node"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"request"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"attach"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"name"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"Attach to remote"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"address"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"TCP/IP address of process to be debugged"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"port"</span><span style="color: #BBBBBB">: </span><span style="color: #B5CEA8">9229</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"localRoot"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"${workspaceFolder}"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"remoteRoot"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"C:</span><span style="color: #D7BA7D">\\</span><span style="color: #CE9178">Users</span><span style="color: #D7BA7D">\\</span><span style="color: #CE9178">username</span><span style="color: #D7BA7D">\\</span><span style="color: #CE9178">project</span><span style="color: #D7BA7D">\\</span><span style="color: #CE9178">server"</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <h2 id="_access-loaded-scripts" data-needslink="_access-loaded-scripts">Access Loaded Scripts</h2> <p>If you need to set a breakpoint in a script that is not part of your workspace and therefore cannot be easily located and opened through normal VS Code file browsing, you can access the loaded scripts via the <strong>LOADED SCRIPTS</strong> view in the <strong>Run and Debug</strong> view:</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/loaded-scripts-explorer.gif" alt="Loaded Scripts Explorer" loading="lazy"></p> <p>The <strong>LOADED SCRIPTS</strong> view lets you quickly select the script by typing its name or filter the list when <strong>Enable Filter on Type</strong> is on.</p> <p>Scripts are loaded into a read-only editor where you can set breakpoints. These breakpoints are remembered across debug sessions but you only have access to the script content while a debug session is running.</p> <h2 id="_restarting-debug-sessions-automatically-when-source-is-edited" data-needslink="_restarting-debug-sessions-automatically-when-source-is-edited">Restarting debug sessions automatically when source is edited</h2> <p>The <code>restart</code> attribute of a launch configuration controls whether the Node.js debugger automatically restarts after the debug session has ended. This feature is useful if you use <a href="https://nodemon.io" class="external-link" target="_blank"><strong>nodemon</strong></a> to restart Node.js on file changes. Setting the launch configuration attribute <code>restart</code> to <code>true</code> makes the node debugger automatically try to reattach to Node.js after Node.js has terminated.</p> <p>If you have started your program <code>server.js</code> via <strong>nodemon</strong> on the command line like this:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">nodemon --inspect server.js</span></span> <span class="line"></span></code></pre> <p>you can attach the VS Code debugger to it with the following launch configuration:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"name"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"Attach to node"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"type"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"node"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"request"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"attach"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"restart"</span><span style="color: #BBBBBB">: </span><span style="color: #569CD6">true</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"port"</span><span style="color: #BBBBBB">: </span><span style="color: #B5CEA8">9229</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <p>Alternatively, you can start your program <code>server.js</code> via <strong>nodemon</strong> directly with a launch config and attach the VS Code debugger:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"name"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"Launch server.js via nodemon"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"type"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"node"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"request"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"launch"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"runtimeExecutable"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"nodemon"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"program"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"${workspaceFolder}/server.js"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"console"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"integratedTerminal"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"internalConsoleOptions"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"neverOpen"</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <blockquote><p><strong>Tip:</strong> Pressing the <strong>Stop</strong> button stops the debug session and disconnects from Node.js, but <strong>nodemon</strong> (and Node.js) will continue to run. To stop <strong>nodemon</strong>, you will have to kill it from the command line (which is easily possible if you use the <code>integratedTerminal</code> as shown above).</p> </blockquote><blockquote><p><strong>Tip:</strong> In case of syntax errors, <strong>nodemon</strong> will not be able to start Node.js successfully until the error has been fixed. In this case, VS Code will continue trying to attach to Node.js but eventually give up (after 10 seconds). To avoid this, you can increase the timeout by adding a <code>timeout</code> attribute with a larger value (in milliseconds).</p> </blockquote><h2 id="_restart-frame" data-needslink="_restart-frame">Restart frame</h2> <p>The Node debugger supports restarting execution at a stack frame. This can be useful in situations where you have found a problem in your source code and you want to rerun a small portion of the code with modified input values. Stopping and then restarting the full debug session can be time-consuming. The <strong>Restart Frame</strong> action allows you to reenter the current function after you have changed variables with the <strong>Set Value</strong> action:</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/restartFrame.gif" alt="Restart frame" loading="lazy"></p> <p><strong>Restart Frame</strong> won't roll back mutation to state outside of the function, so it may not always work as expected.</p> <h2 id="_breakpoints" data-needslink="_breakpoints">Breakpoints</h2> <h3 id="_conditional-breakpoints" data-needslink="_conditional-breakpoints">Conditional Breakpoints</h3> <p>Conditional breakpoints are breakpoints that only pause when an expression returns a truthy value. You can create one by right-clicking in the gutter beside a line number and selecting "Conditional Breakpoint":</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/conditional-breakpoint.gif" alt="Conditional breakpoint" loading="lazy"></p> <h3 id="_logpoints" data-needslink="_logpoints">Logpoints</h3> <p>Sometimes you want to just log a message or value when code hits a certain location, rather than pausing. You can do this with logpoints. Logpoints don't pause, but rather log a message to the Debug Console when hit. In the JavaScript debugger, you can use curly braces to interpolate expressions into the message, like <code>current value is: {myVariable.property}</code>.</p> <p>You can create one by right-clicking in the gutter beside a line number and selecting "Logpoint". For example, this might log something like <code>location is /usr/local</code>:</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/logpoint-breakpoint.gif" alt="Logpoint" loading="lazy"></p> <h3 id="_hit-count-breakpoints" data-needslink="_hit-count-breakpoints">Hit count breakpoints</h3> <p>The 'hit count condition' controls how many times a breakpoint needs to be hit before it will 'break' execution. You can place a hit count breakpoint by right-clicking in the gutter beside a line number, selecting "Conditional Breakpoint", and then switching to "Hit Count".</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/hit-count-breakpoint.gif" alt="Hit count breakpoint" loading="lazy"></p> <p>The hit count syntax supported by the Node.js debugger is either an integer or one of the operators <code><</code>, <code><=</code>, <code>==</code>, <code>></code>, <code>>=</code>, <code>%</code> followed by an integer.</p> <p>Some examples:</p> <ul> <li><code>>10</code> break always after 10 hits</li> <li><code><3</code> break on the first two hits only</li> <li><code>10</code> same as <code>>=10</code></li> <li><code>%2</code> break on every other hit</li> </ul> <h3 id="_triggered-breakpoints" data-needslink="_triggered-breakpoints">Triggered breakpoints</h3> <p>A trigged breakpoint is a breakpoint that is automatically enabled once another breakpoint is hit. They can be very useful when diagnosing failure cases in code that happen only after a certain precondition.</p> <p>Triggered breakpoints can be set by right-clicking on the glyph margin, selecting <strong>Add Triggered Breakpoint</strong>, and then choosing which other breakpoint enables the breakpoint.</p> <p><video src="/assets/docs/editor/debugging/debug-triggered-breakpoint.mp4" autoplay loop controls muted></video></p> <h3 id="_breakpoint-validation" data-needslink="_breakpoint-validation">Breakpoint validation</h3> <p>For performance reasons, Node.js parses the functions inside JavaScript files lazily on first access. As a consequence, breakpoints don't work in source code areas that haven't been seen (parsed) by Node.js.</p> <p>Since this behavior is not ideal for debugging, VS Code passes the <code>--nolazy</code> option to Node.js automatically. This prevents the delayed parsing and ensures that breakpoints can be validated before running the code (so they no longer "jump").</p> <p>Since the <code>--nolazy</code> option might increase the start-up time of the debug target significantly, you can easily opt out by passing a <code>--lazy</code> as a <code>runtimeArgs</code> attribute.</p> <p>When doing so, you will find that some of your breakpoints don't "stick" to the line requested but instead "jump" for the next possible line in already-parsed code. To avoid confusion, VS Code always shows breakpoints at the location where Node.js thinks the breakpoint is. In the <strong>BREAKPOINTS</strong> section, these breakpoints are shown with an arrow between requested and actual line number:</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/breakpointsvalidation.png" alt="Breakpoints View" loading="lazy"></p> <p>This breakpoint validation occurs when a session starts and the breakpoints are registered with Node.js, or when a session is already running and a new breakpoint is set. In this case, the breakpoint may "jump" to a different location. After Node.js has parsed all the code (for example, by running through it), breakpoints can be easily reapplied to the requested locations with the <strong>Reapply</strong> button in the <strong>BREAKPOINTS</strong> section header. This should make the breakpoints "jump back" to the requested location.</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/breakpointstoolbar.png" alt="Breakpoint Actions" loading="lazy"></p> <h2 id="_skipping-uninteresting-code" data-needslink="_skipping-uninteresting-code">Skipping uninteresting code</h2> <p>VS Code Node.js debugging has a feature to avoid source code that you don't want to step through (also known as 'Just My Code'). This feature can be enabled with the <code>skipFiles</code> attribute in your launch configuration. <code>skipFiles</code> is an array of <a href="/docs/editor/glob-patterns">glob patterns</a> for script paths to skip.</p> <p>For example, using:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"skipFiles"</span><span style="color: #BBBBBB">: [</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"${workspaceFolder}/node_modules/**/*.js"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"${workspaceFolder}/lib/**/*.js"</span></span> <span class="line"><span style="color: #BBBBBB"> ]</span></span> <span class="line"></span></code></pre> <p>all code in the <code>node_modules</code> and <code>lib</code> folders in your project will be skipped. The <code>skipFiles</code> also apply to the location shown when calling <code>console.log</code> and similar methods: the first non-skipped location in the stack will be shown beside the output in the Debug Console.</p> <p>Built-in <strong>core modules</strong> of Node.js can be referred to by the 'magic name' <code><node_internals></code> in a <a href="/docs/editor/glob-patterns">glob patterns</a>. The following example skips all internal modules:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"skipFiles"</span><span style="color: #BBBBBB">: [</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"<node_internals>/**/*.js"</span></span> <span class="line"><span style="color: #BBBBBB"> ]</span></span> <span class="line"></span></code></pre> <p>The exact 'skipping' rules are as follows:</p> <ul> <li>If you step into a skipped file, you won't stop there - you will stop on the next executed line that is not in a skipped file.</li> <li>If you have set the option to break on thrown exceptions, then you won't break on exceptions thrown from skipped files unless they bubble up into a non-skipped file.</li> <li>If you set a breakpoint in a skipped file, you will stop at that breakpoint, and you will be able to step through it until you step out of it, at which point normal skipping behavior will resume.</li> <li>The location of console messages from inside skip files will be shown as the first non-skipped location in the call stack.</li> </ul> <p>Skipped source is shown in a 'dimmed' style in the CALL STACK view:</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/dimmed-callstack.png" alt="Skipped source is dimmed in call stack view" loading="lazy"></p> <p>Hovering over the dimmed entries explains why the stack frame is dimmed.</p> <p>A context menu item on the call stack, <strong>Toggle skipping this file</strong> enables you to easily skip a file at runtime without adding it to your launch config. This option only persists for the current debugging session. You can also use it to stop skipping a file that is skipped by the <code>skipFiles</code> option in your launch config.</p> <blockquote><p><strong>Note:</strong> The <code>legacy</code> protocol debugger supports negative <a href="/docs/editor/glob-patterns">glob patterns</a>, but they must <strong>follow</strong> a positive pattern: positive patterns add to the set of skipped files, while negative patterns subtract from that set.</p> </blockquote><p>In the following (<code>legacy</code> protocol-only) example all but a 'math' module is skipped:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #CE9178">"skipFiles"</span><span style="color: #BBBBBB">: [</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"${workspaceFolder}/node_modules/**/*.js"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #CE9178">"!${workspaceFolder}/node_modules/math/**/*.js"</span></span> <span class="line"><span style="color: #BBBBBB">]</span></span> <span class="line"></span></code></pre> <blockquote><p><strong>Note:</strong> The <code>legacy</code> protocol debugger has to emulate the <code>skipFiles</code> feature because the <strong>V8 Debugger Protocol</strong> does not support it natively. This might result in slow stepping performance.</p> </blockquote><h2 id="_debugging-webassembly" data-needslink="_debugging-webassembly">Debugging WebAssembly</h2> <p>The JavaScript debugger can debug code compiled into WebAssembly if it includes <a href="https://dwarfstd.org" class="external-link" target="_blank">DWARF</a> debug information. Many toolchains support emitting this information:</p> <ul> <li><a href="https://emscripten.org/" class="external-link" target="_blank">C/C++ with Emscripten</a>: Compile with the the <code>-g</code> flag to emit debug information.</li> <li><a href="https://ziglang.org/" class="external-link" target="_blank">Zig</a>: DWARF information is automatically emittted in the "Debug" build mode.</li> <li><a href="https://www.rust-lang.org/" class="external-link" target="_blank">Rust</a>: Rust emits DWARF debug information. However, wasm-pack <a href="https://github.com/rustwasm/wasm-pack/issues/1351" class="external-link" target="_blank">does not yet</a> retain it during the build. So, instead of running <code>wasm-pack build</code>, users of the common wasm-bindgen/wasm-pack libraries should build manually build using two commands: <ol> <li><code>cargo install wasm-bindgen-cli</code> once to install the necessary command-line tool.</li> <li><code>cargo build --target wasm32-unknown-unknown</code> to build your library.</li> <li><code>wasm-bindgen --keep-debug --out-dir pkg ./target/wasm32-unknown-unknown/debug/<library-name>.wasm <extra-arguments></code> to generate the WebAssembly bindings, replacing <code><library-name></code> with the name from your Cargo.toml and configuring <code><extra-arguments></code> as necessary.</li> </ol> </li> </ul> <p>After you have your code built, you'll want to install the <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.wasm-dwarf-debugging" class="external-link" target="_blank">WebAssembly DWARF Debugging</a> extension. This is shipped as a separate extension in order to keep the VS Code core 'streamlined.' Once installed, restart any active debugging sessions, and native code should then be mapped in the debugger! You should see your source code appear in the <strong>Loaded Sources</strong> view, and breakpoints should work.</p> <p>In the image below, the debugger is stopped on a breakpoint in C++ source code that creates a Mandelbrot fractal. The call stack is visible, with frames from the JavaScript code, to WebAssembly, to the mapped C++ code. You can also see the variables in the C++ code, and an edit to the memory associated with the int32 <code>height</code> variable.</p> <p><img src="/assets/docs/nodejs/nodejs-debugging/wasm-dwarf.png" alt="Debugger stopped on a breakpoint in C++ source code" loading="lazy"></p> <p>While close to parity, debugging WebAssembly is a little different than ordinary JavaScript:</p> <ul> <li>Variables in the <strong>Variables</strong> view cannot be edited directly. However, you can select the <strong>View Binary Data</strong> action beside the variable to edit their associated memory.</li> <li>Basic expression evaluation in the <strong>Debug Console</strong> and <strong>Watch</strong> views is provided by <a href="https://github.com/google/lldb-eval" class="external-link" target="_blank">lldb-eval</a>. This is different than ordinary JavaScript expressions.</li> <li>Locations not mapped to source code will be shown in disassembled WebAssembly Text Format. For WebAssembly, the command <strong>Disable Source Map Stepping</strong> will cause the debugger to step only in disassembled code.</li> </ul> <p>VS Code's WebAssembly debugging is built upon the <a href="https://github.com/ChromeDevTools/devtools-frontend/tree/main/extensions/cxx_debugging" class="external-link" target="_blank">C/C++ Debugging Extension</a> from the Chromium authors.</p> <h2 id="_supported-nodelike-runtimes" data-needslink="_supported-nodelike-runtimes">Supported Node-like runtimes</h2> <p>The current VS Code JavaScript debugger supports Node version at or above 8.x, recent Chrome versions, and recent Edge versions (via the <code>msedge</code> launch type).</p> <h2 id="_next-steps" data-needslink="_next-steps">Next steps</h2> <p>In case you didn't already read the Node.js section, take a look at:</p> <ul> <li><a href="/docs/nodejs/nodejs-tutorial">Node.js</a> - End to end Node scenario with a sample application</li> </ul> <p>To see a tutorial on the basics of debugging in VS Code, check out this video:</p> <ul> <li><a href="https://www.youtube.com/watch?v=3HiLLByBWkg" class="external-link" target="_blank">Getting started with debugging in VS Code</a>.</li> </ul> <p>To learn about VS Code's task running support, go to:</p> <ul> <li><a href="/docs/editor/tasks">Tasks</a> - Running tasks with Gulp, Grunt, and Jake. Showing Errors and Warnings</li> </ul> <p>To write your own debugger extension, visit:</p> <ul> <li><a href="/api/extension-guides/debugger-extension">Debugger Extension</a> - Steps to create a VS Code debug extension starting from a mock sample</li> </ul> <h2 id="_common-questions" data-needslink="_common-questions">Common questions</h2> <h3 id="_can-i-debug-if-im-using-symlinks" data-needslink="_can-i-debug-if-im-using-symlinks">Can I debug if I'm using symlinks?</h3> <p>Yes, if you've created symlinks for folders inside your project, such as with <code>npm link</code>, you can debug the symlinked sources by telling the Node.js runtime to preserve symlinked paths. Use the node.exe <code>--preserve-symlinks</code> <a href="https://nodejs.org/api/cli.html#cli_preserve_symlinks" class="external-link" target="_blank">switch</a> in your launch configuration <code>runtimeArgs</code> attribute. <code>runtimeArgs</code>, an array of strings, are passed to the debugging session runtime executable, which defaults to node.exe.</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"runtimeArgs"</span><span style="color: #BBBBBB">: [</span><span style="color: #CE9178">"--preserve-symlinks"</span><span style="color: #BBBBBB">]</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <p>If your main script is inside a symlinked path, then you will also need to add the <code>"--preserve-symlinks-main"</code> option. This option is only available in Node 10+.</p> <h3 id="_how-do-i-debug-ecmascript-modules" data-needslink="_how-do-i-debug-ecmascript-modules">How do I debug ECMAScript modules?</h3> <p>If you use esm or pass <code>--experimental-modules</code> to Node.js in order to use ECMAScript modules, you can pass these options through the <code>runtimeArgs</code> attribute of <code>launch.json</code>:</p> <ul> <li><code>"runtimeArgs": ["--experimental-modules"]</code> - Use the <a href="https://nodejs.org/api/esm.html" class="external-link" target="_blank">experimental ECMAScript modules support</a> in Node v8.5.0+</li> <li><code>"runtimeArgs": ["-r", "esm"]</code> - Use the <a href="https://github.com/standard-things/esm" class="external-link" target="_blank">esm ES module loader</a> (<code>["-r esm"]</code> without a comma won't work)</li> </ul> <h3 id="_how-can-i-set-nodeoptions" data-needslink="_how-can-i-set-nodeoptions">How can I set NODE_OPTIONS?</h3> <p>The debugger uses the special <code>NODE_OPTIONS</code> environment variable to set up debugging with your application, and overwriting it will prevent debugging from working correctly. Instead of overwriting it, you should append to it instead. For example, a <code>.bashrc</code> file might have something like this:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #569CD6">export</span><span style="color: #BBBBBB"> NODE_OPTIONS=</span><span style="color: #CE9178">"</span><span style="color: #9CDCFE">$NODE_OPTIONS</span><span style="color: #CE9178"> --some-other-option=here"</span></span> <span class="line"></span></code></pre> <div class="feedback"></div> <div class="body-footer">02/06/2025</div> </main> <!-- medium right nav --> <div class="col-sm-3 col-md-2 hidden-xs docs-subnavbar-container"> <nav id="docs-subnavbar" aria-label="On Page" data-spy="affix" data-offset-top="20"> <h4><span class="sr-only">In this article there are 17 sections</span><span aria-hidden="true">In this article</span></h4> <ul class="nav"> <li><a href="#_auto-attach">Auto Attach</a></li> <li><a href="#_javascript-debug-terminal">JavaScript Debug Terminal</a></li> <li><a href="#_launch-configuration">Launch Configuration</a></li> <li><a href="#_launch-configuration-attributes">Launch configuration attributes</a></li> <li><a href="#_attaching-to-nodejs">Attaching to Node.js</a></li> <li><a href="#_stop-debugging">Stop debugging</a></li> <li><a href="#_source-maps">Source maps</a></li> <li><a href="#_remote-debugging">Remote debugging</a></li> <li><a href="#_access-loaded-scripts">Access Loaded Scripts</a></li> <li><a href="#_restarting-debug-sessions-automatically-when-source-is-edited">Restarting debug sessions automatically when source is edited</a></li> <li><a href="#_restart-frame">Restart frame</a></li> <li><a href="#_breakpoints">Breakpoints</a></li> <li><a href="#_skipping-uninteresting-code">Skipping uninteresting code</a></li> <li><a href="#_debugging-webassembly">Debugging WebAssembly</a></li> <li><a href="#_supported-nodelike-runtimes">Supported Node-like runtimes</a></li> <li><a href="#_next-steps">Next steps</a></li> <li><a href="#_common-questions">Common questions</a></li> </ul> <div class="connect-widget"></div> </nav> </div> <!-- end of page connect widget --> <div class="col-xs-12 visible-xs"> <div class="connect-widget"></div> </div> </div> </div> </div> </div> <footer role="contentinfo" class="container"> <div class="footer-container"> <div class="footer-row"> <div class="footer-social"> <ul class="links"> <li> <a href="https://go.microsoft.com/fwlink/?LinkID=533687"><img src="/assets/icons/x-icon.svg" class="x-icon" alt="Follow us on X"></a> </li> <li> <a href="https://github.com/microsoft/vscode"><img src="/assets/icons/github-icon.svg" alt="VS Code on Github"></a> </li> <li> <a href="https://www.youtube.com/@code"><img src="/assets/icons/youtube-icon.svg" alt="VS Code on YouTube"></a> </li> <script> function manageConsent() { if (siteConsent && siteConsent.isConsentRequired) { siteConsent.manageConsent(); } } </script> </ul> <a id="footer-microsoft-link" class="microsoft-logo" href="https://www.microsoft.com"> <img src="/assets/icons/microsoft.svg" alt="Microsoft homepage" /> </a> </div> </div> <div class="footer-row"> <ul class="links"> <li><a id="footer-support-link" href="https://support.serviceshub.microsoft.com/supportforbusiness/create?sapId=d66407ed-3967-b000-4cfb-2c318cad363d" target="_blank" rel="noopener">Support</a></li> <li><a id="footer-privacy-link" href="https://go.microsoft.com/fwlink/?LinkId=521839" target="_blank" rel="noopener">Privacy</a></li> <li style="display: none;"><a id="footer-cookie-link" style="cursor: pointer;" onclick="manageConsent()" target="_blank" rel="noopener">Manage Cookies</a></li> <li><a id="footer-terms-link" href="https://www.microsoft.com/legal/terms-of-use" target="_blank" rel="noopener">Terms of Use</a></li> <li><a id="footer-license-link" href="/License" target="_blank" rel="noopener">License</a></li> </ul> </div> </div> </footer> <script type="module"> document.addEventListener('DOMContentLoaded', () => { const copilotDeepLinks = document.querySelectorAll('.copilot-deep-link'); if (copilotDeepLinks.length === 0) { return; } if (window.innerWidth < 992) { for (const link of copilotDeepLinks) { link.href = 'https://aka.ms/vscode-activatecopilotfree'; } } }); </script> <script src="/dist/index.js"></script> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "SoftwareApplication", "name" : "Visual Studio Code", "softwareVersion": "1.97", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, "applicationCategory": "DeveloperApplication", "applicationSubCategory": "Text Editor", "alternateName": "VS Code", "datePublished": "2021-11-03", "operatingSystem": "Mac, Linux, Windows", "logo": "https://code.visualstudio.com/assets/apple-touch-icon.png", "screenshot": "https://code.visualstudio.com/assets/home/home-screenshot-win.png", "releaseNotes": "https://code.visualstudio.com/updates", "downloadUrl": "https://code.visualstudio.com/download", "license": "https://code.visualstudio.com/license", "softwareRequirements": "https://code.visualstudio.com/docs/supporting/requirements", "url" : "https://code.visualstudio.com", "author": { "@type": "Organization", "name": "Microsoft" }, "publisher": { "@type": "Organization", "name": "Microsoft" }, "maintainer": { "@type": "Organization", "name": "Microsoft" }, "potentialAction": { "@type": "SearchAction", "target": "https://code.visualstudio.com/Search?q={search_term_string}", "query-input": "required name=search_term_string" }, "sameAs" : [ "https://en.wikipedia.org/wiki/Visual_Studio_Code", "https://twitter.com/code", "https://www.youtube.com/code", "https://www.tiktok.com/@vscode", "https://github.com/microsoft/vscode" ] } </script> </body> </html>