Run all 570+ DevTools Surf tools inside VS Code. Formatters, validators, converters, generators, REST client — without leaving the editor.
Features
- Open Panel — command palette entry that docks the full DevTools Surf site beside your editor. Search and use any tool without a browser tab.
- Right-click → Open with Selection — highlight text in any file, right-click, send it directly into the currently-active tool's input.
- Apply to Editor — in the panel's output, one click sends the result back to replace your selection.
- Live selection sync — change your selection, then run the "Push Current Selection to Panel" command to update the tool input without re-opening.
Usage
First time
- Install the extension.
- Open any file.
- Command Palette (
Cmd+Shift+P/Ctrl+Shift+P) → DevTools Surf: Open Panel.
Typical flow
- Select some JSON in your editor.
- Right-click → Open with Selection.
- Navigate to the tool you want (JSON Formatter, Validator, Diff, etc.) in the panel.
- The input is pre-filled. Hit the tool's action button.
- Click the Apply to Editor button at the bottom-right of the panel to replace your selection with the output.
Commands
| Command | Description |
|---|---|
DevTools Surf: Open Panel |
Open the panel, no prefill |
DevTools Surf: Open with Selection |
Open the panel + push your current selection as input |
DevTools Surf: Push Current Selection to Panel |
If the panel is already open, push a new selection into the active tool |
Settings
| Setting | Default | Description |
|---|---|---|
devtoolsSurf.baseUrl |
https://devtools.surf |
Base URL of the site. Override to point at a local dev server (e.g. http://localhost:3004). |
devtoolsSurf.retainContext |
true |
Keep the panel state when it loses focus. Turn off to reload the site every time. |
How it works
The extension opens a VS Code WebView panel with an iframe pointed at https://devtools.surf/?embed=vscode. The ?embed=vscode flag tells the site to:
- Hide its own header and footer (VS Code gives its own chrome)
- Persist the mode across internal navigation via sessionStorage
- Render a floating "Apply to Editor" button that forwards the current output back to the extension
Messages flow:
┌────────────────┐ ┌──────────────────────┐
│ VS Code │ vscode:selection → → │ devtools.surf │
│ editor │ │ (inside iframe) │
│ │ ← ← devtools:apply │ │
└────────────────┘ └──────────────────────┘
The extension never sees the tool logic — that all happens client-side on the website. Adding a new tool on devtools.surf makes it instantly available in VS Code; the extension stays the same.
Requirements
- VS Code 1.85.0 or newer
- Internet access (the panel loads https://devtools.surf by default)
License
MIT.