DEVELOPMENT / WEB INSPECTOR

Find the Dowe source behind any view

Use the in-page inspector during dowe dev to connect a rendered web element to its authored component, source path, and exact lines without opening a browser extension.

1 / START THE WEB INSPECTOR

Run the web development target

The inspector is injected only by the Dowe development client when the selected targets include web. Its branded orb and dock start in the lower-left corner, and its enabled and hidden states survive responsive reloads in the same browser tab, while deploy output and native targets do not receive it.

dowe
dowe dev --target web
dowe dev --target server --target web
Alt+Shift+I
The inspector does not require a Chrome extension. It is part of the existing same-origin Dowe development client and is available only on the local web development page.

2 / INSPECTION WORKFLOW

From rendered element to agent context

Enable the overlay, move across the page, and select the authored node you want to change. The floating toggle can be dragged whenever it covers the element you need to inspect. The Inspect panel hides detail sections for space; use Show details beside Copy to reveal them, and select any authored ancestor in the rendered hierarchy.

Step
Action
Result

No data

There are no records to display

3 / SOURCE METADATA

Read the declaration, not an implementation wrapper

The manifest resolves opaque DOM identifiers to authored Dowe nodes. A Section, AppBar, Button, Title, or nested component keeps its own source identity even when the web renderer adds internal HTML.

Field
Value
Why it matters

No data

There are no records to display

Literal wrappers generated inside a Button inherit Button metadata. They are not reported as independent Text views, so later Section and Title mappings remain aligned with the source order. Show details to expand the bounded compiled props, web classes, declared signals, actions, and current signal state for the selected node.

4 / ROUTE MAP

Browse the compiled web routes

Use the compact Solar Inspect and Routes icons in the dock header (hover for their names and route count) to switch tabs. Routes provides path/source search, compact grouped rows, and page and layout source spans; selecting a path navigates the current development page so you can continue inspecting in context.

dowe
/dashboard
Page: views/pages/dashboard.dowe:1-84
Layout: views/layouts/app-layout.dowe:1-42

5 / LIVE VIEWPORT

Compare breakpoints with the actual page

The dock header reports the live browser width, height, and active Dowe breakpoint. Resize the development page itself to compare Mobile, Tablet, Desktop, and Wide behavior; the inspector does not create a nested iframe or second session.

6 / AGENT HANDOFF

Copy a precise change target

After selecting a node, copy the generated context into your coding agent. It names the component, project-relative file, inclusive line span, and imported usage path when one exists.

dowe
Dowe source selected: Section at views/pages/home.dowe:36-48.
Usage: views/pages/home.dowe:12.
Modify this selected view node.

Review Dowe Dev artifacts

7 / TARGET CONTRACT

Development-only by construction

The compiler, web generator, and runtime gate the inspector together. The normal shared source model remains unchanged for Android, iOS, desktop, and deploy builds.

Command or target
Inspector
Generated surface

No data

There are no records to display

dowe
.dowe/web/inspector.json
.dowe/dev/inspector-selection.json
/_dowe/dev/inspector.json
/_dowe/dev/inspector-selection