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

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