VS Code Extension
VS Code Extension IDE Guide
Install, connect, configure, and manage real-time probes directly inside your IDE.
The InSitu VS Code extension brings the entire production debugging workflow straight into your code editor. Insert snapshot points, inject logs, and track performance counters directly on your source code—without switching windows or opening dashboards.
🔌 1. Installation
You can install the InSitu extension using either the visual Extensions Marketplace or keyboard-only Quick Open (works in VS Code, VSCodium, and Gitpod via the Open VSX Registry):
Extensions Panel (UI)
Quick Open (Keyboard-Only)
Open VS Code and navigate to the Extensions panel (
Cmd+Shift+X
on macOS /
Ctrl+Shift+X
on Windows/Linux).
Search for
InSitu
and click
Install
.
Launch VS Code Quick Open by pressing
Cmd+P
(macOS) or
Ctrl+P
(Windows/Linux).
Paste the following command and press
Enter
:
ext install InSitu.InSitu-extension
Once installed, a new
InSitu Debugger
icon will appear inside your side Activity Bar instantly without requiring an editor restart!
⚙️ 2. Connection & Configuration
The extension must know where your InSitu Server is hosted.
Setting the Server URL
By default, the
InSitu.serverUrl
setting is configured to point to:
https://app.useinsitu.com
This is correct for general cloud usage. If you are self-hosting or testing locally:
Open VS Code Settings (
Cmd+,
/
Ctrl+,
).
Search for
InSitu.serverUrl
.
Set your server URL, for example:
https://app.useinsitu.com
.
.vscode/settings.json
{
"InSitu.serverUrl"
:
"https://app.useinsitu.com"
}
Pro-Tip:
Commit a workspace-level
.vscode/settings.json
file to your git repository. This automatically aligns the server URL for your entire engineering team when they clone the codebase!
🎯 3. Inserting and Managing Probes
Once configured, placing a probe on any line is as simple as a right-click.
1
Map your workspace with .hprc
The extension discovers active running services by reading a
.hprc
file placed at the root of your local repository. Create a
.hprc
file containing your Service UUID from the dashboard:
.hprc
{
"serviceId"
:
"<service-uuid-from-dashboard>"
}
2
Select a Line & Insert
Right-click any executable statement in your editor and choose
Insert a Snapshot
(or Dynamic Log, Counter, etc.).
3
Configure Your Probe Options
The probe creation drawer will slide open with context-aware parameters:
Watch Expressions:
Enter custom code expressions to evaluate live (e.g.,
user.cart.total
or
isNewCustomer()
).
Condition:
Filter execution paths. The probe will only capture data when the boolean expression evaluates to true (e.g.,
req.headers['x-user-id'] === 'user_1029'
).
Hit Limit:
Set how many times the probe fires before self-destructing in-process (snapshots default to
1
for safety, logs default to
100
).
🔍 4. Inspecting Captured Telemetry
Click any completed or active probe in your side panel to open the
Snapshot Inspector
:
┌────────────────────────────────────────────────────────┐
│ 🟢 HIT 1 OF 3 (Captured 2:14:10 PM)                   │
├────────────────────────────────────────────────────────┤
│ ├─ ▼ WATCH EXPRESSIONS                                 │
│ │    └─ user.cart.total: 104.99                        │
│ │                                                      │
│ ├─ ▼ LOCAL VARIABLES                                   │
│ │  ├─ req: { method: 'POST', path: '/checkout' }       │
│ │  ├─ session: { active: true, claims: [...] }         │
│ │  └─ address: "123 Main St, New York"                 │
│ │                                                      │
│ ├─ ▼ CALL STACK                                        │
│ │  ├─ 0: CheckoutController.ts:line 45                 │
│ │  ├─ 1: Router.ts:line 102                            │
│ │  └─ 2: Server.ts:line 12                             │
└────────────────────────────────────────────────────────┘
Interactive Call Stack:
Click on any stack frame in the Call Stack block to dynamically switch the Variables panel to inspect the exact heap state of that specific scope level!
Text Filters:
Type into the Variables panel search bar to instantly isolate deep keys on heavy payloads (like Express request headers).
AI-Native Debugging with MCP
Previous
Node.js SDK Setup Guide
Next
⌘
I
Powered by
This documentation is built and hosted on Mintlify, a developer documentation platform
Terms of Service
On this page
Back to top
🔌 1. Installation
⚙️ 2. Connection & Configuration
Setting the Server URL
🎯 3. Inserting and Managing Probes
🔍 4. Inspecting Captured Telemetry