vscode-js-debug

A DAP-compatible JavaScript debugger. Used in VS Code, VS, + more

1,651

276

1,651

View on GitHub

Top Related Projects

debugger

4,614

The faster and smarter Debugger for Firefox DevTools 🔥🦊🛠

vscode-chrome-debug

2,199

Debug your JavaScript code running in Google Chrome from VS Code.

Quick Overview

Microsoft's vscode-js-debug is the JavaScript debugger used in Visual Studio Code and the Microsoft Edge browser's DevTools. It provides advanced debugging capabilities for JavaScript, TypeScript, and other web technologies, offering a powerful and extensible debugging experience for developers.

Pros

Supports multiple runtimes including Node.js, Chrome, Edge, and Electron
Offers advanced features like logpoint debugging and time-travel debugging
Integrates seamlessly with Visual Studio Code for a smooth development experience
Provides extensibility through custom debug adapters

Cons

Can be complex to set up for certain project configurations
May have performance issues with very large projects
Limited support for older browser versions
Occasional stability issues reported by some users

Getting Started

To use vscode-js-debug in Visual Studio Code:

Install the "JavaScript Debugger" extension from the VS Code marketplace.
Create a launch configuration in your project's .vscode/launch.json file:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

Set breakpoints in your code and start debugging using the "Run and Debug" view in VS Code.

For more detailed setup instructions and advanced configurations, refer to the official documentation on the GitHub repository.

Competitor Comparisons

debugger

4,614

The faster and smarter Debugger for Firefox DevTools 🔥🦊🛠

Pros of debugger

Integrated directly into Firefox, providing a seamless debugging experience for web developers using the browser
Supports debugging of Firefox-specific features and add-ons
Offers a more lightweight solution for developers primarily working with Firefox

Cons of debugger

Limited to Firefox browser, lacking cross-browser debugging capabilities
May have fewer features compared to vscode-js-debug, which is designed for a more general-purpose IDE

Code Comparison

debugger:

async function getSourceActorBreakableLines(sourceActor) {
  const { thread } = sourceActor.parentForm;
  const { lines } = await thread.getBreakableLines(sourceActor);
  return lines;
}

vscode-js-debug:

export async function getBreakablePositions(
  session: Dap.Session,
  source: Source
): Promise<IPosition[]> {
  const response = await session.breakpointLocations({
    source: { path: source.path },
    line: 0,
    column: 0,
    endLine: Number.MAX_SAFE_INTEGER,
    endColumn: Number.MAX_SAFE_INTEGER,
  });
  return response.breakpoints;
}

Both code snippets demonstrate functions for retrieving breakable lines or positions in source code, but vscode-js-debug's implementation appears more flexible, allowing for a range of lines and columns to be specified.

devtools-frontend

3,114

The Chrome DevTools UI

Pros of devtools-frontend

More comprehensive set of developer tools, including network monitoring, performance profiling, and application debugging
Directly integrated into Chrome browser, providing a seamless debugging experience for web developers
Extensive community support and regular updates from the Chrome team

Cons of devtools-frontend

Limited to Chrome browser, not as versatile for cross-browser debugging
Steeper learning curve due to the wide array of features and tools available
Less customizable compared to VS Code's extension-based approach

Code Comparison

devtools-frontend:

SDK.targetManager.addModelListener(
  SDK.ResourceTreeModel,
  SDK.ResourceTreeModel.Events.FrameNavigated,
  this._onFrameNavigated,
  this
);

vscode-js-debug:

vscode.debug.registerDebugAdapterDescriptorFactory('pwa-chrome', new ChromeDebugAdapterDescriptorFactory());

The code snippets demonstrate the different approaches to event handling and registration in each project. devtools-frontend uses a more browser-specific SDK, while vscode-js-debug integrates with VS Code's debug API.

vscode-chrome-debug

2,199

Debug your JavaScript code running in Google Chrome from VS Code.

Pros of vscode-chrome-debug

Specifically tailored for Chrome debugging, offering a more focused experience
Longer development history, potentially more stable and refined
Simpler setup for basic Chrome debugging scenarios

Cons of vscode-chrome-debug

Limited to Chrome-based browsers, less versatile than vscode-js-debug
Lacks support for newer JavaScript features and frameworks
May receive fewer updates as Microsoft shifts focus to vscode-js-debug

Code Comparison

vscode-chrome-debug:

const chromeDebugAdapter = new ChromeDebugAdapter();
chromeDebugAdapter.attach(args);

vscode-js-debug:

const jsDebugAdapter = new JSDebugAdapter();
jsDebugAdapter.attachToChrome(args);
jsDebugAdapter.attachToNode(args);

The code snippets illustrate the difference in flexibility between the two debuggers. vscode-chrome-debug is focused solely on Chrome debugging, while vscode-js-debug offers a more versatile approach, supporting both Chrome and Node.js debugging within the same adapter.

vscode-js-debug is the newer, more comprehensive debugger that supports multiple JavaScript runtimes, including Chrome, Edge, Node.js, and more. It offers better performance, improved compatibility with modern JavaScript frameworks, and a unified debugging experience across different environments. However, vscode-chrome-debug may still be preferred for simpler Chrome-specific debugging tasks or in environments where a more established tool is desired.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

This is a DAP-based JavaScript debugger. It debugs Node.js, Chrome, Edge, WebView2, VS Code extensions, Blazor, React Native, and more. It is the default JavaScript debugger in Visual Studio Code and Visual Studio, and the standalone debug server can also be used in other tools such as nvim.

Usage

If you're using Visual Studio or Visual Studio Code, js-debug is already installed. Otherwise, please consult your editor's documentation for possible installation instructions. Builds of the VS Code extension and standalone DAP server are available on the releases page.

See OPTIONS.md for a list of options you can use in your launch configurations.

For usage in VS Code, please check out our guides for Node.js debugging, Browser debugging.
For debugging React Native, install and read through the React Native extension which builds upon js-debug.
For debugging Blazor, check out its documentation here.
For debugging WebView2 apps, check out documentation here.

Nightly Extension

The shipped version of VS Code includes the js-debug version at the time of its release, however you may want to install our nightly build to get the latest fixes and features. The nightly build runs at 5PM PST on each day that there are changes (see pipeline). To get the build:

Open the extensions view (ctrl+shift+x) and search for @builtin @id:ms-vscode.js-debug
Right click on the JavaScript Debugger extension and Disable it.
Search for @id:ms-vscode.js-debug-nightly in the extensions view.
Install that extension.

Notable Features

In js-debug we aim to provide rich debugging for modern applications, with no or minimal configuration required. Here are a few distinguishing features of js-debug beyond basic debugging capabilities. Please refer to the VS Code documentation for a complete overview of capabilities.

Debug child processes, web workers, service workers, and worker threads

In Node.js, child processes and worker threads will automatically be debugged. In browsers, service workers, webworkers, and iframes will be debugged as well. While debugging workers, you can also step through postMessage() calls.

Preview

Debug WebAssembly with DWARF symbols

The debugger automatically reads DWARF symbols from WebAssembly binaries, and debugs them. The usual debugging features are available, including limited evaluation support via lldb-eval.

Preview

Debug Node.js processes in the terminal

You can debug any Node.js process you run in the terminal with Auto Attach. If auto attach isn't on, you can run the command Debug: Toggle Auto Attach to turn it on. Next time you run a command like npm start, we'll debug it.

Preview

Once enabled, you can toggle Auto Attach by clicking the Auto Attach: On/Off button in the status bar on the bottom of your screen. You can also create a one-off terminal for debugging via the Debug: Create JavaScript Debug Terminal command.

Profiling Support

You can capture and view performance profiles natively in VS Code, by clicking on the âª button in the Call Stack view, or through the Debug: Take Performance Profile command. The profile information collected through VS Code is sourcemap-aware.

We support taking and visualizating CPU profiles, heap profiles, and heap snapshots.

Preview

Instrumentation breakpoints

When debugging web apps, you can configure instrumentation breakpoints from VS Code in the "Event Listener Breakpoints" view.

Preview

Return value interception

On a function's return statement, you can use, inspect, and modify the $returnValue.

Preview

Note that you can use and modify properties on the $returnValue, but not assign it to--it is effectively a const variable.

Pretty-print minified sources

The debugger can pretty print files, especially useful when dealing with minified sources. You can trigger pretty printing by clicking on the braces {} icon in editor actions, or via the Debug: Pretty print for debugging command.

Preview

Experimental Network View

The debugger allows viewing network traffic of browser targets and Node.js >22.6.0. This requires enabling the debug.javascript.enableNetworkView setting.

Preview

Advanced Rename Support

When using a tool that emits renames in its sourcemap, the debugger maps renamed variables in all displayed views, and also rewrites evaluation requests to use the renamed identifiers, allowing near-source-level debugging of minified code.

Conditional Exception Breakpoints

As in most debuggers, you can pause on caught exceptions, but you can also filter the exceptions you want to pause on by checking against the error object. In VS Code, you can do this by clicking the pencil icon in the Breakpoints view.

Preview

Excluded Callers

If you have a breakpoint you want to pause on, but not when called from certain frames, you can right click on call frames in the stack trace view to "exclude caller" which prevents pausing on that breakpoint when the requested caller is in the stack trace.

Preview

Step-in Targets

When paused on a location with multiple calls or expressions, the debugger supports the Debug: Step Into Target action that allows you to request a specific expression you wish to step into.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot