Skip to content

[BEEEP] [PM-38497] Dev-ex: Add note for Add attach VSCode debugger to desktop, web configs #813

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
quexten merged 4 commits into from
Jun 4, 2026
+61 −10
Merged

[BEEEP] [PM-38497] Dev-ex: Add note for Add attach VSCode debugger to desktop, web configs #813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7a9ea65
Add notes about attaching debuggers
quexten Jun 3, 2026
aa1b5fb
Cleanup
quexten Jun 3, 2026
df6ae73
Fix typo
quexten Jun 3, 2026
9c165b7
Merge branch 'main' into km/update-debuggers
quexten Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions docs/getting-started/clients/debugging.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
---
sidebar_position: 6
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";

# Debugging with VS Code

The clients repository ships VS Code launch configurations in its `.vscode` folder, so you can
attach the debugger to the Desktop app and the Web Vault without any extra setup. Open the **Run and
Debug** panel and select a configuration from the dropdown.

## Desktop

Electron apps have a renderer process, which runs in the Electron window, and the main process,
which runs in the background.

Select **`Desktop: Attach Debugger (main + renderer)`** from the Run and Debug dropdown. This
attaches VSCode's debugger to a running desktop client. You can then set breakpoints directly in the
Comment on lines +20 to +21
Copy link
Copy Markdown
Contributor

@claude claude Bot Jun 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎨 SUGGESTED: Use "VS Code" (with space) for consistency with the rest of the file and codebase.

Details and fix

This line uses "VSCode" without a space, but every other occurrence in this file (lines 9, 11, 52) and across the docs (e.g. tools/index.md, commit-signing.mdx, desktop/index.mdx, web-vault/index.mdx) uses "VS Code". The custom dictionary in custom-words.txt also does not include "VSCode", so this may trigger a npm run spellcheck failure.

Suggested change
Select **`Desktop: Attach Debugger (main + renderer)`** from the Run and Debug dropdown. This
attaches VSCode's debugger to a running desktop client. You can then set breakpoints directly in the
Select **`Desktop: Attach Debugger (main + renderer)`** from the Run and Debug dropdown. This
attaches VS Code's debugger to a running desktop client. You can then set breakpoints directly in the

TypeScript source.

:::tip

The renderer process can also be inspected using the Chromium DevTools, which open automatically
when the Desktop app opens, or which you can open from the "View" menu.

:::

## Web Vault

First, build and serve the [Web Vault](./web-vault/index.mdx).

Next, launch Chrome with remote debugging enabled, using a dedicated profile so it doesn't interfere
with your normal browser session:

<Tabs groupId="os">
<TabItem value="mac" label="macOS" default>
<CodeBlock language="bash">{`open -a "Google Chrome" --args --remote-debugging-port=9223 --user-data-dir=remote-debug-profile`}</CodeBlock>
</TabItem>
<TabItem value="win" label="Windows">
<CodeBlock language="bash">{`chrome.exe --remote-debugging-port=9223 --user-data-dir=remote-debug-profile`}</CodeBlock>
</TabItem>
<TabItem value="lin" label="Linux">
<CodeBlock language="bash">{`google-chrome --remote-debugging-port=9223 --user-data-dir=remote-debug-profile`}</CodeBlock>
</TabItem>
</Tabs>

Then, in the Chrome instance you just launched, navigate to `https://localhost:8080`.

Finally, in VS Code, select **`Web: Renderer (attach)`** from the Run and Debug dropdown to attach
the debugger. You can then set breakpoints directly in the TypeScript source.
13 changes: 3 additions & 10 deletions docs/getting-started/clients/desktop/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,17 +101,10 @@ cd apps/desktop
npm run electron
```

## Debugging and testing
## Debugging

Electron apps have a renderer process, which runs in the Electron window, and the main process,
which runs in the background.

The renderer process can be inspected using the Chromium debugger. It should open automatically when
the Desktop app opens, or you can open it from the “View” menu.

The main process can be debugged by running the app from a
[Javascript Debug Terminal](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_javascript-debug-terminal)
in Visual Studio Code and then placing breakpoints in `build/main.js`.
See [Debugging with VS Code](../debugging.mdx#desktop) for how to attach the VS Code debugger to the
main and renderer processes.

## Biometric unlock (Native Messaging)

Expand Down
5 changes: 5 additions & 0 deletions docs/getting-started/clients/web-vault/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,3 +139,8 @@ following structure:
[^1]:
`urls` adhere to the
[type definition in `EnvironmentService`](https://github.com/bitwarden/clients/blob/main/libs/common/src/platform/abstractions/environment.service.ts).

## Debugging

See [Debugging with VS Code](../debugging.mdx#web-vault) for how to attach the VS Code debugger to
the Web Vault running in Chrome.
Loading