vscode-js-debug

The debugger can read DWARF debug symbols from WebAssembly.

Requirements:

• Set enableDWARF to true (Default: true).
• You must have the ms-vscode.wasm-dwarf-debugging extension installed for this to function.

When paused on a function's return statement, you can inspect and modify the $returnValue variable.

Note: You can use and modify properties on $returnValue, but you cannot assign a new value to it (it behaves like a const variable).

By default, the CDP proxy connection does not emit CDP events to avoid unnecessary overhead. To receive events, you must use the JsDebug CDP domain provided by js-debug for meta-communication.

To listen to events, call the JsDebug.subscribe method.

Technical definitions for this domain can be found in the source:

• TypeScript definitions: src/adapter/cdpProxy.ts
• PDL definitions: src/adapter/cdpProxy.pdl

You can extend js-debug functionality by using its provided Extension API. To use it, you must first download the typings from the repository to your source tree to ensure type safety.

To access the API in your extension, locate the ms-vscode.js-debug-nightly or ms-vscode.js-debug extension, activate it, and then access its exports as IExports from the @vscode/js-debug package.

const jsDebugExt = vscode.extensions.getExtension('ms-vscode.js-debug-nightly') || vscode.extensions.getExtension('ms-vscode.js-debug');
await jsDebugExt.activate()
const jsDebug: import('@vscode/js-debug').IExports = jsDebugExt.exports;

Advanced extensions can request access to an existing Chrome DevTools Protocol (CDP) connection managed by js-debug.

To do this, execute the command extension.js-debug.requestCDPProxy and provide the debug session ID you wish to connect to. js-debug will return an object containing the WebSocket server address:

{ host: string, port: string }

Important Considerations:

• The WebSocket server runs in the workspace. UI extensions may need to forward the port.
• For better performance over remote connections, it is recommended to use permessage-deflate on the WebSocket.
• The sessionId is ignored over this WebSocket because one js-debug session maps to exactly one CDP session. Targets like iframes or workers are treated as separate sessions.

The debugger supports capturing and visualizing CPU profiles, heap profiles, and heap snapshots. These profiles are sourcemap-aware.

To capture a profile:

• Click the ⚪ button in the Call Stack view.
• Or run the command Debug: Take Performance Profile.

When working with minified code, you can trigger pretty printing to make the source readable.

To pretty-print:

• Click the braces {} icon in the editor actions.
• Or run the command Debug: Pretty print for debugging.

You can debug any Node.js process run directly in your terminal using the Auto Attach feature.

• To enable Auto Attach: Run the command Debug: Toggle Auto Attach in VS Code. You can also toggle this via the Auto Attach: On/Off button in the status bar.
• To create a dedicated debugging terminal: Run the command Debug: Create JavaScript Debug Terminal. Any command run in this terminal (e.g., npm start) will be automatically debugged.

If you want to use the latest fixes and features before they are shipped with the standard VS Code release, you can install the nightly build. The nightly build is updated daily at 5PM PST.

To install the nightly version:

1. Open the extensions view (Ctrl+Shift+X) and search for @builtin @id:ms-vscode.js-debug.
2. Right-click the JavaScript Debugger extension and select Disable.
3. Search for @id:ms-vscode.js-debug-nightly in the extensions view.
4. Install that extension.