feat(browser): replace the preview proxy with a real browser panel and an agent web tool (#2883)
The preview panel worked by proxying a dev server through OpenChamber's own origin and rewriting the HTML that came back. Anything the rewriter did not anticipate broke, and pages that refuse to be embedded never loaded at all. This deletes the proxy (-1604 lines and its tests) and merges the preview and browser panels into one surface backed by a real Chromium view. What the panel is now - A `<webview>` in its own session partition: logins and cookies persist, hot reload works because nothing is rewritten, DevTools are one click away. - Annotation: pick one element, drag a region, or draw freehand, write a note, and it reaches chat with a screenshot of the visible page with the marks on it. - Toolbar: hard reload, page zoom, device sizes, a light/dark switch that applies to the page rather than the app, and cookie/cache clearing scoped to the panel alone. - Several pages at once, each tab showing the page's own favicon, and an address bar that suggests pages already visited in this project. - Dev servers are listed from what is actually listening on the machine, checked against what a project announced, so a server is offered no matter how it was started. One that is still starting is waited for instead of failing. Remote dev servers The desktop app binds a local port and pipes raw bytes to the OpenChamber host over the existing authenticated connection, so the page keeps its own origin at the root of its own host. The reachable set is exactly what discovery reports and is re-checked per connection, so an authenticated client cannot dial arbitrary local services on the host. Links and redirects to another loopback port stay on the machine that served the page. A tunnel that cannot be opened is reported; it is never replaced by the plain loopback URL, which would answer from the user's own machine under a remote address. Agent control Browser actions are a separate `openchamber_web` tool: open, snapshot, click, type, scroll, inspect computed styles, resize between mobile/tablet/desktop, and capture a screenshot into `.openchamber/screenshots/` in the project. The existing `openchamber` tool keeps sessions, worktrees and scheduled tasks. Each has its own setting in the new Settings -> General -> OpenChamber Tools section, and the plugin is not injected at all when both are off. Capability belongs to the connected client, not to configuration: a client declares on its event stream that it can drive a page, which only a Chromium host does. Exactly one client performs each request — it claims the request before acting, and the first claim wins — because deciding by whose result arrives first would be too late for a click that already happened. No client listening is answered immediately with an explanation rather than a timeout. Runtime boundaries Web tabs get a plain iframe that can display a page but not inspect one. The VS Code extension no longer offers the surface at all, since nothing that makes the panel worth having works there. Mobile is unaffected. Native boundary Camera, microphone, location and device-picker requests from panel pages are denied — Electron grants them by default when no handler is set, and the panel loads whatever address the user types. Page capture, appearance emulation and storage clearing verify that their target belongs to the panel's own session instead of trusting a web-contents id from the renderer. Persisted state Stored `preview` tabs migrate to `browser` (v13 -> v14). Context panel tab limits are now per surface, so filling one surface no longer evicts another's tabs. Address history is stored per project and per runtime. Documentation `preview.mdx` and `desktop-browser.mdx` rewritten across all locales, the agent tool settings path corrected, new `DOCUMENTATION.md` for the browser-control broker and the dev tunnel, and the `ui-api-decoupling` skill updated where it still described the deleted proxy.
This commit is contained in:
committed by
GitHub
parent
50613bb170
commit
a5aa32446d
@@ -28,7 +28,7 @@ The tool can list projects and model preferences, create and follow up on sessio
|
||||
|
||||
## Turn the tool on or off
|
||||
|
||||
Open **Settings → General → OpenCode CLI**, change **Agent control tool**, then select **Save + Reload**. The setting applies after the managed OpenCode server restarts.
|
||||
Open **Settings → General → OpenChamber Tools** and change **Agent control tool**. The setting applies once the managed OpenCode server restarts, which OpenChamber offers as **Apply & Restart**.
|
||||
|
||||
The tool is not available when OpenChamber connects to an external OpenCode server through `OPENCODE_HOST` or skip-start, or inside the VS Code extension. Desktop and web installations that use OpenChamber's managed OpenCode server support it automatically.
|
||||
|
||||
@@ -37,3 +37,4 @@ The tool is not available when OpenChamber connects to an external OpenCode serv
|
||||
- [Scheduled Tasks](/scheduled-tasks/)
|
||||
- [Worktree Sessions](/worktrees/)
|
||||
- [Session Goals](/session-goals/)
|
||||
- [Browser Panel](/desktop-browser/) — the OpenChamber Web tool, for looking at and driving a page
|
||||
|
||||
@@ -28,7 +28,7 @@ Das Werkzeug kann Projekte und Modelleinstellungen auflisten, Sitzungen erstelle
|
||||
|
||||
## Werkzeug ein- oder ausschalten
|
||||
|
||||
Öffne **Einstellungen → Allgemein → OpenCode CLI**, ändere **Agent control tool** und wähle dann **Save + Reload**. Die Einstellung gilt, nachdem der verwaltete OpenCode-Server neu gestartet wurde.
|
||||
Öffne **Einstellungen → Allgemein → OpenChamber-Werkzeuge** und ändere **Agent control tool**. Die Einstellung gilt, sobald der verwaltete OpenCode-Server neu startet — OpenChamber bietet das als **Apply & Restart** an.
|
||||
|
||||
Das Werkzeug ist nicht verfügbar, wenn OpenChamber über `OPENCODE_HOST` oder skip-start mit einem externen OpenCode-Server verbunden ist oder innerhalb der VS-Code-Erweiterung läuft. Desktop- und Web-Installationen, die den verwalteten OpenCode-Server von OpenChamber verwenden, unterstützen es automatisch.
|
||||
|
||||
@@ -37,3 +37,4 @@ Das Werkzeug ist nicht verfügbar, wenn OpenChamber über `OPENCODE_HOST` oder s
|
||||
- [Geplante Aufgaben](/scheduled-tasks/)
|
||||
- [Worktree-Sitzungen](/worktrees/)
|
||||
- [Sitzungsziele](/session-goals/)
|
||||
- [Browser-Panel](/desktop-browser/) — das OpenChamber-Web-Werkzeug, um eine Seite anzusehen und zu bedienen
|
||||
|
||||
@@ -1,22 +1,53 @@
|
||||
---
|
||||
title: Desktop-Browser
|
||||
description: Durchsuche jede Seite in der Desktop-App mit Inspektion und Konsolenaufzeichnung.
|
||||
title: Browser-Panel
|
||||
description: Öffne jede Seite in der App, annotiere sie und lass den Agenten sie bedienen.
|
||||
---
|
||||
|
||||
# Desktop-Browser
|
||||
# Browser-Panel
|
||||
|
||||
Die Desktop-App hat einen eingebauten Browser, damit du jede Seite direkt neben deinem Chat öffnen, auf Elemente zeigen und danach fragen sowie die Konsole der Seite aufzeichnen kannst. Öffne ihn über die Globus-Schaltfläche im App-Kopfbereich.
|
||||
Das Browser-Panel öffnet jede Seite direkt neben deinem Chat. Öffne es über die Globus-Schaltfläche in der Kopfzeile.
|
||||
|
||||
> Der Desktop-Browser ist eine Funktion **nur für den Desktop**. Im Web bietet das [Preview](/preview/)-Panel dieselben Inspektions- und Konsolentools für deinen lokalen Dev-Server.
|
||||
In der Desktop-App ist es ein echter Browser: Deine Logins bleiben erhalten, Hot Reload funktioniert, und die Entwicklerwerkzeuge sind einen Klick entfernt. In einem Browser-Tab zeigt das Panel eine Seite zwar an, kann aber nicht in sie hineinsehen — die Annotationswerkzeuge unten gibt es nur auf dem Desktop.
|
||||
|
||||
## Inspizieren und annotieren
|
||||
Seiten, die hier geöffnet werden, bekommen keinen Zugriff auf Kamera, Mikrofon oder Standort: solche Anfragen werden abgelehnt.
|
||||
|
||||
Aktiviere **inspect** und klicke auf ein beliebiges Element auf der Seite. OpenChamber erstellt dazu eine Notiz — was es ist, welche Stile es hat, wo es sich befindet und einen Screenshot — und hängt sie an deine Chatnachricht an. Das ist der schnellste Weg, dem Agenten zu sagen: „dieses Element, genau hier“.
|
||||
## Die Werkzeugleiste
|
||||
|
||||
## Konsolenaufzeichnung
|
||||
Die Adressleiste merkt sich Seiten, die du in diesem Projekt geöffnet hast, und schlägt sie beim Tippen vor — passend zu einem Teil der Adresse oder des Seitentitels. Mit den Pfeiltasten gehst du durch die Liste, Enter öffnet den markierten Eintrag, und die Schaltfläche in einer Zeile entfernt ihn.
|
||||
|
||||
Der Browser sammelt die Konsolenausgabe der Seite — Fehler, Warnungen und Logs — damit du sie filtern und lesen kannst, ohne die Entwicklertools zu öffnen.
|
||||
Daneben liegt **Neu laden**, dazu ein **hartes Neuladen**, das den Cache übergeht, wenn eine Änderung partout nicht erscheint, sowie eine Zoomsteuerung, die nur die Seite skaliert.
|
||||
|
||||
**Cookies löschen** und **Zwischengespeicherte Daten löschen** gelten allein für dieses Panel. Deine OpenChamber-Sitzung und andere Fenster bleiben unberührt.
|
||||
|
||||
## Eine Seite annotieren
|
||||
|
||||
Drücke **Annotieren**, und über der Seite erscheint eine Leiste mit drei Werkzeugen:
|
||||
|
||||
- **Element** — klicke ein Element an. Ein Klick auf ein anderes verschiebt die Auswahl, ein erneuter Klick auf dasselbe hebt sie auf.
|
||||
- **Bereich** — ziehe einen Rahmen um einen Ausschnitt, wenn es um mehr als ein Element geht.
|
||||
- **Zeichnen** — skizziere frei über die Seite.
|
||||
|
||||
Schreib dein Anliegen in das Feld neben deiner Markierung und drücke **Anhängen** — oder einfach Enter. Deine Chat-Nachricht bekommt eine Karte mit allem Markierten, deiner Notiz und einem Screenshot der sichtbaren Seite mit deinen Markierungen darauf — du kannst also „dieser Button, etwas runder" sagen, statt zu beschreiben, wo er steht.
|
||||
|
||||
Die Seite selbst wird nie verändert — Annotieren markiert nur, was da ist. `Esc` bricht ab und schließt die Leiste.
|
||||
|
||||
## Den Agenten steuern lassen
|
||||
|
||||
Der Agent kann das Browser-Panel selbst benutzen — eine Seite öffnen, lesen, was darauf steht, klicken, tippen, scrollen und zwischen mobiler, Tablet- und Desktop-Ansicht wechseln — um seine eigene Arbeit zu prüfen, statt dich darum zu bitten. Du siehst es im Panel passieren.
|
||||
|
||||
Beliebigen Code kann der Agent auf der Seite nicht ausführen. Der Browser behält deine echten Logins, deshalb bleibt er auf die genannten Aktionen beschränkt.
|
||||
|
||||
Er kann außerdem ein Bild dessen, was er sieht, in `.openchamber/screenshots/` in deinem Projekt speichern und es dir in seiner Antwort zeigen. Genau das macht ein Vorher-Nachher möglich, und die Datei bleibt danach liegen, um sie an einen Pull Request zu hängen.
|
||||
|
||||
Die Browser-Aktionen sind das **OpenChamber-Web-Werkzeug**, das sich unter **Einstellungen → Allgemein → OpenChamber-Werkzeuge** einzeln ein- und ausschalten lässt.
|
||||
|
||||
Dafür braucht es die Desktop-App: eine Seite in einem Browser-Tab lässt sich nicht steuern.
|
||||
|
||||
## Entwicklerwerkzeuge
|
||||
|
||||
Drücke die Terminal-Schaltfläche in der Leiste, um Chromiums eigene Entwicklerwerkzeuge für die Seite zu öffnen — Konsole, Netzwerk, Elemente, alles Gewohnte.
|
||||
|
||||
## Verwandt
|
||||
|
||||
- [Preview & Dev Servers](/preview/) — dieselben Tools für deinen lokalen Dev-Server
|
||||
- [Vorschau & Dev-Server](/preview/) — deine laufende App öffnen, auch auf einem entfernten Rechner
|
||||
- [Agenten-Steuerungswerkzeug](/agent-control-tool/) — Sitzungen, Worktrees und geplante Aufgaben aus dem Chat
|
||||
|
||||
@@ -1,32 +1,35 @@
|
||||
---
|
||||
title: Vorschau & Entwicklungsserver
|
||||
description: Öffne einen laufenden Entwicklungsserver direkt in OpenChamber.
|
||||
title: Vorschau & Dev-Server
|
||||
description: Öffne einen laufenden Dev-Server direkt in OpenChamber.
|
||||
---
|
||||
|
||||
# Vorschau & Entwicklungsserver
|
||||
# Vorschau & Dev-Server
|
||||
|
||||
Wenn du einen Entwicklungsserver startest, kann OpenChamber ihn direkt in der App öffnen statt in einem separaten Browser-Tab — so kannst du deine Seite neben dem Chat sehen, ihre Konsole aufzeichnen und Elemente anstupsen, um Fragen dazu zu stellen.
|
||||
Wenn du einen Dev-Server startest, kann OpenChamber ihn direkt in der App öffnen statt in einem separaten Browser-Tab — so siehst du deine Seite neben dem Chat und kannst auf Elemente zeigen, um danach zu fragen.
|
||||
|
||||
## Eine Vorschau öffnen
|
||||
## Einen Dev-Server öffnen
|
||||
|
||||
OpenChamber überwacht die Terminalausgabe auf eine lokale Adresse (die `Local:`-Zeile, die Werkzeuge wie Vite, Next.js oder Astro ausgeben). Sobald es eine findet:
|
||||
Öffne das Browser-Panel über die Globus-Schaltfläche in der Kopfzeile. Läuft bereits ein Dev-Server, steht er dort in der Liste und ein Klick öffnet ihn — OpenChamber findet ihn daran, was auf deinem Rechner tatsächlich lauscht, also unabhängig davon, wie du ihn gestartet hast.
|
||||
|
||||
- erscheint im Terminal eine Schaltfläche **Open preview**
|
||||
- öffnet eine [Projektaktion](/project-actions/) mit aktiviertem Auto-Open die Vorschau für dich
|
||||
- kann auch ein lokaler Link in einer Chatnachricht sie öffnen
|
||||
Ein Dev-Server öffnet sich außerdem automatisch, wenn:
|
||||
|
||||
Die Seite lädt im Seitenbereich. Nur lokale Adressen (auf deinem eigenen Rechner) können als Vorschau geöffnet werden.
|
||||
- du im Terminal bei einer lokalen Adresse auf **Vorschau öffnen** drückst
|
||||
- eine [Projektaktion](/project-actions/) mit aktiviertem Auto-Öffnen einen startet
|
||||
- du einem lokalen Link in einer Chat-Nachricht folgst
|
||||
|
||||
## Konsole und Inspektion
|
||||
Du kannst die Adresse jederzeit selbst eintippen. Ein bloßes `localhost:5173` wird als `http://` verstanden, das Schema musst du also nicht mitschreiben.
|
||||
|
||||
Im Vorschau-Bereich kannst du:
|
||||
## Mit einem entfernten OpenChamber arbeiten
|
||||
|
||||
- die **Konsole** der Seite beobachten — Fehler, Warnungen und Protokolle, so gefiltert, wie du möchtest
|
||||
- **inspect** einschalten, auf ein beliebiges Element klicken und eine Notiz dazu senden — Selektor, Stile, Position und ein Screenshot — direkt in den Chat
|
||||
Läuft OpenChamber auf einem anderen Rechner, liegt sein Dev-Server ebenfalls auf *jenem* Rechner — `localhost` auf deinem Laptop führt ganz woandershin. Die Desktop-App erledigt das für dich: Sie öffnet einen lokalen Port, der die Verbindung zum entfernten Dev-Server durchreicht. Die Seite lädt ganz normal, mit funktionierendem Hot Reload und Entwicklerwerkzeugen. Du tippst weiterhin die Adresse, die du erwartest; die Technik dahinter bleibt dir aus dem Weg.
|
||||
|
||||
Das ist der schnellste Weg, dem Agenten "diese Schaltfläche hier" zu sagen, ohne sie beschreiben zu müssen.
|
||||
Dafür brauchst du die Desktop-App. In einem Browser-Tab lassen sich nur Dev-Server auf deinem eigenen Rechner öffnen.
|
||||
|
||||
## Die Seite annotieren
|
||||
|
||||
Wie du auf Elemente zeigst, auf der Seite zeichnest und alles in den Chat schickst, steht unter [Browser-Panel](/desktop-browser/).
|
||||
|
||||
## Verwandt
|
||||
|
||||
- [Projektaktionen](/project-actions/) — einen Server automatisch öffnen, wenn du ihn startest
|
||||
- [Desktop-Browser](/desktop-browser/) — dieselben Werkzeuge für jede Seite, auf dem Desktop
|
||||
- [Projektaktionen](/project-actions/) — einen Server beim Start automatisch öffnen
|
||||
- [Browser-Panel](/desktop-browser/) — Seiten annotieren und den Agenten steuern lassen
|
||||
|
||||
@@ -1,22 +1,63 @@
|
||||
---
|
||||
title: Desktop Browser
|
||||
description: Browse any page inside the desktop app, with inspect and console capture.
|
||||
title: Browser Panel
|
||||
description: Browse any page inside the app, annotate it, and let the agent drive it.
|
||||
---
|
||||
|
||||
# Desktop Browser
|
||||
# Browser Panel
|
||||
|
||||
The desktop app has a built-in browser so you can open any page right next to your chat, point at elements to ask about them, and capture the page's console. Open it from the globe button in the app header.
|
||||
The browser panel opens any page right next to your chat. Open it from the globe button in the app header.
|
||||
|
||||
> The desktop browser is a **desktop-only** feature. On the web, the [preview](/preview/) panel offers the same inspect-and-console tools for your local dev server.
|
||||
On the desktop app it is a real browser: your logins persist, hot reload works, and developer tools are one click away. In a web browser tab the panel can still display a page, but it cannot look inside one — the annotation tools below are desktop-only. The VS Code extension has no browser panel at all: VS Code is already an editor with a browser beside it, and everything that makes this panel worth having needs the desktop app.
|
||||
|
||||
## Inspect and annotate
|
||||
Pages opened here cannot use your camera, microphone, or location: those requests are refused.
|
||||
|
||||
Turn on **inspect** and click any element on the page. OpenChamber captures a note about it — what it is, its styles, where it sits, and a screenshot — and attaches it to your chat message. It's the quickest way to tell the agent "this element, right here."
|
||||
## The toolbar
|
||||
|
||||
## Console capture
|
||||
The address bar remembers pages you have opened in this project and offers them as you type, matching part of an address or a page title. Arrow keys move through the list, Enter opens the highlighted entry, and the button on a row removes it.
|
||||
|
||||
The browser collects the page's console output — errors, warnings, and logs — so you can filter and read it without opening developer tools.
|
||||
**Reload** is next to it, along with a **hard reload** that ignores the cache when a change refuses to show up, and zoom controls that scale the page only.
|
||||
|
||||
**Clear cookies** and **Clear cached data** apply to this panel alone. Your OpenChamber session and any other window are untouched.
|
||||
|
||||
## Annotate a page
|
||||
|
||||
Press **Annotate** and a toolbar appears over the page with three tools:
|
||||
|
||||
- **Element** — click an element. Clicking another moves the selection; clicking the same one again clears it.
|
||||
- **Region** — drag a box around an area, when what you mean covers more than one element.
|
||||
- **Draw** — sketch freehand over the page.
|
||||
|
||||
Write what you want in the box that appears beside your mark, and press **Attach** — or just press Enter. Your chat message gets a card with everything you marked, your note, and a screenshot of the visible page with your marks drawn on it — so you can say "this button, a bit rounder" instead of describing where it is.
|
||||
|
||||
The page itself is never modified — annotating marks what is there. `Esc` cancels and closes the toolbar.
|
||||
|
||||
## Let the agent drive
|
||||
|
||||
The agent can use the browser panel itself — opening a page, reading what is on it, clicking, typing, scrolling, and switching between mobile, tablet and desktop layouts — so it can check its own work instead of asking you to. You will see it happening in the panel.
|
||||
|
||||
The agent cannot run arbitrary code in the page. The browser keeps your real logins, so it is limited to the specific actions above.
|
||||
|
||||
It can also save a picture of what it is looking at into `.openchamber/screenshots/` in your project and show it to you in its reply. That is what makes a before-and-after possible, and the file stays there afterwards to attach to a pull request.
|
||||
|
||||
The browser actions are the **OpenChamber Web tool**, which can be turned on and off on its own in **Settings → General → OpenChamber Tools**.
|
||||
|
||||
This needs the desktop app: a page shown in a web browser tab cannot be driven.
|
||||
|
||||
## Size and appearance
|
||||
|
||||
Press the phone button to open the device bar. Pick a preset or type a width and
|
||||
height, and the page is laid out at that size — scaled down to fit the panel
|
||||
when it is bigger, but still measuring itself at the size you asked for.
|
||||
|
||||
The same bar forces the page to light or dark, so a theme can be checked without
|
||||
changing anything on your machine. It leaves DevTools alone; a page can only
|
||||
have one debugger attached, so close DevTools first if it is open.
|
||||
|
||||
## Developer tools
|
||||
|
||||
Press the terminal button in the toolbar to open Chromium's own developer tools for the page — console, network, elements, everything you would expect.
|
||||
|
||||
## Related
|
||||
|
||||
- [Preview & Dev Servers](/preview/) — the same tools for your local dev server
|
||||
- [Preview & Dev Servers](/preview/) — opening your running app, including on a remote machine
|
||||
- [Agent Control Tool](/agent-control-tool/) — sessions, worktrees and scheduled tasks from chat
|
||||
|
||||
@@ -28,7 +28,7 @@ La herramienta puede listar proyectos y preferencias de modelos, crear y continu
|
||||
|
||||
## Activar o desactivar la herramienta
|
||||
|
||||
Abre **Ajustes → General → OpenCode CLI**, cambia **Herramienta de control para agentes** y selecciona **Save + Reload**. El ajuste se aplica cuando se reinicia el servidor OpenCode gestionado.
|
||||
Abre **Ajustes → General → Herramientas de OpenChamber** y cambia **Herramienta de control para agentes**. El ajuste se aplica cuando se reinicia el servidor OpenCode gestionado, que OpenChamber ofrece como **Apply & Restart**.
|
||||
|
||||
La herramienta no está disponible cuando OpenChamber se conecta a un servidor OpenCode externo mediante `OPENCODE_HOST` o skip-start, ni dentro de la extensión de VS Code. Las instalaciones web y de escritorio que usan el servidor OpenCode gestionado por OpenChamber la admiten automáticamente.
|
||||
|
||||
@@ -37,3 +37,4 @@ La herramienta no está disponible cuando OpenChamber se conecta a un servidor O
|
||||
- [Tareas programadas](/es/scheduled-tasks/)
|
||||
- [Sesiones de worktree](/es/worktrees/)
|
||||
- [Objetivos de sesión](/es/session-goals/)
|
||||
- [Panel del navegador](/es/desktop-browser/) — la herramienta OpenChamber Web, para ver una página y manejarla
|
||||
|
||||
@@ -1,22 +1,53 @@
|
||||
---
|
||||
title: Navegador de escritorio
|
||||
description: Navega cualquier página dentro de la app de escritorio, con inspección y captura de consola.
|
||||
title: Panel del navegador
|
||||
description: Navega cualquier página dentro de la aplicación, anótala y deja que el agente la maneje.
|
||||
---
|
||||
|
||||
# Navegador de escritorio
|
||||
# Panel del navegador
|
||||
|
||||
La app de escritorio tiene un navegador integrado para que abras cualquier página justo al lado de tu chat, señales elementos para preguntar sobre ellos y captures la consola de la página. Ábrelo desde el botón del globo en el encabezado de la app.
|
||||
El panel del navegador abre cualquier página justo al lado del chat. Ábrelo con el botón del globo de la cabecera.
|
||||
|
||||
> El navegador de escritorio es una función **solo de escritorio**. En la web, el panel de [vista previa](/es/preview/) ofrece las mismas herramientas de inspección y consola para tu servidor de desarrollo local.
|
||||
En la aplicación de escritorio es un navegador de verdad: tus sesiones se mantienen, la recarga en caliente funciona y las herramientas de desarrollo están a un clic. En una pestaña del navegador el panel puede mostrar una página, pero no mirar dentro de ella: las herramientas de anotación de abajo son solo de escritorio.
|
||||
|
||||
## Inspecciona y anota
|
||||
Las páginas que abras aquí no pueden usar tu cámara, tu micrófono ni tu ubicación: esas peticiones se rechazan.
|
||||
|
||||
Activa **inspect** y haz clic en cualquier elemento de la página. OpenChamber captura una nota sobre él —qué es, sus estilos, dónde se sitúa y una captura de pantalla— y la adjunta a tu mensaje del chat. Es la forma más rápida de decirle al agente "este elemento, justo aquí".
|
||||
## La barra de herramientas
|
||||
|
||||
## Captura de consola
|
||||
La barra de direcciones recuerda las páginas que has abierto en este proyecto y las ofrece mientras escribes, buscando en parte de la dirección o del título de la página. Las flechas recorren la lista, Enter abre la entrada resaltada y el botón de una fila la quita.
|
||||
|
||||
El navegador recopila la salida de la consola de la página —errores, advertencias y registros— para que puedas filtrarla y leerla sin abrir las herramientas de desarrollo.
|
||||
Al lado está **Recargar**, junto con una **recarga forzada** que ignora la caché cuando un cambio se niega a aparecer, y los controles de zoom, que escalan solo la página.
|
||||
|
||||
**Borrar cookies** y **Borrar datos en caché** afectan únicamente a este panel. Tu sesión de OpenChamber y cualquier otra ventana quedan intactas.
|
||||
|
||||
## Anotar una página
|
||||
|
||||
Pulsa **Anotar** y aparecerá una barra sobre la página con tres herramientas:
|
||||
|
||||
- **Elemento** — haz clic en un elemento. Hacer clic en otro mueve la selección; volver a hacer clic en el mismo la quita.
|
||||
- **Región** — arrastra un recuadro alrededor de una zona cuando te refieras a más de un elemento.
|
||||
- **Dibujar** — traza a mano alzada sobre la página.
|
||||
|
||||
Escribe lo que quieres en el cuadro que aparece junto a tu marca y pulsa **Adjuntar**, o simplemente Enter. Tu mensaje recibe una tarjeta con todo lo que has marcado, tu nota y una captura de la página visible con tus marcas dibujadas encima — así puedes decir "este botón, un poco más redondeado" en vez de describir dónde está.
|
||||
|
||||
La página en sí nunca se modifica: anotar solo marca lo que ya está ahí. `Esc` cancela y cierra la barra.
|
||||
|
||||
## Dejar que el agente maneje
|
||||
|
||||
El agente puede usar el panel del navegador por su cuenta — abrir una página, leer lo que hay en ella, hacer clic, escribir, desplazarse y alternar entre diseño móvil, de tableta y de escritorio — para comprobar su propio trabajo en lugar de pedírtelo a ti. Lo verás ocurrir en el panel.
|
||||
|
||||
El agente no puede ejecutar código arbitrario en la página. El navegador conserva tus sesiones reales, así que se limita a las acciones anteriores.
|
||||
|
||||
También puede guardar una imagen de lo que está viendo en `.openchamber/screenshots/` de tu proyecto y mostrártela en su respuesta. Eso es lo que hace posible un antes y después, y el archivo se queda ahí para adjuntarlo a un pull request.
|
||||
|
||||
Las acciones del navegador son la **herramienta OpenChamber Web**, que se activa y desactiva por separado en **Ajustes → General → Herramientas de OpenChamber**.
|
||||
|
||||
Esto necesita la aplicación de escritorio: una página mostrada en una pestaña del navegador no se puede controlar.
|
||||
|
||||
## Herramientas de desarrollo
|
||||
|
||||
Pulsa el botón de terminal de la barra para abrir las herramientas de desarrollo propias de Chromium — consola, red, elementos, todo lo habitual.
|
||||
|
||||
## Relacionado
|
||||
|
||||
- [Vista previa y servidores de desarrollo](/es/preview/) — las mismas herramientas para tu servidor de desarrollo local
|
||||
- [Vista previa y servidores de desarrollo](/preview/) — abrir tu aplicación en marcha, también en una máquina remota
|
||||
- [Herramienta de control para agentes](/es/agent-control-tool/) — sesiones, worktrees y tareas programadas desde el chat
|
||||
|
||||
@@ -5,28 +5,31 @@ description: Abre un servidor de desarrollo en marcha dentro de OpenChamber.
|
||||
|
||||
# Vista previa y servidores de desarrollo
|
||||
|
||||
Cuando inicias un servidor de desarrollo, OpenChamber puede abrirlo dentro de la propia app en lugar de en una pestaña de navegador aparte, para que veas tu sitio junto al chat, captures su consola y señales elementos para preguntar sobre ellos.
|
||||
Cuando arrancas un servidor de desarrollo, OpenChamber puede abrirlo dentro de la propia aplicación en lugar de en una pestaña aparte — así ves tu sitio junto al chat y puedes señalar elementos para preguntar por ellos.
|
||||
|
||||
## Abre una vista previa
|
||||
## Abrir un servidor de desarrollo
|
||||
|
||||
OpenChamber observa la salida de la terminal en busca de una dirección local (la línea `Local:` que imprimen herramientas como Vite, Next.js o Astro). Cuando detecta una:
|
||||
Abre el panel del navegador con el botón del globo de la cabecera. Si ya hay un servidor en marcha, aparece en la lista y se abre con un clic: OpenChamber lo encuentra mirando qué está escuchando de verdad en tu máquina, así que funciona sin importar cómo lo hayas arrancado.
|
||||
|
||||
- en la terminal aparece un botón **Open preview**
|
||||
- una [acción de proyecto](/es/project-actions/) con la apertura automática activada la abre por ti
|
||||
- un enlace local en un mensaje del chat también puede abrirla
|
||||
Un servidor de desarrollo también se abre solo cuando:
|
||||
|
||||
El sitio se carga en el panel lateral. Solo se pueden previsualizar direcciones locales (en tu propia máquina).
|
||||
- pulsas **Abrir vista previa** sobre una dirección local en la terminal
|
||||
- una [acción de proyecto](/project-actions/) con apertura automática arranca uno
|
||||
- sigues un enlace local en un mensaje del chat
|
||||
|
||||
## Consola e inspección
|
||||
Siempre puedes escribir la dirección a mano. Un simple `localhost:5173` se entiende como `http://`, así que no hace falta escribir el esquema.
|
||||
|
||||
En el panel de vista previa puedes:
|
||||
## Trabajar con un OpenChamber remoto
|
||||
|
||||
- ver la **consola** de la página —errores, advertencias y registros— filtrada como prefieras
|
||||
- activar **inspect**, hacer clic en cualquier elemento y enviar una nota sobre él —selector, estilos, posición y una captura de pantalla— directamente al chat
|
||||
Cuando OpenChamber corre en otra máquina, su servidor de desarrollo está en *esa* máquina — `localhost` en tu portátil apunta a otro sitio completamente distinto. La aplicación de escritorio se encarga: abre un puerto local que lleva la conexión hasta el servidor remoto, de modo que la página carga con normalidad, con recarga en caliente y herramientas de desarrollo funcionando. Tú sigues escribiendo la dirección que esperas; la fontanería no te estorba.
|
||||
|
||||
Esta es la forma más rápida de decirle al agente "este botón, aquí" sin describirlo.
|
||||
Esto requiere la aplicación de escritorio. En una pestaña del navegador solo se pueden abrir servidores de tu propia máquina.
|
||||
|
||||
## Anotar la página
|
||||
|
||||
Consulta [Panel del navegador](/desktop-browser/) para señalar elementos, dibujar sobre la página y enviarlo todo al chat.
|
||||
|
||||
## Relacionado
|
||||
|
||||
- [Acciones de proyecto](/es/project-actions/) — abre automáticamente un servidor al iniciarlo
|
||||
- [Navegador de escritorio](/es/desktop-browser/) — las mismas herramientas para cualquier página, en el escritorio
|
||||
- [Acciones de proyecto](/project-actions/) — abrir un servidor automáticamente al arrancarlo
|
||||
- [Panel del navegador](/desktop-browser/) — anotar páginas y dejar que el agente las maneje
|
||||
|
||||
@@ -28,7 +28,7 @@ L’outil peut répertorier les projets et les préférences de modèles, créer
|
||||
|
||||
## Activer ou désactiver l’outil
|
||||
|
||||
Ouvrez **Paramètres → Général → OpenCode CLI**, modifiez **Outil de contrôle pour les agents**, puis sélectionnez **Save + Reload**. Le réglage s’applique après le redémarrage du serveur OpenCode géré.
|
||||
Ouvrez **Paramètres → Général → Outils OpenChamber** et modifiez **Outil de contrôle pour les agents**. Le réglage s’applique au redémarrage du serveur OpenCode géré, que OpenChamber propose sous **Apply & Restart**.
|
||||
|
||||
L’outil n’est pas disponible quand OpenChamber se connecte à un serveur OpenCode externe avec `OPENCODE_HOST` ou skip-start, ni dans l’extension VS Code. Les installations desktop et web utilisant le serveur OpenCode géré par OpenChamber le prennent automatiquement en charge.
|
||||
|
||||
@@ -37,3 +37,4 @@ L’outil n’est pas disponible quand OpenChamber se connecte à un serveur Ope
|
||||
- [Tâches planifiées](/fr/scheduled-tasks/)
|
||||
- [Sessions worktree](/fr/worktrees/)
|
||||
- [Objectifs de session](/fr/session-goals/)
|
||||
- [Panneau navigateur](/fr/desktop-browser/) — l'outil OpenChamber Web, pour consulter une page et la piloter
|
||||
|
||||
@@ -1,22 +1,53 @@
|
||||
---
|
||||
title: Navigateur desktop
|
||||
description: Parcourez n’importe quelle page dans l’application desktop, avec inspection et capture de console.
|
||||
title: Panneau navigateur
|
||||
description: Parcourez n'importe quelle page dans l'application, annotez-la et laissez l'agent la piloter.
|
||||
---
|
||||
|
||||
# Navigateur desktop
|
||||
# Panneau navigateur
|
||||
|
||||
L’application desktop possède un navigateur intégré pour ouvrir n’importe quelle page juste à côté de votre chat, pointer des éléments pour poser des questions à leur sujet et capturer la console de la page. Ouvrez-le avec le bouton globe dans l’en-tête de l’application.
|
||||
Le panneau navigateur ouvre n'importe quelle page juste à côté de votre discussion. Ouvrez-le depuis le bouton globe de l'en-tête.
|
||||
|
||||
> Le navigateur desktop est une fonctionnalité **desktop uniquement**. Sur le web, le panneau [aperçu](/preview/) offre les mêmes outils d’inspection et de console pour votre serveur de dev local.
|
||||
Dans l'application de bureau, c'est un vrai navigateur : vos connexions persistent, le rechargement à chaud fonctionne et les outils de développement sont à un clic. Dans un onglet de navigateur, le panneau affiche bien une page mais ne peut pas regarder à l'intérieur — les outils d'annotation ci-dessous sont réservés au bureau.
|
||||
|
||||
## Inspecter et annoter
|
||||
Les pages ouvertes ici ne peuvent pas utiliser votre caméra, votre micro ni votre position : ces demandes sont refusées.
|
||||
|
||||
Activez **inspect** et cliquez sur n’importe quel élément de la page. OpenChamber capture une note à son sujet — ce que c’est, ses styles, sa position et une capture d’écran — puis l’attache à votre message de chat. C’est le moyen le plus rapide de dire à l’agent « cet élément, juste ici ».
|
||||
## La barre d'outils
|
||||
|
||||
## Capture de console
|
||||
La barre d'adresse retient les pages que vous avez ouvertes dans ce projet et les propose pendant la saisie, en cherchant dans une partie de l'adresse ou du titre de la page. Les flèches parcourent la liste, Entrée ouvre l'entrée surlignée, et le bouton d'une ligne la retire.
|
||||
|
||||
Le navigateur collecte la sortie console de la page — erreurs, avertissements et logs — pour que vous puissiez la filtrer et la lire sans ouvrir les outils développeur.
|
||||
À côté se trouve **Recharger**, ainsi qu'un **rechargement forcé** qui ignore le cache quand un changement refuse d'apparaître, et des commandes de zoom qui agrandissent la page seule.
|
||||
|
||||
## Pages liées
|
||||
**Effacer les cookies** et **Effacer les données en cache** ne concernent que ce panneau. Votre session OpenChamber et les autres fenêtres n'y touchent pas.
|
||||
|
||||
- [Aperçu et serveurs de dev](/preview/) — les mêmes outils pour votre serveur de dev local
|
||||
## Annoter une page
|
||||
|
||||
Appuyez sur **Annoter** : une barre apparaît au-dessus de la page avec trois outils.
|
||||
|
||||
- **Élément** — cliquez sur un élément. Cliquer sur un autre déplace la sélection ; recliquer sur le même la retire.
|
||||
- **Zone** — tracez un cadre autour d'une portion lorsque votre remarque porte sur plusieurs éléments.
|
||||
- **Dessin** — croquez à main levée par-dessus la page.
|
||||
|
||||
Écrivez votre demande dans le champ qui apparaît à côté de votre marque, puis appuyez sur **Joindre** — ou simplement sur Entrée. Votre message reçoit une carte avec tout ce que vous avez marqué, votre note et une capture de la page visible avec vos marques dessinées dessus — vous pouvez donc dire « ce bouton, un peu plus arrondi » au lieu de décrire où il se trouve.
|
||||
|
||||
La page elle-même n'est jamais modifiée : annoter ne fait que marquer ce qui s'y trouve. `Échap` annule et ferme la barre.
|
||||
|
||||
## Laisser l'agent piloter
|
||||
|
||||
L'agent peut se servir lui-même du panneau navigateur — ouvrir une page, lire ce qu'elle contient, cliquer, saisir du texte, faire défiler et basculer entre les mises en page mobile, tablette et bureau — afin de vérifier son propre travail plutôt que de vous le demander. Vous le voyez faire dans le panneau.
|
||||
|
||||
L'agent ne peut pas exécuter de code arbitraire dans la page. Le navigateur conserve vos vraies connexions ; il s'en tient donc aux actions ci-dessus.
|
||||
|
||||
Il peut aussi enregistrer une image de ce qu'il regarde dans `.openchamber/screenshots/` de votre projet et vous la montrer dans sa réponse. C'est ce qui rend un avant-après possible, et le fichier reste ensuite disponible pour l'attacher à une pull request.
|
||||
|
||||
Les actions du navigateur constituent l'**outil OpenChamber Web**, qui s'active et se désactive séparément dans **Réglages → Général → Outils OpenChamber**.
|
||||
|
||||
Cela nécessite l'application de bureau : une page affichée dans un onglet de navigateur ne peut pas être pilotée.
|
||||
|
||||
## Outils de développement
|
||||
|
||||
Appuyez sur le bouton terminal de la barre pour ouvrir les outils de développement de Chromium pour la page — console, réseau, éléments, tout ce à quoi vous vous attendez.
|
||||
|
||||
## Voir aussi
|
||||
|
||||
- [Aperçu et serveurs de développement](/preview/) — ouvrir votre application en cours, y compris sur une machine distante
|
||||
- [Outil de contrôle pour les agents](/fr/agent-control-tool/) — sessions, worktrees et tâches planifiées depuis la discussion
|
||||
|
||||
@@ -1,32 +1,35 @@
|
||||
---
|
||||
title: Aperçu et serveurs de dev
|
||||
description: Ouvrez un serveur de dev en cours d’exécution dans OpenChamber.
|
||||
title: Aperçu et serveurs de développement
|
||||
description: Ouvrez un serveur de développement en cours d'exécution dans OpenChamber.
|
||||
---
|
||||
|
||||
# Aperçu et serveurs de dev
|
||||
# Aperçu et serveurs de développement
|
||||
|
||||
Quand vous démarrez un serveur de dev, OpenChamber peut l’ouvrir directement dans l’application au lieu d’un onglet de navigateur séparé — vous voyez ainsi votre site à côté du chat, vous capturez sa console et vous pouvez pointer des éléments pour poser des questions à leur sujet.
|
||||
Quand vous lancez un serveur de développement, OpenChamber peut l'ouvrir directement dans l'application plutôt que dans un onglet séparé — vous voyez ainsi votre site à côté de la discussion et pouvez désigner des éléments pour poser des questions à leur sujet.
|
||||
|
||||
## Ouvrir un aperçu
|
||||
## Ouvrir un serveur de développement
|
||||
|
||||
OpenChamber surveille la sortie du terminal pour détecter une adresse locale (la ligne `Local:` affichée par des outils comme Vite, Next.js ou Astro). Quand il en trouve une :
|
||||
Ouvrez le panneau navigateur depuis le bouton globe de l'en-tête. Si un serveur tourne déjà, il apparaît dans la liste et un clic suffit à l'ouvrir : OpenChamber le repère à partir de ce qui écoute réellement sur votre machine, quelle que soit la façon dont vous l'avez lancé.
|
||||
|
||||
- dans le terminal, un bouton **Ouvrir l’aperçu** apparaît
|
||||
- une [action de projet](/project-actions/) avec l’ouverture automatique activée l’ouvre pour vous
|
||||
- un lien local dans un message de chat peut aussi l’ouvrir
|
||||
Un serveur s'ouvre également tout seul quand :
|
||||
|
||||
Le site se charge dans le panneau latéral. Seules les adresses locales (sur votre propre machine) peuvent être prévisualisées.
|
||||
- vous appuyez sur **Ouvrir l'aperçu** sur une adresse locale dans le terminal
|
||||
- une [action de projet](/project-actions/) avec ouverture automatique en démarre un
|
||||
- vous suivez un lien local dans un message de la discussion
|
||||
|
||||
## Console et inspection
|
||||
Vous pouvez toujours saisir l'adresse vous-même. Un simple `localhost:5173` est compris comme `http://`, inutile donc d'écrire le schéma.
|
||||
|
||||
Dans le panneau d’aperçu, vous pouvez :
|
||||
## Travailler avec un OpenChamber distant
|
||||
|
||||
- regarder la **console** de la page — erreurs, avertissements et logs, filtrés comme vous le voulez
|
||||
- activer **inspect**, cliquer sur n’importe quel élément et envoyer une note à son sujet — sélecteur, styles, position et capture d’écran — directement dans le chat
|
||||
Quand OpenChamber tourne sur une autre machine, son serveur de développement s'y trouve aussi — `localhost` sur votre portable désigne tout autre chose. L'application de bureau s'en charge : elle ouvre un port local qui achemine la connexion jusqu'au serveur distant, si bien que la page se charge normalement, avec rechargement à chaud et outils de développement fonctionnels. Vous continuez à saisir l'adresse attendue ; la tuyauterie reste hors de votre chemin.
|
||||
|
||||
C’est le moyen le plus rapide de dire à l’agent « ce bouton, ici » sans devoir le décrire.
|
||||
Cela nécessite l'application de bureau. Dans un onglet de navigateur, seuls les serveurs de votre propre machine peuvent être ouverts.
|
||||
|
||||
## Pages liées
|
||||
## Annoter la page
|
||||
|
||||
- [Actions de projet](/project-actions/) — ouvrir automatiquement un serveur quand vous le démarrez
|
||||
- [Navigateur desktop](/desktop-browser/) — les mêmes outils pour n’importe quelle page, sur desktop
|
||||
Voyez [Panneau navigateur](/desktop-browser/) pour désigner des éléments, dessiner sur la page et envoyer le tout dans la discussion.
|
||||
|
||||
## Voir aussi
|
||||
|
||||
- [Actions de projet](/project-actions/) — ouvrir automatiquement un serveur à son démarrage
|
||||
- [Panneau navigateur](/desktop-browser/) — annoter les pages et laisser l'agent les piloter
|
||||
|
||||
@@ -28,7 +28,7 @@ description: エージェントがチャットから OpenChamber のセッショ
|
||||
|
||||
## ツールを有効または無効にする
|
||||
|
||||
**設定 → 一般 → OpenCode CLI** を開き、**エージェント制御ツール**を変更して、**Save + Reload** を選択します。この設定は、管理対象の OpenCode サーバーが再起動した後に反映されます。
|
||||
**設定 → 一般 → OpenChamber ツール** を開き、**エージェント制御ツール**を変更します。この設定は、管理対象の OpenCode サーバーが再起動すると反映されます。再起動は OpenChamber が **Apply & Restart** として案内します。
|
||||
|
||||
OpenChamber が `OPENCODE_HOST` または skip-start で外部 OpenCode サーバーに接続している場合や、VS Code 拡張機能内では、このツールを利用できません。OpenChamber が管理する OpenCode サーバーを使用するデスクトップ版と Web 版では自動的に利用できます。
|
||||
|
||||
@@ -37,3 +37,4 @@ OpenChamber が `OPENCODE_HOST` または skip-start で外部 OpenCode サー
|
||||
- [スケジュールタスク](/ja/scheduled-tasks/)
|
||||
- [Worktree セッション](/ja/worktrees/)
|
||||
- [セッションゴール](/ja/session-goals/)
|
||||
- [ブラウザパネル](/ja/desktop-browser/) — ページを見て操作するための OpenChamber Web ツール
|
||||
|
||||
@@ -1,22 +1,53 @@
|
||||
---
|
||||
title: デスクトップブラウザ
|
||||
description: デスクトップアプリ内で任意のページを開き、検査とコンソール取得を使います。
|
||||
title: ブラウザパネル
|
||||
description: アプリ内で任意のページを開き、注釈を付け、エージェントに操作させます。
|
||||
---
|
||||
|
||||
# デスクトップブラウザ
|
||||
# ブラウザパネル
|
||||
|
||||
デスクトップアプリには組み込みブラウザがあります。チャットのすぐ横で任意のページを開き、要素を指して質問したり、ページのコンソールを取得したりできます。アプリヘッダーの地球儀ボタンから開きます。
|
||||
ブラウザパネルはチャットのすぐ隣に任意のページを開きます。ヘッダーの地球儀ボタンから開いてください。
|
||||
|
||||
> デスクトップブラウザは**デスクトップ専用**機能です。Web では、[プレビュー](/preview/) パネルがローカル開発サーバー向けに同じ検査・コンソールツールを提供します。
|
||||
デスクトップアプリでは本物のブラウザです。ログイン状態は保持され、ホットリロードが動き、開発者ツールはワンクリックで開けます。ブラウザのタブでもページの表示はできますが、中を覗くことはできません。以下の注釈ツールはデスクトップ専用です。
|
||||
|
||||
## 検査して注釈を付ける
|
||||
ここで開いたページは、カメラ・マイク・位置情報を使えません。これらの要求は拒否されます。
|
||||
|
||||
**inspect** をオンにして、ページ上の任意の要素をクリックします。OpenChamber はその要素について、何であるか、スタイル、位置、スクリーンショットを含むメモを取得し、チャットメッセージに添付します。エージェントに「この要素、ここ」と伝える最短の方法です。
|
||||
## ツールバー
|
||||
|
||||
## コンソール取得
|
||||
アドレスバーはこのプロジェクトで開いたページを覚えていて、入力中に候補として出します。アドレスの一部でもページタイトルの一部でも一致します。矢印キーで候補を移動し、Enter で選択中の候補を開き、行のボタンでその候補を消せます。
|
||||
|
||||
ブラウザはページのコンソール出力(エラー、警告、ログ)を集めるので、開発者ツールを開かずにフィルターして読めます。
|
||||
隣には **再読み込み** があり、変更がどうしても反映されないときのためにキャッシュを無視する **強制再読み込み**、そしてページだけを拡大縮小するズーム操作も並びます。
|
||||
|
||||
**Cookie を消去** と **キャッシュを消去** はこのパネルにだけ効きます。OpenChamber のセッションや他のウィンドウには影響しません。
|
||||
|
||||
## ページに注釈を付ける
|
||||
|
||||
**注釈** を押すと、ページの上に3つのツールを備えたバーが表示されます。
|
||||
|
||||
- **要素** — 要素をクリックします。別の要素をクリックすると選択が移り、同じ要素をもう一度クリックすると解除されます。
|
||||
- **範囲** — 複数の要素にまたがる話をしたいときは、領域をドラッグで囲みます。
|
||||
- **描画** — ページの上にフリーハンドで描きます。
|
||||
|
||||
印の隣に現れる入力欄に希望を書き、**添付** を押します。Enter でも送れます。チャットメッセージには、印を付けた内容、あなたのメモ、表示中のページに印を描き込んだスクリーンショットを含むカードが付きます。「このボタン、もう少し角を丸く」と言えば済み、場所を説明する必要はありません。
|
||||
|
||||
ページ自体は変更されません。注釈はそこにあるものに印を付けるだけです。`Esc` で取り消してツールバーを閉じます。
|
||||
|
||||
## エージェントに操作させる
|
||||
|
||||
エージェントはブラウザパネルを自分で使えます。ページを開き、内容を読み、クリックし、文字を入力し、スクロールし、モバイル・タブレット・デスクトップのレイアウトを切り替えて、自分の作業をあなたに頼まず自分で確認します。その様子はパネルで見えます。
|
||||
|
||||
エージェントがページ内で任意のコードを実行することはできません。ブラウザは実際のログイン状態を保持しているため、上記の操作に限定されています。
|
||||
|
||||
見ている内容をプロジェクト内の `.openchamber/screenshots/` に画像として保存し、返答の中で見せることもできます。ビフォー・アフターができるのはこのためで、ファイルはその後もプルリクエストに添付できる形で残ります。
|
||||
|
||||
ブラウザ操作は **OpenChamber Web ツール** で、**設定 → 一般 → OpenChamber ツール** から単独でオン・オフできます。
|
||||
|
||||
これにはデスクトップアプリが必要です。ブラウザのタブに表示したページは操作できません。
|
||||
|
||||
## 開発者ツール
|
||||
|
||||
バーのターミナルボタンを押すと、そのページに対する Chromium 本来の開発者ツールが開きます。コンソール、ネットワーク、要素など、期待どおりのものがすべて使えます。
|
||||
|
||||
## 関連
|
||||
|
||||
- [プレビューと開発サーバー](/preview/) — ローカル開発サーバー向けの同じツール
|
||||
- [プレビューと開発サーバー](/preview/) — リモートマシン上のものも含め、実行中のアプリを開く
|
||||
- [エージェント制御ツール](/ja/agent-control-tool/) — チャットからセッション・worktree・スケジュールタスクを扱う
|
||||
|
||||
@@ -1,32 +1,35 @@
|
||||
---
|
||||
title: プレビューと開発サーバー
|
||||
description: 実行中の開発サーバーを OpenChamber 内で開きます。
|
||||
description: 実行中の開発サーバーを OpenChamber の中で開きます。
|
||||
---
|
||||
|
||||
# プレビューと開発サーバー
|
||||
|
||||
開発サーバーを起動すると、OpenChamber は別のブラウザタブではなくアプリ内で直接開けます。サイトをチャットの横で見ながら、コンソールを取得し、要素を指して質問できます。
|
||||
開発サーバーを起動すると、OpenChamber は別のブラウザタブではなくアプリ内でそれを開けます。チャットの隣にサイトを表示したまま、要素を指し示して質問できます。
|
||||
|
||||
## プレビューを開く
|
||||
## 開発サーバーを開く
|
||||
|
||||
OpenChamber はターミナル出力からローカルアドレスを監視します(Vite、Next.js、Astro などが表示する `Local:` 行)。見つけると次のことができます。
|
||||
ヘッダーの地球儀ボタンからブラウザパネルを開きます。開発サーバーがすでに動いていれば一覧に表示され、クリックひとつで開けます。OpenChamber はマシン上で実際に待ち受けているものから見つけるので、どうやって起動したかに関係なく機能します。
|
||||
|
||||
- ターミナルに **Open preview** ボタンが表示されます
|
||||
- 自動オープンを有効にした [プロジェクトアクション](/project-actions/) が開きます
|
||||
- チャットメッセージ内のローカルリンクからも開けます
|
||||
次の場合にも開発サーバーは自動で開きます。
|
||||
|
||||
サイトはサイドパネルに読み込まれます。プレビューできるのはローカルアドレス(あなたのマシン上)のみです。
|
||||
- ターミナルのローカルアドレスで **プレビューを開く** を押したとき
|
||||
- 自動オープンを有効にした[プロジェクトアクション](/project-actions/)が起動したとき
|
||||
- チャットメッセージ内のローカルリンクをたどったとき
|
||||
|
||||
## コンソールと検査
|
||||
アドレスはいつでも自分で入力できます。`localhost:5173` のようにスキームを省いた入力は `http://` として扱われます。
|
||||
|
||||
プレビューパネルでは次のことができます。
|
||||
## リモートの OpenChamber を使う場合
|
||||
|
||||
- ページの **console** を見る — エラー、警告、ログを好きなようにフィルターできます
|
||||
- **inspect** をオンにし、任意の要素をクリックして、そのメモ(セレクター、スタイル、位置、スクリーンショット)をそのままチャットへ送る
|
||||
OpenChamber が別のマシンで動いているとき、開発サーバーも*そちら*のマシンにあります。手元のノートPCの `localhost` はまったく別の場所を指します。デスクトップアプリはこれを引き受けます。ローカルポートを開いてリモートの開発サーバーまで接続を通すので、ページは普通に読み込まれ、ホットリロードも開発者ツールも動きます。入力するアドレスは期待どおりのままで、裏側の仕組みが邪魔をすることはありません。
|
||||
|
||||
これは「このボタン、ここ」とエージェントに伝える最速の方法です。
|
||||
これにはデスクトップアプリが必要です。ブラウザのタブでは、自分のマシン上の開発サーバーだけを開けます。
|
||||
|
||||
## ページに注釈を付ける
|
||||
|
||||
要素を指し示す、ページに描き込む、それらをまとめてチャットへ送る方法は[ブラウザパネル](/desktop-browser/)を参照してください。
|
||||
|
||||
## 関連
|
||||
|
||||
- [プロジェクトアクション](/project-actions/) — サーバー起動時に自動で開く
|
||||
- [デスクトップブラウザ](/desktop-browser/) — デスクトップで任意のページに同じツールを使う
|
||||
- [プロジェクトアクション](/project-actions/) — 起動時にサーバーを自動で開く
|
||||
- [ブラウザパネル](/desktop-browser/) — ページへの注釈とエージェントによる操作
|
||||
|
||||
@@ -28,7 +28,7 @@ description: 에이전트가 채팅에서 OpenChamber 세션, worktree, 예약
|
||||
|
||||
## 도구 켜기 또는 끄기
|
||||
|
||||
**설정 → 일반 → OpenCode CLI**를 열고 **에이전트 제어 도구**를 변경한 다음 **Save + Reload**를 선택하세요. 관리형 OpenCode 서버가 다시 시작된 후 설정이 적용됩니다.
|
||||
**설정 → 일반 → OpenChamber 도구**를 열고 **에이전트 제어 도구**를 변경하세요. 설정은 관리형 OpenCode 서버가 다시 시작되면 적용되며, OpenChamber가 **Apply & Restart** 로 안내합니다.
|
||||
|
||||
OpenChamber가 `OPENCODE_HOST` 또는 skip-start를 통해 외부 OpenCode 서버에 연결된 경우와 VS Code 확장에서는 이 도구를 사용할 수 없습니다. OpenChamber의 관리형 OpenCode 서버를 사용하는 데스크톱 및 웹 설치에서는 자동으로 지원됩니다.
|
||||
|
||||
@@ -37,3 +37,4 @@ OpenChamber가 `OPENCODE_HOST` 또는 skip-start를 통해 외부 OpenCode 서
|
||||
- [예약 작업](/ko/scheduled-tasks/)
|
||||
- [Worktree 세션](/ko/worktrees/)
|
||||
- [세션 목표](/ko/session-goals/)
|
||||
- [브라우저 패널](/ko/desktop-browser/) — 페이지를 보고 조작하는 OpenChamber Web 도구
|
||||
|
||||
@@ -1,22 +1,53 @@
|
||||
---
|
||||
title: 데스크톱 브라우저
|
||||
description: 검사 및 콘솔 캡처 기능과 함께 데스크톱 앱 안에서 임의의 페이지를 탐색하세요.
|
||||
title: 브라우저 패널
|
||||
description: 앱 안에서 아무 페이지나 열고 주석을 달며 에이전트가 조작하게 합니다.
|
||||
---
|
||||
|
||||
# 데스크톱 브라우저
|
||||
# 브라우저 패널
|
||||
|
||||
데스크톱 앱에는 내장 브라우저가 있어 채팅 바로 옆에서 임의의 페이지를 열고, 요소를 가리켜 질문하고, 페이지의 콘솔을 캡처할 수 있습니다. 앱 헤더의 지구본 버튼에서 엽니다.
|
||||
브라우저 패널은 채팅 바로 옆에 아무 페이지나 엽니다. 앱 헤더의 지구본 버튼으로 여세요.
|
||||
|
||||
> 데스크톱 브라우저는 **데스크톱 전용** 기능입니다. 웹에서는 [미리보기](/ko/preview/) 패널이 로컬 개발 서버에 대해 동일한 검사 및 콘솔 도구를 제공합니다.
|
||||
데스크톱 앱에서는 진짜 브라우저입니다. 로그인 상태가 유지되고 핫 리로드가 동작하며 개발자 도구도 클릭 한 번이면 열립니다. 브라우저 탭에서도 페이지를 보여줄 수는 있지만 내부를 들여다볼 수는 없습니다. 아래 주석 도구는 데스크톱 전용입니다.
|
||||
|
||||
## 검사 및 주석
|
||||
여기서 연 페이지는 카메라, 마이크, 위치를 사용할 수 없습니다. 그런 요청은 거부됩니다.
|
||||
|
||||
**inspect**를 켜고 페이지의 임의 요소를 클릭합니다. OpenChamber가 그것이 무엇인지, 스타일, 위치, 스크린샷을 담은 메모를 캡처해 채팅 메시지에 첨부합니다. 에이전트에게 "바로 여기 이 요소"라고 알리는 가장 빠른 방법입니다.
|
||||
## 도구 모음
|
||||
|
||||
## 콘솔 캡처
|
||||
주소창은 이 프로젝트에서 열었던 페이지를 기억해 두었다가 입력하는 동안 제안합니다. 주소의 일부나 페이지 제목의 일부와 맞춰 봅니다. 화살표 키로 목록을 이동하고, Enter로 선택한 항목을 열고, 행의 버튼으로 목록에서 지웁니다.
|
||||
|
||||
브라우저는 페이지의 콘솔 출력(오류, 경고, 로그)을 수집하므로 개발자 도구를 열지 않고도 필터링하여 읽을 수 있습니다.
|
||||
그 옆에는 **새로 고침**이 있고, 변경이 도무지 반영되지 않을 때 캐시를 무시하는 **강력 새로 고침**, 그리고 페이지만 확대·축소하는 확대 조절이 있습니다.
|
||||
|
||||
## 관련 항목
|
||||
**쿠키 지우기**와 **캐시 데이터 지우기**는 이 패널에만 적용됩니다. OpenChamber 세션이나 다른 창은 그대로입니다.
|
||||
|
||||
- [Preview & Dev Servers](/ko/preview/) — 로컬 개발 서버에 대한 동일한 도구
|
||||
## 페이지에 주석 달기
|
||||
|
||||
**주석** 을 누르면 페이지 위에 세 가지 도구가 있는 막대가 나타납니다.
|
||||
|
||||
- **요소** — 요소를 클릭합니다. 다른 요소를 클릭하면 선택이 옮겨가고, 같은 요소를 다시 클릭하면 해제됩니다.
|
||||
- **영역** — 여러 요소에 걸친 이야기를 할 때는 해당 부분을 드래그해 감쌉니다.
|
||||
- **그리기** — 페이지 위에 자유롭게 스케치합니다.
|
||||
|
||||
표시 옆에 나타나는 입력란에 원하는 내용을 적고 **첨부** 를 누르세요. Enter 로도 됩니다. 채팅 메시지에 표시한 모든 것, 남긴 메모, 표시 중인 페이지에 표시를 그려 넣은 스크린샷이 담긴 카드가 붙습니다. 위치를 설명하는 대신 "이 버튼, 조금 더 둥글게"라고 말하면 됩니다.
|
||||
|
||||
페이지 자체는 변경되지 않습니다. 주석은 있는 것을 표시할 뿐입니다. `Esc` 로 취소하고 도구 막대를 닫습니다.
|
||||
|
||||
## 에이전트에게 조작 맡기기
|
||||
|
||||
에이전트는 브라우저 패널을 직접 쓸 수 있습니다. 페이지를 열고, 내용을 읽고, 클릭하고, 입력하고, 스크롤하고, 모바일·태블릿·데스크톱 레이아웃을 바꿔 가며 자기 작업을 여러분에게 부탁하지 않고 스스로 확인합니다. 그 과정은 패널에서 보입니다.
|
||||
|
||||
에이전트가 페이지에서 임의의 코드를 실행할 수는 없습니다. 브라우저가 실제 로그인 상태를 유지하므로 위에 적힌 동작으로만 제한됩니다.
|
||||
|
||||
보고 있는 화면을 프로젝트의 `.openchamber/screenshots/` 에 이미지로 저장하고 답변에서 보여 줄 수도 있습니다. 전후 비교가 가능한 이유가 이것이며, 파일은 그대로 남아 풀 리퀘스트에 첨부할 수 있습니다.
|
||||
|
||||
브라우저 동작은 **OpenChamber Web 도구**이며, **설정 → 일반 → OpenChamber 도구** 에서 따로 켜고 끌 수 있습니다.
|
||||
|
||||
이 기능에는 데스크톱 앱이 필요합니다. 브라우저 탭에 표시된 페이지는 조작할 수 없습니다.
|
||||
|
||||
## 개발자 도구
|
||||
|
||||
막대의 터미널 버튼을 누르면 해당 페이지에 대한 Chromium 자체 개발자 도구가 열립니다. 콘솔, 네트워크, 요소 등 기대하는 모든 기능을 쓸 수 있습니다.
|
||||
|
||||
## 관련 문서
|
||||
|
||||
- [미리보기와 개발 서버](/preview/) — 원격 컴퓨터의 것을 포함해 실행 중인 앱 열기
|
||||
- [에이전트 제어 도구](/ko/agent-control-tool/) — 채팅에서 세션, worktree, 예약 작업 다루기
|
||||
|
||||
@@ -1,32 +1,35 @@
|
||||
---
|
||||
title: 미리보기 및 개발 서버
|
||||
description: 실행 중인 개발 서버를 OpenChamber 안에서 여세요.
|
||||
title: 미리보기와 개발 서버
|
||||
description: 실행 중인 개발 서버를 OpenChamber 안에서 엽니다.
|
||||
---
|
||||
|
||||
# 미리보기 및 개발 서버
|
||||
# 미리보기와 개발 서버
|
||||
|
||||
개발 서버를 시작하면 OpenChamber는 별도의 브라우저 탭이 아니라 앱 안에서 바로 열 수 있습니다. 그래서 채팅 옆에서 사이트를 보고, 콘솔을 캡처하고, 요소를 가리켜 질문할 수 있습니다.
|
||||
개발 서버를 띄우면 OpenChamber가 별도의 브라우저 탭 대신 앱 안에서 바로 열어 줍니다. 채팅 옆에 사이트를 두고 요소를 가리키며 물어볼 수 있습니다.
|
||||
|
||||
## 미리보기 열기
|
||||
## 개발 서버 열기
|
||||
|
||||
OpenChamber는 터미널 출력에서 로컬 주소(Vite, Next.js, Astro 같은 도구가 출력하는 `Local:` 줄)를 감시합니다. 발견하면 다음과 같이 동작합니다.
|
||||
앱 헤더의 지구본 버튼으로 브라우저 패널을 엽니다. 개발 서버가 이미 실행 중이면 목록에 나타나고 클릭 한 번으로 열립니다. OpenChamber는 컴퓨터에서 실제로 수신 대기 중인 것을 보고 찾아내므로, 어떻게 실행했든 상관없이 동작합니다.
|
||||
|
||||
- 터미널에 **Open preview** 버튼이 나타납니다
|
||||
- auto-open이 켜진 [프로젝트 액션](/ko/project-actions/)이 대신 열어줍니다
|
||||
- 채팅 메시지의 로컬 링크로도 열 수 있습니다
|
||||
다음 경우에도 개발 서버가 자동으로 열립니다.
|
||||
|
||||
사이트는 사이드 패널에 로드됩니다. 로컬 주소(사용자 자신의 컴퓨터)만 미리볼 수 있습니다.
|
||||
- 터미널의 로컬 주소에서 **미리보기 열기** 를 누를 때
|
||||
- 자동 열기를 켠 [프로젝트 작업](/project-actions/)이 서버를 시작할 때
|
||||
- 채팅 메시지의 로컬 링크를 따라갈 때
|
||||
|
||||
## 콘솔과 검사
|
||||
주소는 언제든 직접 입력할 수 있습니다. `localhost:5173` 처럼 스킴을 생략하면 `http://` 로 처리됩니다.
|
||||
|
||||
미리보기 패널에서 다음을 할 수 있습니다.
|
||||
## 원격 OpenChamber와 함께 쓰기
|
||||
|
||||
- 페이지의 **console**(오류, 경고, 로그)을 원하는 대로 필터링하여 확인
|
||||
- **inspect**를 켜고 임의의 요소를 클릭한 뒤 그에 대한 메모(선택자, 스타일, 위치, 스크린샷)를 바로 채팅으로 전송
|
||||
OpenChamber가 다른 컴퓨터에서 실행 중이면 개발 서버도 *그* 컴퓨터에 있습니다. 노트북의 `localhost`는 전혀 다른 곳을 가리키죠. 데스크톱 앱이 이를 대신 처리합니다. 로컬 포트를 열어 원격 개발 서버까지 연결을 이어 주므로 페이지가 평소처럼 로드되고 핫 리로드와 개발자 도구도 동작합니다. 여러분은 기대한 주소를 그대로 입력하면 되고, 내부 배관은 눈에 띄지 않습니다.
|
||||
|
||||
이것은 설명 없이 에이전트에게 "여기 이 버튼"이라고 알리는 가장 빠른 방법입니다.
|
||||
이 기능에는 데스크톱 앱이 필요합니다. 브라우저 탭에서는 자신의 컴퓨터에 있는 개발 서버만 열 수 있습니다.
|
||||
|
||||
## 관련 항목
|
||||
## 페이지에 주석 달기
|
||||
|
||||
- [Project Actions](/ko/project-actions/) — 서버를 시작할 때 자동으로 열기
|
||||
- [Desktop Browser](/ko/desktop-browser/) — 데스크톱에서 임의의 페이지에 동일한 도구 사용
|
||||
요소를 가리키고, 페이지에 그리고, 스타일 변경을 시험해 보고, 이 모두를 채팅으로 보내는 방법은 [브라우저 패널](/desktop-browser/)을 참고하세요.
|
||||
|
||||
## 관련 문서
|
||||
|
||||
- [프로젝트 작업](/project-actions/) — 서버 시작 시 자동으로 열기
|
||||
- [브라우저 패널](/desktop-browser/) — 페이지 주석과 에이전트 조작
|
||||
|
||||
@@ -28,7 +28,7 @@ Narzędzie może wyświetlać projekty i preferencje modeli, tworzyć i kontynuo
|
||||
|
||||
## Włączanie i wyłączanie narzędzia
|
||||
|
||||
Otwórz **Ustawienia → Ogólne → OpenCode CLI**, zmień **Narzędzie sterowania dla agentów**, a następnie wybierz **Save + Reload**. Ustawienie zacznie działać po ponownym uruchomieniu zarządzanego serwera OpenCode.
|
||||
Otwórz **Ustawienia → Ogólne → Narzędzia OpenChamber** i zmień **Narzędzie sterowania dla agentów**. Ustawienie zacznie działać po ponownym uruchomieniu zarządzanego serwera OpenCode, które OpenChamber proponuje jako **Apply & Restart**.
|
||||
|
||||
Narzędzie nie jest dostępne, gdy OpenChamber łączy się z zewnętrznym serwerem OpenCode przez `OPENCODE_HOST` lub skip-start, ani w rozszerzeniu VS Code. Instalacje desktopowe i webowe korzystające z serwera OpenCode zarządzanego przez OpenChamber obsługują je automatycznie.
|
||||
|
||||
@@ -37,3 +37,4 @@ Narzędzie nie jest dostępne, gdy OpenChamber łączy się z zewnętrznym serwe
|
||||
- [Zaplanowane zadania](/pl/scheduled-tasks/)
|
||||
- [Sesje worktree](/pl/worktrees/)
|
||||
- [Cele sesji](/pl/session-goals/)
|
||||
- [Panel przeglądarki](/pl/desktop-browser/) — narzędzie OpenChamber Web — oglądanie strony i sterowanie nią
|
||||
|
||||
@@ -1,22 +1,53 @@
|
||||
---
|
||||
title: Przeglądarka na komputerze
|
||||
description: Przeglądaj dowolną stronę wewnątrz aplikacji na komputerze, z inspekcją i przechwytywaniem konsoli.
|
||||
title: Panel przeglądarki
|
||||
description: Przeglądaj dowolną stronę w aplikacji, dodawaj do niej adnotacje i pozwól agentowi nią sterować.
|
||||
---
|
||||
|
||||
# Przeglądarka na komputerze
|
||||
# Panel przeglądarki
|
||||
|
||||
Aplikacja na komputerze ma wbudowaną przeglądarkę, dzięki czemu możesz otworzyć dowolną stronę tuż obok czatu, wskazywać elementy, aby o nie zapytać, oraz przechwytywać konsolę strony. Otwórz ją z przycisku globusa w nagłówku aplikacji.
|
||||
Panel przeglądarki otwiera dowolną stronę tuż obok czatu. Otwórz go przyciskiem globusa w nagłówku aplikacji.
|
||||
|
||||
> Przeglądarka na komputerze to funkcja **tylko na komputerze**. W wersji webowej panel [podglądu](/pl/preview/) oferuje te same narzędzia inspekcji i konsoli dla Twojego lokalnego serwera deweloperskiego.
|
||||
W aplikacji desktopowej to prawdziwa przeglądarka: twoje logowania są zachowywane, przeładowanie na gorąco działa, a narzędzia deweloperskie są o jedno kliknięcie. W karcie przeglądarki panel wyświetli stronę, ale nie zajrzy do jej wnętrza — poniższe narzędzia adnotacji są dostępne tylko na desktopie.
|
||||
|
||||
## Inspekcja i adnotacje
|
||||
Strony otwarte tutaj nie mogą użyć twojej kamery, mikrofonu ani lokalizacji: takie prośby są odrzucane.
|
||||
|
||||
Włącz **inspect** i kliknij dowolny element na stronie. OpenChamber przechwytuje o nim notatkę — czym jest, jakie ma style, gdzie się znajduje, oraz zrzut ekranu — i dołącza ją do Twojej wiadomości czatu. To najszybszy sposób, by powiedzieć agentowi „ten element, dokładnie tutaj”.
|
||||
## Pasek narzędzi
|
||||
|
||||
## Przechwytywanie konsoli
|
||||
Pasek adresu pamięta strony otwierane w tym projekcie i podpowiada je podczas pisania, dopasowując fragment adresu albo tytułu strony. Strzałki przechodzą po liście, Enter otwiera podświetloną pozycję, a przycisk w wierszu usuwa ją z listy.
|
||||
|
||||
Przeglądarka zbiera wynik konsoli strony — błędy, ostrzeżenia i logi — dzięki czemu możesz go filtrować i czytać bez otwierania narzędzi deweloperskich.
|
||||
Obok jest **odświeżenie**, a także **twarde odświeżenie**, które pomija pamięć podręczną, gdy zmiana uparcie się nie pokazuje, oraz sterowanie powiększeniem działające tylko na stronę.
|
||||
|
||||
**Wyczyść ciasteczka** i **Wyczyść dane w pamięci podręcznej** dotyczą wyłącznie tego panelu. Twoja sesja OpenChamber i pozostałe okna zostają nietknięte.
|
||||
|
||||
## Dodawanie adnotacji
|
||||
|
||||
Naciśnij **Adnotuj** — nad stroną pojawi się pasek z trzema narzędziami:
|
||||
|
||||
- **Element** — kliknij element. Kliknięcie innego przenosi zaznaczenie, ponowne kliknięcie tego samego je zdejmuje.
|
||||
- **Obszar** — obrysuj fragment ramką, gdy chodzi o więcej niż jeden element.
|
||||
- **Rysuj** — szkicuj odręcznie po stronie.
|
||||
|
||||
Napisz, czego oczekujesz, w polu obok swojego oznaczenia i naciśnij **Dołącz** — albo po prostu Enter. Do wiadomości trafi karta ze wszystkim, co zaznaczyłeś, z twoją notatką i ze zrzutem widocznej strony z naniesionymi oznaczeniami — możesz więc powiedzieć „ten przycisk, trochę bardziej zaokrąglony" zamiast opisywać, gdzie jest.
|
||||
|
||||
Sama strona nie jest zmieniana — adnotacja tylko oznacza to, co już tam jest. `Esc` anuluje i zamyka pasek.
|
||||
|
||||
## Sterowanie przez agenta
|
||||
|
||||
Agent może sam korzystać z panelu przeglądarki — otworzyć stronę, odczytać jej zawartość, klikać, wpisywać tekst, przewijać i przełączać układ mobilny, tabletowy i desktopowy — żeby sprawdzić własną pracę zamiast prosić o to ciebie. Zobaczysz to w panelu.
|
||||
|
||||
Agent nie może uruchamiać dowolnego kodu na stronie. Przeglądarka zachowuje twoje prawdziwe logowania, więc ogranicza się do powyższych działań.
|
||||
|
||||
Może też zapisać obraz tego, co widzi, w `.openchamber/screenshots/` w twoim projekcie i pokazać go w odpowiedzi. To właśnie umożliwia porównanie przed i po, a plik zostaje, by dołączyć go do pull requesta.
|
||||
|
||||
Działania w przeglądarce to **narzędzie OpenChamber Web**, które włącza się i wyłącza osobno w **Ustawienia → Ogólne → Narzędzia OpenChamber**.
|
||||
|
||||
Wymaga to aplikacji desktopowej: stroną pokazaną w karcie przeglądarki nie da się sterować.
|
||||
|
||||
## Narzędzia deweloperskie
|
||||
|
||||
Naciśnij przycisk terminala na pasku, aby otworzyć własne narzędzia deweloperskie Chromium dla strony — konsolę, sieć, elementy, wszystko czego oczekujesz.
|
||||
|
||||
## Powiązane
|
||||
|
||||
- [Podgląd i serwery deweloperskie](/pl/preview/) — te same narzędzia dla Twojego lokalnego serwera deweloperskiego
|
||||
- [Podgląd i serwery deweloperskie](/preview/) — otwieranie działającej aplikacji, także na zdalnym komputerze
|
||||
- [Narzędzie sterowania dla agentów](/pl/agent-control-tool/) — sesje, worktree i zaplanowane zadania prosto z czatu
|
||||
|
||||
@@ -5,28 +5,31 @@ description: Otwórz działający serwer deweloperski wewnątrz OpenChamber.
|
||||
|
||||
# Podgląd i serwery deweloperskie
|
||||
|
||||
Gdy uruchamiasz serwer deweloperski, OpenChamber może otworzyć go bezpośrednio w aplikacji zamiast w osobnej karcie przeglądarki — dzięki czemu widzisz swoją witrynę obok czatu, przechwytujesz jej konsolę i wskazujesz elementy, aby o nie zapytać.
|
||||
Gdy uruchamiasz serwer deweloperski, OpenChamber może otworzyć go od razu w aplikacji zamiast w osobnej karcie przeglądarki — widzisz swoją stronę obok czatu i możesz wskazywać elementy, żeby o nie zapytać.
|
||||
|
||||
## Otwórz podgląd
|
||||
## Otwieranie serwera deweloperskiego
|
||||
|
||||
OpenChamber obserwuje wynik terminala pod kątem adresu lokalnego (wiersz `Local:`, który drukują narzędzia takie jak Vite, Next.js czy Astro). Gdy go wykryje:
|
||||
Otwórz panel przeglądarki przyciskiem globusa w nagłówku aplikacji. Jeśli serwer już działa, znajdziesz go na liście i otworzysz jednym kliknięciem — OpenChamber rozpoznaje go po tym, co faktycznie nasłuchuje na twoim komputerze, więc działa niezależnie od sposobu uruchomienia.
|
||||
|
||||
- w terminalu pojawia się przycisk **Open preview**
|
||||
- [akcja projektu](/pl/project-actions/) z włączonym auto-open otwiera go za Ciebie
|
||||
- lokalny link w wiadomości czatu również może go otworzyć
|
||||
Serwer otwiera się też sam, gdy:
|
||||
|
||||
Witryna ładuje się w panelu bocznym. Podglądać można wyłącznie adresy lokalne (na Twojej własnej maszynie).
|
||||
- naciśniesz **Otwórz podgląd** przy lokalnym adresie w terminalu
|
||||
- [akcja projektu](/project-actions/) z włączonym automatycznym otwieraniem go uruchomi
|
||||
- klikniesz lokalny odnośnik w wiadomości na czacie
|
||||
|
||||
## Konsola i inspekcja
|
||||
Adres zawsze możesz wpisać ręcznie. Samo `localhost:5173` jest traktowane jako `http://`, więc schematu nie musisz podawać.
|
||||
|
||||
W panelu podglądu możesz:
|
||||
## Praca ze zdalnym OpenChamber
|
||||
|
||||
- obserwować **konsolę** strony — błędy, ostrzeżenia i logi, filtrowane wedle uznania
|
||||
- włączyć **inspect**, kliknąć dowolny element i wysłać o nim notatkę — selektor, style, pozycję i zrzut ekranu — prosto do czatu
|
||||
Gdy OpenChamber działa na innym komputerze, jego serwer deweloperski też jest na *tamtym* komputerze — `localhost` na twoim laptopie prowadzi zupełnie gdzie indziej. Aplikacja desktopowa załatwia to za ciebie: otwiera lokalny port, którym prowadzi połączenie do zdalnego serwera, dzięki czemu strona ładuje się normalnie, z działającym przeładowaniem na gorąco i narzędziami deweloperskimi. Nadal wpisujesz adres, którego się spodziewasz; technikalia nie wchodzą ci w drogę.
|
||||
|
||||
To najszybszy sposób, by powiedzieć agentowi „ten przycisk, tutaj”, bez opisywania go.
|
||||
Wymaga to aplikacji desktopowej. W karcie przeglądarki otworzysz tylko serwery na własnym komputerze.
|
||||
|
||||
## Adnotacje na stronie
|
||||
|
||||
O wskazywaniu elementów, rysowaniu po stronie, przymierzaniu zmian stylów i wysyłaniu tego wszystkiego na czat przeczytasz w [Panelu przeglądarki](/desktop-browser/).
|
||||
|
||||
## Powiązane
|
||||
|
||||
- [Akcje projektu](/pl/project-actions/) — automatycznie otwórz serwer przy uruchomieniu
|
||||
- [Przeglądarka na komputerze](/pl/desktop-browser/) — te same narzędzia dla dowolnej strony, na komputerze
|
||||
- [Akcje projektu](/project-actions/) — automatyczne otwarcie serwera po uruchomieniu
|
||||
- [Panel przeglądarki](/desktop-browser/) — adnotacje stron i sterowanie przez agenta
|
||||
|
||||
@@ -5,28 +5,31 @@ description: Open a running dev server inside OpenChamber.
|
||||
|
||||
# Preview & Dev Servers
|
||||
|
||||
When you start a dev server, OpenChamber can open it right inside the app instead of a separate browser tab — so you can see your site next to the chat, capture its console, and point at elements to ask about them.
|
||||
When you start a dev server, OpenChamber can open it right inside the app instead of a separate browser tab — so you can see your site next to the chat and point at elements to ask about them.
|
||||
|
||||
## Open a preview
|
||||
## Open a dev server
|
||||
|
||||
OpenChamber watches terminal output for a local address (the `Local:` line that tools like Vite, Next.js, or Astro print). When it spots one:
|
||||
Open the browser panel from the globe button in the app header. If a dev server is already running, it is listed there and one click opens it — OpenChamber finds it by looking at what is actually listening on your machine, so it works no matter how you started it.
|
||||
|
||||
- in the terminal, an **Open preview** button appears
|
||||
- a [project action](/project-actions/) with auto-open turned on opens it for you
|
||||
- a local link in a chat message can open it too
|
||||
A dev server also opens automatically when:
|
||||
|
||||
The site loads in the side panel. Only local addresses (on your own machine) can be previewed.
|
||||
- you press **Open preview** on a local address in the terminal
|
||||
- a [project action](/project-actions/) with auto-open turned on starts one
|
||||
- you follow a local link in a chat message
|
||||
|
||||
## Console and inspect
|
||||
You can always type an address yourself. A bare `localhost:5173` is treated as `http://`, so you do not have to type the scheme.
|
||||
|
||||
In the preview panel you can:
|
||||
## Working with a remote OpenChamber
|
||||
|
||||
- watch the page's **console** — errors, warnings, and logs, filtered however you like
|
||||
- turn on **inspect**, click any element, and send a note about it — selector, styles, position, and a screenshot — straight into chat
|
||||
When OpenChamber runs on another machine, its dev server is on *that* machine — `localhost` on your laptop is somewhere else entirely. The desktop app handles this for you: it opens a local port that carries the connection through to the remote dev server, so the page loads normally, with working hot reload and developer tools. You keep typing the address you expect; the plumbing stays out of your way.
|
||||
|
||||
This is the fastest way to tell the agent "this button, here" without describing it.
|
||||
This needs the desktop app. In a web browser tab, only dev servers on your own machine can be opened.
|
||||
|
||||
## Annotate the page
|
||||
|
||||
See [Browser Panel](/desktop-browser/) for pointing at elements, drawing on the page, and sending it all to chat.
|
||||
|
||||
## Related
|
||||
|
||||
- [Project Actions](/project-actions/) — auto-open a server when you start it
|
||||
- [Desktop Browser](/desktop-browser/) — the same tools for any page, on desktop
|
||||
- [Browser Panel](/desktop-browser/) — annotating pages and letting the agent drive
|
||||
|
||||
@@ -28,7 +28,7 @@ A ferramenta pode listar projetos e preferências de modelos, criar e continuar
|
||||
|
||||
## Ativar ou desativar a ferramenta
|
||||
|
||||
Abra **Configurações → Geral → OpenCode CLI**, altere **Ferramenta de controle para agentes** e selecione **Save + Reload**. A configuração entra em vigor depois que o servidor OpenCode gerenciado reinicia.
|
||||
Abra **Configurações → Geral → Ferramentas do OpenChamber** e altere **Ferramenta de controle para agentes**. A configuração entra em vigor quando o servidor OpenCode gerenciado reinicia, o que o OpenChamber oferece como **Apply & Restart**.
|
||||
|
||||
A ferramenta não está disponível quando o OpenChamber se conecta a um servidor OpenCode externo por `OPENCODE_HOST` ou skip-start, nem na extensão do VS Code. As instalações desktop e web que usam o servidor OpenCode gerenciado pelo OpenChamber têm suporte automático.
|
||||
|
||||
@@ -37,3 +37,4 @@ A ferramenta não está disponível quando o OpenChamber se conecta a um servido
|
||||
- [Tarefas agendadas](/pt-br/scheduled-tasks/)
|
||||
- [Sessões de worktree](/pt-br/worktrees/)
|
||||
- [Objetivos de sessão](/pt-br/session-goals/)
|
||||
- [Painel do navegador](/pt-br/desktop-browser/) — a ferramenta OpenChamber Web, para ver uma página e conduzi-la
|
||||
|
||||
@@ -1,22 +1,53 @@
|
||||
---
|
||||
title: Navegador no Desktop
|
||||
description: Navegue por qualquer página dentro do app de desktop, com inspeção e captura de console.
|
||||
title: Painel do navegador
|
||||
description: Navegue em qualquer página dentro do aplicativo, anote-a e deixe o agente conduzi-la.
|
||||
---
|
||||
|
||||
# Navegador no Desktop
|
||||
# Painel do navegador
|
||||
|
||||
O app de desktop tem um navegador integrado para você abrir qualquer página logo ao lado do seu chat, apontar para elementos para perguntar sobre eles e capturar o console da página. Abra-o pelo botão de globo no cabeçalho do app.
|
||||
O painel do navegador abre qualquer página bem ao lado do seu chat. Abra-o pelo botão do globo no cabeçalho.
|
||||
|
||||
> O navegador no desktop é um recurso **apenas para desktop**. Na web, o painel de [preview](/pt-br/preview/) oferece as mesmas ferramentas de inspeção e console para o seu servidor de desenvolvimento local.
|
||||
No aplicativo desktop é um navegador de verdade: seus logins persistem, a recarga a quente funciona e as ferramentas de desenvolvedor estão a um clique. Em uma aba do navegador o painel exibe a página, mas não consegue olhar dentro dela — as ferramentas de anotação abaixo são exclusivas do desktop.
|
||||
|
||||
## Inspecionar e anotar
|
||||
Páginas abertas aqui não podem usar sua câmera, seu microfone nem sua localização: esses pedidos são recusados.
|
||||
|
||||
Ative o **inspect** e clique em qualquer elemento da página. O OpenChamber captura uma nota sobre ele — o que é, seus estilos, onde fica e uma captura de tela — e a anexa à sua mensagem no chat. É a forma mais rápida de dizer ao agente "este elemento, bem aqui".
|
||||
## A barra de ferramentas
|
||||
|
||||
## Captura de console
|
||||
A barra de endereço lembra as páginas que você abriu neste projeto e as oferece enquanto você digita, procurando por parte do endereço ou do título da página. As setas percorrem a lista, Enter abre o item destacado e o botão da linha o remove.
|
||||
|
||||
O navegador coleta a saída do console da página — erros, avisos e logs — para que você possa filtrá-la e lê-la sem abrir as ferramentas de desenvolvedor.
|
||||
Ao lado fica **Recarregar**, junto de uma **recarga forçada** que ignora o cache quando uma mudança teima em não aparecer, e os controles de zoom, que ampliam apenas a página.
|
||||
|
||||
**Limpar cookies** e **Limpar dados em cache** valem só para este painel. Sua sessão do OpenChamber e as outras janelas ficam intactas.
|
||||
|
||||
## Anotar uma página
|
||||
|
||||
Pressione **Anotar** e uma barra aparece sobre a página com três ferramentas:
|
||||
|
||||
- **Elemento** — clique em um elemento. Clicar em outro move a seleção; clicar no mesmo de novo a remove.
|
||||
- **Região** — arraste um retângulo em volta de uma área quando o assunto envolver mais de um elemento.
|
||||
- **Desenhar** — rabisque à mão livre sobre a página.
|
||||
|
||||
Escreva o que quer no campo que aparece ao lado da sua marcação e pressione **Anexar** — ou apenas Enter. Sua mensagem ganha um cartão com tudo o que você marcou, sua nota e uma captura da página visível com suas marcações desenhadas nela — assim você pode dizer "este botão, um pouco mais arredondado" em vez de descrever onde ele está.
|
||||
|
||||
A página em si nunca é modificada — anotar apenas marca o que já está lá. `Esc` cancela e fecha a barra.
|
||||
|
||||
## Deixar o agente conduzir
|
||||
|
||||
O agente pode usar o painel do navegador sozinho — abrir uma página, ler o que há nela, clicar, digitar, rolar e alternar entre layout móvel, de tablet e de desktop — para conferir o próprio trabalho em vez de pedir isso a você. Você vê acontecendo no painel.
|
||||
|
||||
O agente não pode executar código arbitrário na página. O navegador guarda seus logins reais, então ele fica limitado às ações acima.
|
||||
|
||||
Ele também pode salvar uma imagem do que está vendo em `.openchamber/screenshots/` no seu projeto e mostrá-la na resposta. É isso que torna possível um antes e depois, e o arquivo continua lá para anexar a um pull request.
|
||||
|
||||
As ações do navegador são a **ferramenta OpenChamber Web**, que pode ser ligada e desligada por conta própria em **Configurações → Geral → Ferramentas do OpenChamber**.
|
||||
|
||||
Isso exige o aplicativo de desktop: uma página exibida numa aba do navegador não pode ser controlada.
|
||||
|
||||
## Ferramentas de desenvolvedor
|
||||
|
||||
Pressione o botão de terminal na barra para abrir as ferramentas de desenvolvedor do próprio Chromium para a página — console, rede, elementos, tudo o que você espera.
|
||||
|
||||
## Relacionado
|
||||
|
||||
- [Preview e Servidores de Desenvolvimento](/pt-br/preview/) — as mesmas ferramentas para o seu servidor de desenvolvimento local
|
||||
- [Pré-visualização e servidores de desenvolvimento](/preview/) — abrir seu aplicativo em execução, inclusive em uma máquina remota
|
||||
- [Ferramenta de controle para agentes](/pt-br/agent-control-tool/) — sessões, worktrees e tarefas agendadas pelo chat
|
||||
|
||||
@@ -1,32 +1,35 @@
|
||||
---
|
||||
title: Preview e Servidores de Desenvolvimento
|
||||
title: Pré-visualização e servidores de desenvolvimento
|
||||
description: Abra um servidor de desenvolvimento em execução dentro do OpenChamber.
|
||||
---
|
||||
|
||||
# Preview e Servidores de Desenvolvimento
|
||||
# Pré-visualização e servidores de desenvolvimento
|
||||
|
||||
Quando você inicia um servidor de desenvolvimento, o OpenChamber pode abri-lo logo dentro do app em vez de uma aba separada do navegador — para que você veja seu site ao lado do chat, capture seu console e aponte para elementos para perguntar sobre eles.
|
||||
Quando você sobe um servidor de desenvolvimento, o OpenChamber pode abri-lo dentro do próprio aplicativo em vez de uma aba separada — assim você vê seu site ao lado do chat e pode apontar para elementos para perguntar sobre eles.
|
||||
|
||||
## Abrir um preview
|
||||
## Abrir um servidor de desenvolvimento
|
||||
|
||||
O OpenChamber observa a saída do terminal em busca de um endereço local (a linha `Local:` que ferramentas como Vite, Next.js ou Astro imprimem). Quando ele detecta um:
|
||||
Abra o painel do navegador pelo botão do globo no cabeçalho. Se já houver um servidor rodando, ele aparece na lista e um clique o abre: o OpenChamber o encontra olhando o que está de fato escutando na sua máquina, então funciona independentemente de como você o iniciou.
|
||||
|
||||
- no terminal, aparece um botão **Open preview**
|
||||
- uma [ação de projeto](/pt-br/project-actions/) com auto-open ativado o abre para você
|
||||
- um link local em uma mensagem do chat também pode abri-lo
|
||||
Um servidor também abre sozinho quando:
|
||||
|
||||
O site carrega no painel lateral. Apenas endereços locais (na sua própria máquina) podem ter preview.
|
||||
- você pressiona **Abrir pré-visualização** em um endereço local no terminal
|
||||
- uma [ação de projeto](/project-actions/) com abertura automática inicia um
|
||||
- você segue um link local em uma mensagem do chat
|
||||
|
||||
## Console e inspeção
|
||||
Você sempre pode digitar o endereço à mão. Um simples `localhost:5173` é entendido como `http://`, então não precisa escrever o esquema.
|
||||
|
||||
No painel de preview você pode:
|
||||
## Trabalhando com um OpenChamber remoto
|
||||
|
||||
- acompanhar o **console** da página — erros, avisos e logs, filtrados como você quiser
|
||||
- ativar o **inspect**, clicar em qualquer elemento e enviar uma nota sobre ele — seletor, estilos, posição e uma captura de tela — direto no chat
|
||||
Quando o OpenChamber roda em outra máquina, o servidor de desenvolvimento está *nessa* máquina — `localhost` no seu notebook aponta para outro lugar completamente. O aplicativo desktop resolve isso: ele abre uma porta local que leva a conexão até o servidor remoto, de modo que a página carrega normalmente, com recarga a quente e ferramentas de desenvolvedor funcionando. Você continua digitando o endereço que espera; o encanamento não atrapalha.
|
||||
|
||||
Esta é a forma mais rápida de dizer ao agente "este botão, aqui" sem descrevê-lo.
|
||||
Isso exige o aplicativo desktop. Em uma aba do navegador, só é possível abrir servidores da sua própria máquina.
|
||||
|
||||
## Anotar a página
|
||||
|
||||
Veja [Painel do navegador](/desktop-browser/) para apontar elementos, desenhar sobre a página e mandar tudo para o chat.
|
||||
|
||||
## Relacionado
|
||||
|
||||
- [Ações de Projeto](/pt-br/project-actions/) — abra um servidor automaticamente ao iniciá-lo
|
||||
- [Navegador no Desktop](/pt-br/desktop-browser/) — as mesmas ferramentas para qualquer página, no desktop
|
||||
- [Ações de projeto](/project-actions/) — abrir um servidor automaticamente ao iniciá-lo
|
||||
- [Painel do navegador](/desktop-browser/) — anotar páginas e deixar o agente conduzir
|
||||
|
||||
@@ -28,7 +28,7 @@ description: Дозвольте агенту керувати сесіями, wo
|
||||
|
||||
## Увімкнення та вимкнення
|
||||
|
||||
Відкрийте **Налаштування → Загальні → OpenCode CLI**, змініть **Інструмент керування для агентів**, потім виберіть **Save + Reload**. Налаштування застосовується після перезапуску керованого сервера OpenCode.
|
||||
Відкрийте **Налаштування → Загальні → Інструменти OpenChamber** і змініть **Інструмент керування для агентів**. Налаштування застосовується після перезапуску керованого сервера OpenCode, який OpenChamber запропонує як **Apply & Restart**.
|
||||
|
||||
Інструмент недоступний, коли OpenChamber підключається до зовнішнього сервера OpenCode через `OPENCODE_HOST` чи skip-start, а також у розширенні VS Code. Десктопні та вебінсталяції з керованим OpenChamber сервером OpenCode підтримують його автоматично.
|
||||
|
||||
@@ -37,3 +37,4 @@ description: Дозвольте агенту керувати сесіями, wo
|
||||
- [Заплановані задачі](/uk/scheduled-tasks/)
|
||||
- [Сесії worktree](/uk/worktrees/)
|
||||
- [Цілі сесії](/uk/session-goals/)
|
||||
- [Панель браузера](/uk/desktop-browser/) — інструмент OpenChamber Web — дивитися на сторінку й керувати нею
|
||||
|
||||
@@ -1,22 +1,64 @@
|
||||
---
|
||||
title: Десктопний браузер
|
||||
description: Переглядайте будь-яку сторінку всередині десктопного застосунку, з інспекцією та перехопленням консолі.
|
||||
title: Панель браузера
|
||||
description: Переглядайте будь-яку сторінку в застосунку, анотуйте її та дозвольте агенту нею керувати.
|
||||
---
|
||||
|
||||
# Десктопний браузер
|
||||
# Панель браузера
|
||||
|
||||
Десктопний застосунок має вбудований браузер, тож ви можете відкрити будь-яку сторінку просто поруч із чатом, вказувати на елементи, щоб запитати про них, і перехоплювати консоль сторінки. Відкрийте його з кнопки глобуса в заголовку застосунку.
|
||||
Панель браузера відкриває будь-яку сторінку просто поруч із чатом. Відкрийте її кнопкою глобуса в заголовку застосунку.
|
||||
|
||||
> Десктопний браузер — це функція **лише для десктопа**. У вебі панель [перегляду](/uk/preview/) пропонує ті самі інструменти інспекції та консолі для вашого локального dev-сервера.
|
||||
У десктопному застосунку це справжній браузер: ваші входи зберігаються, гаряче перезавантаження працює, а інструменти розробника — за один клік. У вкладці веббраузера панель теж покаже сторінку, але не зможе зазирнути всередину — інструменти анотацій нижче доступні лише на десктопі.
|
||||
|
||||
## Інспекція та анотування
|
||||
Сторінки, відкриті тут, не можуть скористатися вашою камерою, мікрофоном чи місцем перебування: такі запити відхиляються.
|
||||
|
||||
Увімкніть **inspect** і клікніть будь-який елемент на сторінці. OpenChamber перехоплює нотатку про нього — що це, його стилі, де він розташований, і знімок екрана — і прикріплює її до вашого повідомлення в чаті. Це найшвидший спосіб сказати агентові «ось цей елемент, прямо тут».
|
||||
## Панель інструментів
|
||||
|
||||
## Перехоплення консолі
|
||||
Адресний рядок памʼятає сторінки, які ви відкривали в цьому проєкті, і пропонує їх під час набору, звіряючись із частиною адреси або назвою сторінки. Стрілки рухають списком, Enter відкриває підсвічений запис, а кнопка в рядку прибирає його зі списку.
|
||||
|
||||
Браузер збирає вивід консолі сторінки — помилки, попередження та логи — щоб ви могли фільтрувати й читати його, не відкриваючи інструменти розробника.
|
||||
Поруч — **перезавантаження**, а також **жорстке перезавантаження**, яке ігнорує кеш, коли зміна вперто не показується, і керування масштабом, що змінює лише сторінку.
|
||||
|
||||
## Пов'язане
|
||||
**Очистити куки** та **Очистити кеш** стосуються тільки цієї панелі. Вашої сесії OpenChamber та інших вікон це не торкається.
|
||||
|
||||
- [Перегляд і dev-сервери](/uk/preview/) — ті самі інструменти для вашого локального dev-сервера
|
||||
## Анотувати сторінку
|
||||
|
||||
Натисніть **Анотувати** — над сторінкою зʼявиться панель із трьома інструментами:
|
||||
|
||||
- **Елемент** — клікніть на елемент. Клік по іншому переносить вибір, повторний клік по тому самому — знімає його.
|
||||
- **Область** — обведіть ділянку рамкою, коли йдеться більш ніж про один елемент.
|
||||
- **Малювання** — малюйте від руки поверх сторінки.
|
||||
|
||||
Опишіть бажане в полі, що зʼявляється поруч із позначкою, і натисніть **Додати** — або просто Enter. У повідомленні чату зʼявиться картка з усім, що ви позначили, з вашою нотаткою і зі знімком видимої сторінки, на якому намальовано твої позначки — тож можна сказати «оця кнопка, трохи круглішу», а не описувати, де вона.
|
||||
|
||||
Сама сторінка при цьому не змінюється — анотація лише позначає те, що є. `Esc` скасовує й закриває панель.
|
||||
|
||||
## Дозволити агенту керувати
|
||||
|
||||
Агент може сам користуватися панеллю браузера — відкривати сторінку, читати, що на ній, клікати, вводити текст, прокручувати й перемикатися між мобільним, планшетним і десктопним розкладами — щоб перевіряти власну роботу, а не просити про це вас. Ви бачитимете це в панелі.
|
||||
|
||||
Агент не може виконувати довільний код на сторінці. Браузер зберігає ваші справжні входи, тож агент обмежений переліченими діями.
|
||||
|
||||
Він також може зберегти знімок того, що бачить, у `.openchamber/screenshots/` вашого проєкту й показати його у відповіді. Саме це робить можливим «до і після», а файл лишається на місці, щоб потім прикріпити його до pull request.
|
||||
|
||||
Дії з браузером — це **інструмент OpenChamber Web**, який вмикається й вимикається окремо в **Налаштування → Загальні → Інструменти OpenChamber**.
|
||||
|
||||
Для цього потрібен десктопний застосунок: сторінкою у вкладці веббраузера керувати не вийде.
|
||||
|
||||
## Розмір і оформлення
|
||||
|
||||
Натисніть кнопку телефона, щоб відкрити панель пристроїв. Оберіть пресет або
|
||||
введіть ширину й висоту — сторінка буде викладена саме в цьому розмірі, а якщо
|
||||
не вміщається в панель, її буде зменшено візуально. Сама сторінка при цьому
|
||||
вимірює себе в тому розмірі, який ви задали.
|
||||
|
||||
Там же можна змусити сторінку показатися світлою чи темною, не змінюючи нічого
|
||||
на своїй машині. З DevTools вони не поєднуються: у сторінки може бути лише один
|
||||
приєднаний зневаджувач, тож DevTools доведеться спершу закрити.
|
||||
|
||||
## Інструменти розробника
|
||||
|
||||
Натисніть кнопку термінала на панелі, щоб відкрити власні інструменти розробника Chromium для сторінки — консоль, мережу, елементи, усе як зазвичай.
|
||||
|
||||
## Повʼязане
|
||||
|
||||
- [Перегляд і dev-сервери](/preview/) — як відкрити запущений застосунок, зокрема на віддаленій машині
|
||||
- [Інструмент керування для агентів](/uk/agent-control-tool/) — сесії, worktree й заплановані задачі просто з чату
|
||||
|
||||
@@ -5,28 +5,31 @@ description: Відкрийте запущений dev-сервер усеред
|
||||
|
||||
# Перегляд і dev-сервери
|
||||
|
||||
Коли ви запускаєте dev-сервер, OpenChamber може відкрити його просто всередині застосунку замість окремої вкладки браузера — щоб ви могли бачити свій сайт поруч із чатом, перехоплювати його консоль і вказувати на елементи, щоб запитати про них.
|
||||
Коли ви запускаєте dev-сервер, OpenChamber може відкрити його просто всередині застосунку замість окремої вкладки браузера — щоб ви бачили свій сайт поруч із чатом і могли вказувати на елементи, щоб запитати про них.
|
||||
|
||||
## Відкриття перегляду
|
||||
## Відкрити dev-сервер
|
||||
|
||||
OpenChamber слідкує за виводом терміналу на предмет локальної адреси (рядок `Local:`, який друкують інструменти на кшталт Vite, Next.js чи Astro). Коли він її помічає:
|
||||
Відкрийте панель браузера кнопкою глобуса в заголовку застосунку. Якщо dev-сервер уже запущено, він буде у списку — один клік, і він відкриється. OpenChamber знаходить його за тим, що насправді слухає порти на вашій машині, тож це працює незалежно від того, як саме ви його запустили.
|
||||
|
||||
- у терміналі з'являється кнопка **Open preview**
|
||||
- [дія проєкту](/uk/project-actions/) з увімкненим автовідкриттям відкриває її за вас
|
||||
- локальне посилання в повідомленні чату теж може її відкрити
|
||||
Dev-сервер також відкривається автоматично, коли:
|
||||
|
||||
Сайт завантажується в бічній панелі. Переглянути можна лише локальні адреси (на вашій власній машині).
|
||||
- ви натискаєте **Відкрити перегляд** на локальній адресі в терміналі
|
||||
- [дія проєкту](/project-actions/) з увімкненим автовідкриттям запускає його
|
||||
- ви переходите за локальним посиланням у повідомленні чату
|
||||
|
||||
## Консоль та інспекція
|
||||
Адресу завжди можна ввести вручну. Простий `localhost:5173` трактується як `http://`, тож схему писати не обовʼязково.
|
||||
|
||||
У панелі перегляду ви можете:
|
||||
## Робота з віддаленим OpenChamber
|
||||
|
||||
- спостерігати за **консоллю** сторінки — помилки, попередження та логи, відфільтровані як вам зручно
|
||||
- увімкнути **inspect**, клікнути будь-який елемент і надіслати нотатку про нього — селектор, стилі, позицію та знімок екрана — прямо в чат
|
||||
Коли OpenChamber працює на іншій машині, його dev-сервер теж на *тій* машині — `localhost` на вашому ноутбуці веде зовсім не туди. Десктопний застосунок робить це за вас: відкриває локальний порт, який проводить зʼєднання до віддаленого dev-сервера, тож сторінка вантажиться як звичайно, з робочим гарячим перезавантаженням і інструментами розробника. Ви й далі вводите очікувану адресу; технічні деталі вам не заважають.
|
||||
|
||||
Це найшвидший спосіб сказати агентові «ось ця кнопка, тут», не описуючи її.
|
||||
Для цього потрібен десктопний застосунок. У вкладці браузера можна відкрити лише dev-сервери на вашій власній машині.
|
||||
|
||||
## Пов'язане
|
||||
## Анотації на сторінці
|
||||
|
||||
- [Дії проєкту](/uk/project-actions/) — автоматично відкривайте сервер при запуску
|
||||
- [Десктопний браузер](/uk/desktop-browser/) — ті самі інструменти для будь-якої сторінки на десктопі
|
||||
Про те, як вказувати на елементи, малювати на сторінці й надсилати все це в чат, читайте в розділі [Панель браузера](/desktop-browser/).
|
||||
|
||||
## Повʼязане
|
||||
|
||||
- [Дії проєкту](/project-actions/) — автовідкриття сервера після запуску
|
||||
- [Панель браузера](/desktop-browser/) — анотації сторінок і керування агентом
|
||||
|
||||
@@ -28,7 +28,7 @@ description: 让智能体从聊天中管理 OpenChamber 会话、worktree 和计
|
||||
|
||||
## 开启或关闭工具
|
||||
|
||||
打开 **设置 → 常规 → OpenCode CLI**,更改 **智能体控制工具**,然后选择 **Save + Reload**。该设置会在托管的 OpenCode 服务器重启后生效。
|
||||
打开 **设置 → 常规 → OpenChamber 工具**,更改 **智能体控制工具**。该设置会在托管的 OpenCode 服务器重启后生效,OpenChamber 会以 **Apply & Restart** 的形式提示重启。
|
||||
|
||||
当 OpenChamber 通过 `OPENCODE_HOST` 或 skip-start 连接外部 OpenCode 服务器时,或在 VS Code 扩展中,此工具不可用。使用 OpenChamber 托管 OpenCode 服务器的桌面端和 Web 安装会自动支持此工具。
|
||||
|
||||
@@ -37,3 +37,4 @@ description: 让智能体从聊天中管理 OpenChamber 会话、worktree 和计
|
||||
- [计划任务](/zh-cn/scheduled-tasks/)
|
||||
- [Worktree 会话](/zh-cn/worktrees/)
|
||||
- [会话目标](/zh-cn/session-goals/)
|
||||
- [浏览器面板](/zh-cn/desktop-browser/) — 用于查看并操作页面的 OpenChamber Web 工具
|
||||
|
||||
@@ -1,22 +1,53 @@
|
||||
---
|
||||
title: 桌面浏览器
|
||||
description: 在桌面应用内部浏览任意页面,并提供检查和控制台捕获功能。
|
||||
title: 浏览器面板
|
||||
description: 在应用内浏览任意页面、为其添加标注,并让智能体操作它。
|
||||
---
|
||||
|
||||
# 桌面浏览器
|
||||
# 浏览器面板
|
||||
|
||||
桌面应用内置了浏览器,因此你可以在聊天旁边直接打开任意页面、指向元素来询问相关问题,并捕获页面的控制台。从应用标题栏的地球按钮打开它。
|
||||
浏览器面板会在聊天旁边打开任意页面。用应用标题栏的地球按钮打开它。
|
||||
|
||||
> 桌面浏览器是一项**仅限桌面**的功能。在网页端,[预览](/zh-cn/preview/) 面板为你的本地开发服务器提供相同的检查与控制台工具。
|
||||
在桌面应用中,它是一个真正的浏览器:登录状态会保留,热重载可用,开发者工具一键即达。在浏览器标签页中,面板仍能显示页面,但无法查看其内部——下面的标注工具仅限桌面端。
|
||||
|
||||
## 检查与标注
|
||||
在这里打开的页面无法使用你的摄像头、麦克风或位置:这类请求会被拒绝。
|
||||
|
||||
开启 **inspect** 并点击页面上的任意元素。OpenChamber 会捕获关于它的说明 — 它是什么、它的样式、它所处的位置,以及一张截图 — 并将其附加到你的聊天消息中。这是告诉智能体“就这个元素,就在这里”的最快方式。
|
||||
## 工具栏
|
||||
|
||||
## 控制台捕获
|
||||
地址栏会记住你在这个项目里打开过的页面,并在你输入时给出候选,按地址或页面标题的任意片段匹配。方向键在列表中移动,回车打开选中的一项,行上的按钮把它从列表中移除。
|
||||
|
||||
浏览器会收集页面的控制台输出 — 错误、警告和日志 — 因此你无需打开开发者工具即可筛选和阅读它。
|
||||
旁边是**重新加载**,还有在改动怎么都不出现时忽略缓存的**强制重新加载**,以及只缩放页面的缩放控件。
|
||||
|
||||
## 相关内容
|
||||
**清除 Cookie** 和**清除缓存数据**只作用于这个面板。你的 OpenChamber 会话和其他窗口不受影响。
|
||||
|
||||
- [预览与开发服务器](/zh-cn/preview/) — 为你的本地开发服务器提供相同的工具
|
||||
## 为页面添加标注
|
||||
|
||||
按 **标注**,页面上方会出现一个包含三种工具的工具条:
|
||||
|
||||
- **元素** — 点击某个元素。点击另一个会移动选择,再次点击同一个则取消。
|
||||
- **区域** — 当要说的内容不止一个元素时,拖拽出矩形框住那块区域。
|
||||
- **绘制** — 在页面上自由手绘。
|
||||
|
||||
在标记旁出现的输入框里写下你的想法,然后按 **附加**,或直接按回车。你的聊天消息会收到一张卡片,包含你标记的全部内容、你的备注,以及一张画上你的标记的可见页面截图——于是你可以说"这个按钮,再圆一点",而不必描述它在哪里。
|
||||
|
||||
页面本身不会被修改——标注只是标记已有的内容。按 `Esc` 取消并关闭工具条。
|
||||
|
||||
## 让智能体操作
|
||||
|
||||
智能体可以自己使用浏览器面板——打开页面、读取页面内容、点击、输入、滚动,并在移动端、平板和桌面端布局之间切换——从而自行检查工作成果,而不必来问你。你可以在面板中看到这个过程。
|
||||
|
||||
智能体无法在页面中执行任意代码。浏览器保留着你真实的登录状态,因此它只能执行上述操作。
|
||||
|
||||
它还可以把当前看到的画面保存为图片,放进项目里的 `.openchamber/screenshots/`,并在回复中展示给你。「改动前后」的对比正是靠这一点,而文件会留在那里,方便附到 pull request 上。
|
||||
|
||||
浏览器相关的动作属于 **OpenChamber Web 工具**,可在**设置 → 通用 → OpenChamber 工具**中单独开关。
|
||||
|
||||
这需要桌面应用:在浏览器标签页中显示的页面无法被操作。
|
||||
|
||||
## 开发者工具
|
||||
|
||||
按工具条上的终端按钮,即可打开 Chromium 自带的页面开发者工具——控制台、网络、元素,一应俱全。
|
||||
|
||||
## 相关
|
||||
|
||||
- [预览与开发服务器](/preview/) — 打开正在运行的应用,包括远程机器上的
|
||||
- [智能体控制工具](/zh-cn/agent-control-tool/) — 在聊天中管理会话、worktree 和计划任务
|
||||
|
||||
@@ -1,32 +1,35 @@
|
||||
---
|
||||
title: 预览与开发服务器
|
||||
description: 在 OpenChamber 内部打开正在运行的开发服务器。
|
||||
description: 在 OpenChamber 内打开正在运行的开发服务器。
|
||||
---
|
||||
|
||||
# 预览与开发服务器
|
||||
|
||||
当你启动开发服务器时,OpenChamber 可以直接在应用内部打开它,而不是在单独的浏览器标签页中 — 这样你就可以在聊天旁边查看你的站点、捕获它的控制台,并指向元素来询问相关问题。
|
||||
启动开发服务器后,OpenChamber 可以直接在应用内打开它,而不是另开一个浏览器标签页——这样你就能在聊天旁边看到自己的站点,并指着元素提问。
|
||||
|
||||
## 打开预览
|
||||
## 打开开发服务器
|
||||
|
||||
OpenChamber 会监视终端输出中的本地地址(像 Vite、Next.js 或 Astro 这类工具打印的 `Local:` 行)。当它发现一个时:
|
||||
用应用标题栏的地球按钮打开浏览器面板。如果开发服务器已在运行,它会出现在列表里,点一下即可打开:OpenChamber 是根据你机器上实际正在监听的端口找到它的,因此无论你用什么方式启动都能识别。
|
||||
|
||||
- 终端中会出现一个 **Open preview** 按钮
|
||||
- 一个开启了自动打开的 [项目操作](/zh-cn/project-actions/) 会为你打开它
|
||||
- 聊天消息中的本地链接也可以打开它
|
||||
以下情况开发服务器也会自动打开:
|
||||
|
||||
站点会在侧面板中加载。只有本地地址(在你自己的机器上)才能被预览。
|
||||
- 你在终端的本地地址上按 **打开预览**
|
||||
- 开启了自动打开的[项目操作](/project-actions/)启动了一个
|
||||
- 你点击了聊天消息中的本地链接
|
||||
|
||||
## 控制台与检查
|
||||
你随时可以自己输入地址。直接写 `localhost:5173` 会按 `http://` 处理,不必输入协议。
|
||||
|
||||
在预览面板中你可以:
|
||||
## 配合远程 OpenChamber 使用
|
||||
|
||||
- 查看页面的**控制台** — 错误、警告和日志,可按你喜欢的方式筛选
|
||||
- 开启 **inspect**,点击任意元素,并将关于它的说明 — 选择器、样式、位置和一张截图 — 直接发送到聊天
|
||||
当 OpenChamber 运行在另一台机器上时,它的开发服务器也在*那台*机器上——你笔记本上的 `localhost` 指向的完全是别处。桌面应用会替你处理:它打开一个本地端口,把连接一路接到远程开发服务器,于是页面照常加载,热重载和开发者工具都能用。你仍然输入你预期的地址,底层的管道不会碍事。
|
||||
|
||||
这是告诉智能体“就这个按钮,这里”而无需描述它的最快方式。
|
||||
这需要桌面应用。在浏览器标签页中,只能打开你自己机器上的开发服务器。
|
||||
|
||||
## 相关内容
|
||||
## 为页面添加标注
|
||||
|
||||
- [项目操作](/zh-cn/project-actions/) — 启动服务器时自动打开它
|
||||
- [桌面浏览器](/zh-cn/desktop-browser/) — 在桌面端为任意页面提供相同的工具
|
||||
指向元素、在页面上绘制并把这些一起发到聊天的方法,见[浏览器面板](/desktop-browser/)。
|
||||
|
||||
## 相关
|
||||
|
||||
- [项目操作](/project-actions/) — 启动服务器时自动打开
|
||||
- [浏览器面板](/desktop-browser/) — 标注页面并让智能体操作
|
||||
|
||||
@@ -638,18 +638,18 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"label": "Desktop Browser",
|
||||
"label": "Browser Panel",
|
||||
"link": "/desktop-browser/",
|
||||
"translations": {
|
||||
"uk": "Десктопний браузер",
|
||||
"zh-CN": "桌面浏览器",
|
||||
"es": "Navegador de escritorio",
|
||||
"pt-BR": "Navegador desktop",
|
||||
"ko": "데스크톱 브라우저",
|
||||
"pl": "Przeglądarka na pulpicie",
|
||||
"fr": "Navigateur desktop",
|
||||
"ja": "デスクトップブラウザ",
|
||||
"de": "Desktop-Browser"
|
||||
"uk": "Панель браузера",
|
||||
"zh-CN": "浏览器面板",
|
||||
"es": "Panel del navegador",
|
||||
"pt-BR": "Painel do navegador",
|
||||
"ko": "브라우저 패널",
|
||||
"pl": "Panel przeglądarki",
|
||||
"fr": "Panneau navigateur",
|
||||
"ja": "ブラウザパネル",
|
||||
"de": "Browser-Panel"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user