DevTools Surf — VS Code Extension

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.

DevTools Surf

devtoolssurf