You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is a [DAP](https://microsoft.github.io/debug-adapter-protocol/)-based JavaScript debugger. It debugs Node.js, Chrome, Edge, WebView2, VS Code extensions, and more. It has been the default JavaScript debugger in Visual Studio Code since 1.46, and is gradually rolling out in Visual Studio proper.
5
+
This is a [DAP](https://microsoft.github.io/debug-adapter-protocol/)-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](https://github.com/mxsdev/nvim-dap-vscode-js).
6
+
7
+
## Usage
8
+
9
+
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](https://github.com/microsoft/vscode-js-debug/releases) page.
10
+
11
+
See [OPTIONS.md](./OPTIONS.md) for a list of options you can use in your launch configurations.
12
+
13
+
- For usage in VS Code, please check out our guides for [Node.js debugging](https://code.visualstudio.com/docs/nodejs/nodejs-debugging), [Browser debugging](https://code.visualstudio.com/docs/nodejs/browser-debugging).
14
+
- For debugging React Native, install and read through the [React Native](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native) extension which builds upon `js-debug`.
15
+
- For debugging Blazor, check out [its documentation here](https://learn.microsoft.com/en-us/aspnet/core/blazor/debug?view=aspnetcore-8.0&tabs=visual-studio-code).
16
+
- For debugging WebView2 apps, check out [documentation here](https://learn.microsoft.com/en-us/microsoft-edge/webview2/how-to/debug-visual-studio-code).
6
17
7
18
### Nightly Extension
8
19
@@ -13,122 +24,111 @@ The shipped version of VS Code includes the js-debug version at the time of its
13
24
3. Search for `@id:ms-vscode.js-debug-nightly` in the extensions view.
14
25
4. Install that extension.
15
26
16
-
## What's new?
27
+
## Notable Features
17
28
18
-
In `js-debug` we aim to provide rich debugging for modern applications, with no or minimal configuration required. Here are a few new features that js-debug brings:
29
+
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.
19
30
20
-
### Debug child process and workers
31
+
### Debug child processes, web workers, service workers, and worker threads
21
32
22
-
In Node.js, child processes will automatically be debugged. In browsers, service workers, webworkers, and iframes will be debugged as well.
33
+
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.
While debugging workers, you can also step through `postMessage()` calls.
40
+
### Debug WebAssembly with DWARF symbols
27
41
28
-
### Debug Node.js processes in the terminal
42
+
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`.
29
43
30
-
You can debug any Node.js process you run in the terminal with our revamped 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.
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.
51
+
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.
35
52
36
-
You can also create a one-off terminal for debugging via the `Debug: Create JavaScript Debug Terminal` command.
In the previous debugger, you had to remember to add the `--inspect` flag when you ran a command, and couldn't hit breakpoints early in the program since attachment was asynchronous.
58
+
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.
39
59
40
60
### Profiling Support
41
61
42
62
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.
You can configure where and if the code lens is displayed in the `debug.javascript.codelens.npmScripts` setting.
53
-
54
-
### Automatic browser debugging
64
+
We support taking and visualizating CPU profiles, heap profiles, and heap snapshots.
55
65
56
-
By default, any links you click through the JavaScript debug terminal (`Debug: Create JavaScript Debug Terminal` command) will open in debug mode. If you'd like, you can enable this for all terminals, or disable it, by setting `debug.javascript.debugByLinkOptions` to `always` or `off`, respectively.
Autocomplete in the debug console has been significantly improved. You can expect better suggestions for more complex expressions than VS Code was able to handle before.
However, like the Chrome devtools, if you use `await` while paused on a breakpoint, you'll only get a pending `Promise` back. This is because the JavaScript event loop is paused while on a breakpoint.
88
-
89
92
### Pretty-print minified sources
90
93
91
-
The debugger can now pretty print files, especially useful when dealing with minified sources. It will show a prompt when you step into or open a file that looks minified, and you can also trigger pretty printing manually via the `Debug: Pretty print for debugging` command.
92
-
93
-
[Click to view gif](https://code.visualstudio.com/assets/updates/1_43/js-debug-pretty-printing.gif)
94
-
95
-
You can turn off the suggestion prompt by selecting Never, or changing the setting debug.javascript.suggestPrettyPrinting to false.
94
+
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.
96
95
97
-
### Support for Microsoft Edge and WebView2
96
+
<details>
97
+
<summary>Preview</summary>
98
+
<imgsrc="resources/readme/pretty-print.png">
99
+
</details>
98
100
99
-
We support launching the [new Microsoft Edge browser](https://www.microsoft.com/edge), via the `pwa-msedge` debug type. It supports all the same configuration settings as `chrome` does.
The debugger allows viewing network traffic of browser targets and Node.js >22.6.0. This requires enabling the `debug.javascript.enableNetworkView` setting.
102
104
103
-
With this comes support for the [WebView2](https://docs.microsoft.com/microsoft-edge/hosting/webview2) control in desktop Windows applications. Check out our [webview demo](https://github.com/microsoft/vscode-js-debug/tree/main/demos/webview) to learn how to set this up.
105
+
<details>
106
+
<summary>Preview</summary>
107
+
<imgsrc="resources/readme/network-view.png">
108
+
</details>
104
109
105
-
### Better sourcemap and breakpoint behavior
110
+
### Advanced Rename Support
106
111
107
-
Js-debug has a rewritten suite of sourcemap handling and breakpoint resolution logic. This results in more reliable breakpoint behavior in more cases. For example:
112
+
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.
108
113
109
-
- We are guaranteed to set breakpoints before hitting them, where there were previously scenarios where this did not happen.
110
-
- We can handle sources present in multiple compiled files. This is common when dealing with split bundles in web apps.
111
-
- We now support in-place transpilation (such as `ts-node` and `@babel/register`).
114
+
### Conditional Exception Breakpoints
112
115
113
-
### Copy values in call stack view
116
+
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.
114
117
115
-
VS Code has long had an action to "Copy Value" from the Variables view. However, previously this was truncated for object or long values. Changes in VS Code and js-debug allow us to losslessly copy the full expressions as JSON.
js-debug is a cleanroom rewrite of a JavaScript debugger, so there are a large number of small improvements. Here are some more that are unworthy of their own heading:
125
+
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.
120
126
121
-
- Console output is now improved. Promises, ArrayViews/ArrayBuffers, and other complex data structures are better supported.
122
-
- Logpoint breakpoints now support complex expressions and statements. Errors thrown will be printed, rather than silently eaten.
123
-
- You can now specify partial versions in the Node.js `runtimeVersion`. Previously you needed to specify the full version, such as `12.3.4`. Now, you can specify `12` and we'll use the most recent `12.*` installed on the system.
124
-
- Sourcemaps are now supported when attaching via the `Attach to Node.js Process` command.
125
-
- Several improvements have been made for faster performance and better out-of-the-box behavior in monorepos and multi-part applications.
126
-
- The `console.group()` set of APIs are now supported.
127
-
- You can pass `stable`, `canary`, or `dev` as `runtimeExecutable`s when launching browsers. We'll do our best to discover and use the specified version on your machine.
128
-
- You can now set the Node.js `program` to files with other or no extensions without workarounds.
129
-
- Restart frame requests are now supported.
130
-
- Command line APIs like `inspect()` and `copy()` are now available.
127
+
<details>
128
+
<summary>Preview</summary>
129
+
<imgsrc="resources/readme/exclude-caller.png">
130
+
</details>
131
131
132
-
### Options
132
+
### Step-in Targets
133
133
134
-
See [OPTIONS.md](./OPTIONS.md)
134
+
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.
0 commit comments