[
    {
        "data": 1,
        "prerenderedAt": 168
    },
    [
        "ShallowReactive",
        2
    ],
    {
        "blog-connecting-browser-extension-to-vscode": 3
    },
    {
        "id": 4,
        "title": 5,
        "author": 6,
        "body": 7,
        "date": 158,
        "description": 159,
        "extension": 160,
        "meta": 161,
        "navigation": 162,
        "path": 163,
        "readingTime": 164,
        "seo": 165,
        "stem": 166,
        "__hash__": 167
    },
    "blog\u002Fblog\u002Fconnecting-browser-extension-to-vscode.md",
    "Connecting Signal Browser Extension to VS Code",
    "Signal Team",
    {
        "type": 8,
        "value": 9,
        "toc": 147
    },
    "minimark",
    [
        10,
        15,
        19,
        22,
        27,
        30,
        60,
        64,
        67,
        82,
        86,
        89,
        119,
        123,
        126,
        144
    ],
    [
        11,
        12,
        14
    ],
    "h2",
    {
        "id": 13
    },
    "streamlining-your-debugging-workflow",
    "Streamlining Your Debugging Workflow",
    [
        16,
        17,
        18
    ],
    "p",
    {},
    "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.",
    [
        16,
        20,
        21
    ],
    {},
    "Here is the step-by-step process to get everything connected.",
    [
        23,
        24,
        26
    ],
    "h3",
    {
        "id": 25
    },
    "_1-install-the-vs-code-extension",
    "1. Install the VS Code Extension",
    [
        16,
        28,
        29
    ],
    {},
    "Before connecting the browser to your editor, you need the Signal VS Code extension.",
    [
        31,
        32,
        33,
        37,
        49,
        57
    ],
    "ol",
    {},
    [
        34,
        35,
        36
    ],
    "li",
    {},
    "Open VS Code.",
    [
        34,
        38,
        39,
        40,
        44,
        45,
        48
    ],
    {},
    "Navigate to the Extensions view (",
    [
        41,
        42,
        43
    ],
    "code",
    {},
    "Ctrl+Shift+X",
    " or ",
    [
        41,
        46,
        47
    ],
    {},
    "Cmd+Shift+X",
    ").",
    [
        34,
        50,
        51,
        52,
        56
    ],
    {},
    "Search for \"Signal\" and click ",
    [
        53,
        54,
        55
    ],
    "strong",
    {},
    "Install",
    ".",
    [
        34,
        58,
        59
    ],
    {},
    "Once installed, the extension will start a local Model Context Protocol (MCP) server that communicates with the browser extension.",
    [
        23,
        61,
        63
    ],
    {
        "id": 62
    },
    "_2-create-a-workspace-in-signal",
    "2. Create a Workspace in Signal",
    [
        16,
        65,
        66
    ],
    {},
    "Workspaces in Signal allow you to group settings, domain mappings, and integrations for specific projects.",
    [
        31,
        68,
        69,
        72,
        79
    ],
    {},
    [
        34,
        70,
        71
    ],
    {},
    "Open the Signal Chrome Extension popup.",
    [
        34,
        73,
        74,
        75,
        78
    ],
    {},
    "Click on the ",
    [
        53,
        76,
        77
    ],
    {},
    "Workspace Builder",
    " (or settings\u002Fconfiguration).",
    [
        34,
        80,
        81
    ],
    {},
    "Create a new workspace for your project and give it a descriptive name.",
    [
        23,
        83,
        85
    ],
    {
        "id": 84
    },
    "_3-configure-domain-to-local-path-mapping",
    "3. Configure Domain to Local Path Mapping",
    [
        16,
        87,
        88
    ],
    {},
    "This is the crucial step. You need to tell Signal which local directory corresponds to the domain you are debugging.",
    [
        31,
        90,
        91,
        94,
        103,
        116
    ],
    {},
    [
        34,
        92,
        93
    ],
    {},
    "In your newly created workspace, navigate to the mapping configuration.",
    [
        34,
        95,
        96,
        97,
        44,
        100,
        48
    ],
    {},
    "Add the URL you are debugging (e.g., ",
    [
        41,
        98,
        99
    ],
    {},
    "localhost:3000",
    [
        41,
        101,
        102
    ],
    {},
    "staging.myapp.com",
    [
        34,
        104,
        105,
        106,
        109,
        110,
        44,
        113,
        48
    ],
    {},
    "Set the ",
    [
        53,
        107,
        108
    ],
    {},
    "Local Path",
    " to the absolute path of your source code on your machine (e.g., ",
    [
        41,
        111,
        112
    ],
    {},
    "\u002FUsers\u002Fdev\u002Fmy-web-app",
    [
        41,
        114,
        115
    ],
    {},
    "C:\\dev\\my-web-app",
    [
        34,
        117,
        118
    ],
    {},
    "Save the workspace configuration.",
    [
        23,
        120,
        122
    ],
    {
        "id": 121
    },
    "_4-experience-zero-friction-handoff",
    "4. Experience Zero-Friction Handoff",
    [
        16,
        124,
        125
    ],
    {},
    "With the connection established, you're ready to debug.",
    [
        31,
        127,
        128,
        131,
        134,
        141
    ],
    {},
    [
        34,
        129,
        130
    ],
    {},
    "Navigate to the mapped domain in your browser.",
    [
        34,
        132,
        133
    ],
    {},
    "Open the Signal extension popup or capture a bug session.",
    [
        34,
        135,
        136,
        137,
        140
    ],
    {},
    "You will now see an ",
    [
        53,
        138,
        139
    ],
    {},
    "Open in VS Code",
    " button appear.",
    [
        34,
        142,
        143
    ],
    {},
    "Click it to automatically push the captured bug context directly to your AI agent within VS Code-no copy-pasting required!",
    [
        16,
        145,
        146
    ],
    {},
    "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.",
    {
        "title": 148,
        "searchDepth": 149,
        "depth": 149,
        "links": 150
    },
    "",
    2,
    [
        151
    ],
    {
        "id": 13,
        "depth": 149,
        "text": 14,
        "children": 152
    },
    [
        153,
        155,
        156,
        157
    ],
    {
        "id": 25,
        "depth": 154,
        "text": 26
    },
    3,
    {
        "id": 62,
        "depth": 154,
        "text": 63
    },
    {
        "id": 84,
        "depth": 154,
        "text": 85
    },
    {
        "id": 121,
        "depth": 154,
        "text": 122
    },
    "2026-05-15",
    "Learn how to map domains to your local source code to enable zero-friction debugging from browser to VS Code.",
    "md",
    {},
    true,
    "\u002Fblog\u002Fconnecting-browser-extension-to-vscode",
    "3 min read",
    {
        "title": 5,
        "description": 159
    },
    "blog\u002Fconnecting-browser-extension-to-vscode",
    "pMcu9SWqxhq5WgUMYM9Hrxe3CI8LFMddNed45tH1icc",
    1778935227765
]