Web view

When the Coder changes something you can see, such as a page, a form, or a layout, it does not guess. It starts the app inside its own workspace, opens it in a real browser, looks at the result, and takes screenshots. The browser belongs to the Coder's workspace, so nothing opens on your machine.

What the Coder does with it#

• Starts your app's development server in its workspace.
• Opens the page, clicks, types, fills in forms, and moves through the app the way a person would.
• Reads the page and notes what it shows, including errors reported in the browser.
• Takes screenshots and names them in its report.
• Stops the servers it started when it is done, using a free port if the usual one is busy.

The browser is optional kit. It is used only when the workspace has it installed, and you can see whether it is there in the Tools view of the Computer page.

Where the screenshots go#

Screenshots are saved as files in the Coder's workspace, in a screenshots folder, and the Coder lists them in its report. Open Files in the Computer view to find them. Small pictures preview right in the view.

They are kept out of your pull request. The Coder never adds them to the repository, so they never show up in a diff.

What you can open#

Because the Coder serves the app inside its workspace, the address it uses is local to that workspace, such as localhost. Your own browser cannot reach that address directly.

Limits worth knowing#

• The browser opens local pages only. It will not wander to other websites.
• A page that pulls fonts or scripts from other sites will show those requests as blocked, so a page may look slightly different from how it does on the web.
• The workspace's network is limited to an approved list of places. If your app needs to reach a service outside it, the Coder will tell you what it could not reach.
• If the browser tools fail to start, the Coder says so in the Terminal and carries on without them.

Prompts#

Coder, after you change [component], start the app, open [page] in the browser, and take a screenshot at a phone width and a laptop width. Tell me the file names.

Coder, open [page] in the browser and tell me about any errors the browser reports. Do not change any code yet.

Coder, walk through [flow, for example sign-up to first project] in the browser and take a screenshot at each step. Tell me where it feels broken or confusing.