Connecting Signal Browser Extension to VS Code
Learn how to map domains to your local source code to enable zero-friction debugging from browser to VS Code.
Streamlining Your Debugging Workflow
Signal's VS Code integration allows you to bridge the gap between where a bug happens (the browser) and where you fix it (your editor). By mapping a domain to your local source code, Signal can automatically connect your browser session context directly to VS Code.
Here is the step-by-step process to get everything connected.
1. Install the VS Code Extension
Before connecting the browser to your editor, you need the Signal VS Code extension.
- Open VS Code.
- Navigate to the Extensions view (
Ctrl+Shift+XorCmd+Shift+X). - Search for "Signal" and click Install.
- Once installed, the extension will start a local Model Context Protocol (MCP) server that communicates with the browser extension.
2. Create a Workspace in Signal
Workspaces in Signal allow you to group settings, domain mappings, and integrations for specific projects.
- Open the Signal Chrome Extension popup.
- Click on the Workspace Builder (or settings/configuration).
- Create a new workspace for your project and give it a descriptive name.
3. Configure Domain to Local Path Mapping
This is the crucial step. You need to tell Signal which local directory corresponds to the domain you are debugging.
- In your newly created workspace, navigate to the mapping configuration.
- Add the URL you are debugging (e.g.,
localhost:3000orstaging.myapp.com). - Set the Local Path to the absolute path of your source code on your machine (e.g.,
/Users/dev/my-web-apporC:\dev\my-web-app). - Save the workspace configuration.
4. Experience Zero-Friction Handoff
With the connection established, you're ready to debug.
- Navigate to the mapped domain in your browser.
- Open the Signal extension popup or capture a bug session.
- You will now see an Open in VS Code button appear.
- Click it to automatically push the captured bug context directly to your AI agent within VS Code-no copy-pasting required!
By connecting your browser extension directly to your editor, you eliminate the tedious steps of manually moving logs, session state, and context, allowing you to focus immediately on fixing the issue.