# DevTools

> Elements, Console, Sources and Network for localhost:codevre and for dev-server tabs, plus the element picker and mobile viewport.

Last updated: October 17, 2026
Source: https://codevre.com/docs/ide/devtools

## Where to find them

- **localhost:codevre (VRE):** DevTools sit under the page and are open by default. Toggle them with the console button in the preview toolbar. It shows a dot when there's new output. Drag the top edge to resize. The size and open state are saved with the project.
- **Dev-server tabs (`localhost:PORT`):** Nodepod DevTools use the same four panels and look. Toggle them with the console button in the Browser's URL bar, which shows a dot when there are console messages. They follow whichever server tab is active, open by default at 180 px, and their size and open state are saved with the project.

Your browser's own DevTools (F12) still work too, but the previews run in cross-origin frames, so Codevre's panels are usually easier.

## Panels

The action bar has the element picker, a highlight toggle (eye), Refresh, Clear, a filter box, **Toggle mobile viewport** and Close.

### Console

- Shows `console.log`, `info`, `debug`, `warn` and `error`, plus uncaught errors ("Uncaught Error: …") and unhandled promise rejections.
- Objects and arrays expand. `console.table` renders as a table. `console.count` works.
- Each message shows the file and line it came from; click to open it in **Sources**.
- Failed network requests also appear here (`GET /data.json 404 (Not Found)`).
- Noise from browser extensions (wallets, password managers, ad blockers) is filtered out.
- There's no input line for running code. Use your page's code, or the Agent's inspect tools.

### Elements

- The live DOM tree on the left; details on the right.
- `<script>` and `<link>` nodes show their project path and a short preview of their content.
- **Styles:** the element's inline `style`. Toggle each property with its checkbox, click a name or value to edit (Enter moves on, Esc cancels), and use the color swatches.
- **Computed:** every computed style.
- **Layout:** a box-model diagram (margin, border, padding, content) and position, display, size and offsets.

Style edits apply to the running page immediately, **but aren't written to your files.** Copy the values into your CSS to keep them.

### Sources

- Every file the page loaded, grouped by origin: your project, then CDNs and other hosts.
- Read-only, with line numbers. Clicking a console origin jumps to the line.
- Images, audio and video show a preview. Files over 8,000 lines or 350,000 characters are truncated, with a link to open the full file.

### Network

- Columns: **Name**, **Status**, **Type**, **Size**, **Time**, **Initiator**. Click the initiator to see the code that made the request.
- In VRE, project files are served from memory and show as `VFS · 0 ms` rows. Files loaded from storage show `remote`. Real network requests (CDNs, APIs) show their real status and timing.
- Codevre's own infrastructure calls are hidden. Errors are always shown.

## The element picker

Click **Select an element in the page** (Elements tab), then hover the page:

| Color | Area |
|---|---|
| Orange | Margin |
| Yellow | Border |
| Green | Padding |
| Blue | Content |
| Purple hatching | Gaps in a flex or grid container (when you hover the container itself) |

A tooltip shows the tag, id, up to four classes and the size (`W × H`). Click to select the element. Its box stays highlighted as the page animates or scrolls, and it's selected in the Elements tree. Hovering nodes in the tree highlights them in the page. The eye button hides or shows the highlight.

## Mobile viewport

**Toggle mobile viewport** shrinks the page to a phone width (390 px by default, minimum 280). Drag the right edge to resize; the current size shows as `W × H`. The setting persists across runs.

## Nodepod DevTools for servers

Pages served by a Node server in the terminal get DevTools through a small bridge script that Nodepod injects into the page, plus the runtime's service worker. They work like the VRE panels, with a few differences:

| | VRE (localhost:codevre) | Nodepod (server tabs) |
|---|---|---|
| Console | Expandable objects, `console.table` | Plain text (objects shown as JSON). Up to 1,000 messages, **cleared on every page load**, with no "preserve log" |
| Elements | Inline styles editable | Inline styles editable and toggleable; matched CSS rules shown read-only with their source file. While the picker is on, hovering the page updates the panel live |
| Sources | Files the page loaded | Two groups: **Project** (your files, read when you open them) and **Runtime** (what the server actually sent) |
| Network | Real requests, plus project files as `VFS` rows | The same, up to 1,000 entries. Codevre's own polling and bridge requests are hidden unless they fail |
| Request details | Not available | Not available (no headers or bodies) |
| Mobile viewport | Yes | Yes (390 px default, drag to resize) |

Both have no console input line.

### Each server starts clean

DevTools state is kept per server tab. When a new server, perhaps from another project, takes over the same port, its tab starts with empty panels. Logs from before the panel was opened aren't lost: the bridge buffers them and sends them when DevTools connect.

### The project-file fallback

Tiny test servers often answer every URL with `index.html`, so a request for `script.js` gets HTML back and the page breaks. To help, Codevre sends the service worker a copy of your project's text files (up to 5,000 files, 1 MB each, 4 MB in total; `node_modules`, `.git`, `.codevre` and binaries are skipped). When the server returns HTML for a JS, CSS or similar request, the real project file is served instead. The copy is refreshed before every reload. The first time it arrives, the page reloads once so early requests can use it.

### Navigation and screenshots

- Back, Forward and Reload in the Browser go through the bridge, so your current route is kept.
- External preview windows get the same DevTools commands as the embedded tab.
- Screenshots of server pages are rendered inside the page with SnapDOM, so they include live DOM state, fonts and CSS. They cover the visible area, the full page, or one element. A full-page capture can scroll through the page first so scroll-revealed content renders.

### For the Agent

The Agent reads the same data: `get_nodepod_context` for server tabs, and `get_vre_context` for VRE. It sees exactly what you see in the panels.