DevBrowser

TatsuCode includes a built-in browser designed specifically for web development. It's completely isolated from your system browser, ensuring no credential leakage or cookie mixing.

Why a Separate Browser?

When AI tools use your system browser, they can potentially access:

• Your logged-in sessions
• Saved passwords
• Cookies and tokens
• Browsing history

The DevBrowser eliminates these risks by running in complete isolation.

Privacy Guarantees

Opening the Browser

Start a local server and open the browser:

> Start a server for the dist folder and open it

Or navigate directly:

> Open your app URL in the browser

The DevBrowser window appears alongside TatsuCode.

Basic Actions

Navigation

> Navigate to your local app URL
> Go to the /login page
> Go back to the previous page
> Refresh the page

Screenshots

> Take a screenshot
> Capture the current page

Screenshots are analyzed by vision-capable models (Claude 3.5 Sonnet, GPT-4o) to understand UI state.

Scrolling

> Scroll down
> Scroll to the bottom
> Scroll up 500 pixels

Window Size

> Resize the browser to 1920x1080
> Set browser to mobile size (375x667)

Interactions

Clicking

> Click the login button
> Click the element with id "submit"
> Click the first link in the navigation

TatsuCode uses CSS selectors to find elements.

Typing

> Type "test@example.com" in the email field
> Fill the password field with "secret123"
> Enter "search query" in the search box

Form Controls

> Select "Admin" from the role dropdown
> Check the "Remember me" checkbox
> Focus on the username input

Hovering

> Hover over the menu item

Inspecting Pages

Page Structure

> What's the structure of this page?
> List all interactive elements
> Find all forms on the page

Finding Elements

> Find buttons with text "Submit"
> List all input fields
> What elements have the class "error"?

Getting Content

> Get the text of the error message
> What's the value of the email input?
> Read the attribute "href" from the first link

Console Logs

> Check for console errors
> Show me all console warnings
> Are there any JavaScript errors?

This is invaluable for debugging web applications.

Development Workflows

Testing a Local App

/new ~/projects/my-react-app
> Start the dev server and open it in the browser
> Take a screenshot of the home page
> Click the login button and fill in test credentials
> Check for any console errors

Visual Debugging

> The button isn't showing correctly. Take a screenshot and analyze it.

[Screenshot captured]

I can see the button is being cut off by its container. 
The parent div has `overflow: hidden` which is hiding 
the button's shadow. Let me fix the CSS...

Form Testing

> Test the signup form with invalid data
> Enter "not-an-email" in the email field
> Submit the form
> What error messages appear?

Responsive Testing

> Resize to mobile width and take a screenshot
> Now resize to tablet and screenshot
> Compare the layouts

Selector Improvements (v0.9.107)

A few quiet upgrades make DevBrowser more reliable on complex pages:

• Whitespace-normalized text matching — findByText now matches across line breaks, multi-space whitespace, and trimmed leading/trailing space. Buttons whose visible text is broken across lines now match cleanly.
• Broadened wildcard selector for SPA card layouts — generic card / panel patterns common in single-page apps resolve more reliably.

Most of this is invisible — selectors that used to occasionally miss will now hit. If you'd been working around either issue, you can drop the workaround.

Selectors

TatsuCode uses CSS selectors to find elements. Common patterns:

If a selector fails, TatsuCode can suggest alternatives:

> Click #nonexistent-button

Selector "#nonexistent-button" not found. Similar elements:
- #login-button
- .btn-submit
- button[type="submit"]

JavaScript Execution

For advanced interactions:

> Execute: document.querySelector('form').submit()
> Run this JavaScript: localStorage.clear()

JavaScript execution requires approval for security.

Managing Sessions

Clearing State

> Clear the browser cache
> Clear cookies and storage

Multiple Pages

The DevBrowser operates as a single window. For multi-page testing:

> Open page A, take screenshot
> Navigate to page B, take screenshot
> Compare them

Local Server Management

Starting Servers

> Start a server for the ./public folder
> Start a server on port 3000 for ./dist

Servers auto-select available ports (8080, 8081, 3000, etc.).

Managing Servers

> List running servers
> Stop the server on port 8080
> Stop all servers

Servers automatically stop when TatsuCode exits.

Troubleshooting

Element Not Found

• Page may not have finished loading
• Element may be inside an iframe
• Selector may be wrong

Try:

> Wait for the page to load, then click the button
> List all interactive elements so I can find the right one

Screenshots Show Wrong State

• Content may have changed
• Animations may be in progress

Try:

> Wait 2 seconds, then take a screenshot

JavaScript Errors

Check the console:

> Show me all console errors
> What JavaScript exceptions occurred?

Page Won't Load

• Server may not be running
• Port may be blocked
• URL may be wrong

Try:

> Is the dev server running?
> List running servers

Limitations

• Single window — One browser instance at a time
• No browser extensions — Intentionally omitted for security
• No saved sessions — Each session starts fresh
• AI can't playtest real-time games — Due to response latency, the AI cannot perform QA on games requiring continuous input or real-time reactions

DevBrowser is fully capable of building and running games efficiently. For real-time or interactive games, the AI can develop, debug, and set up tests, but you'll need to handle the actual playtesting yourself.

Next Steps

• Tools Reference — All available tools
• AI Capabilities — What TatsuCode can do
• Troubleshooting — Common issues