← Back to Workflow
Skill

Dev Tools Browser Skill

Advanced background browser utilizing the chrome_devtools MCP server. Provides deep access to network requests, console logs, JS evaluation, and performance profiling.

Dev Tools Browser Skill

This skill documents the usage of the Dev Tools Browser, powered by the chrome_devtools MCP server. It sits at Step 2 in the official Web Browsing fallback chain (between the Internal Browser and the Visible Browser).

Unlike the Visible Browser (which is designed for stealth and physical DOM clicks to bypass bot detection), the Dev Tools Browser is designed for deep debugging and developer-level inspection.

I. Architecture & Setup

  • Server Name: chrome_devtools (This is a lazy-loaded MCP server. You must use call_mcp_tool with ServerName: "chrome_devtools").
  • Browser Instance: It runs a headed, visible Chromium process using a dedicated profile (antigravity-browser-profile). It usually spawns in the background behind your other windows.
  • Troubleshooting Connection Errors:
    • If the user manually closes the Chrome window by clicking the "X", it forcefully kills the browser but leaves the IDE's MCP connection hanging. Subsequent tools will fail with an EOF (connection closed) or timeout error.
    • Fix: You MUST explain to the user that manually closing Chrome broke the connection. Ask them to open the Antigravity UI (Installed MCP Servers list), locate chrome_devtools, and toggle the blue switch OFF and then ON. This safely resets the server to a clean state where it is ready to launch Chrome again on your next command.

II. Complete Tool List

The server exposes the following 29 tools. Use the call_mcp_tool wrapper targeting ServerName: "chrome_devtools" to execute them.

  • click: Clicks on the provided element
  • close_page: Closes the page by its index. The last open page cannot be closed.
  • drag: Drag an element onto another element
  • emulate: Emulates various features on the selected page.
  • evaluate_script: Evaluate a JavaScript function inside the currently selected page. Returns the response as JSON, so returned values have to be JSON-serializable.
  • fill: Type text into an input, text area or select an option from a <select> element.
  • fill_form: Fill out multiple form elements (inputs, selects, checkboxes, radios) at once. ALWAYS prefer this tool over multiple individual 'fill' or 'click' calls when interacting with forms. It is significantly faster, more reliable, and reduces turn count. Example: Fill username, password, and check "Remember Me" in one call.
  • get_console_message: Gets a console message by its ID. You can get all messages by calling list_console_messages.
  • get_network_request: Gets a network request by an optional reqid, if omitted returns the currently selected request in the DevTools Network panel.
  • handle_dialog: If a browser dialog was opened, use this command to handle it
  • hover: Hover over the provided element
  • lighthouse_audit: Get Lighthouse score and reports for accessibility, SEO, best practices, and agentic browsing. This excludes performance. For performance audits, run performance_start_trace
  • list_console_messages: List all console messages for the currently selected page since the last navigation.
  • list_network_requests: List all requests for the currently selected page since the last navigation.
  • list_pages: Get a list of pages open in the browser.
  • navigate_page: Go to a URL, or back, forward, or reload. Use project URL if not specified otherwise.
  • new_page: Open a new tab and load a URL. Use project URL if not specified otherwise.
  • performance_analyze_insight: Provides more detailed information on a specific Performance Insight of an insight set that was highlighted in the results of a trace recording.
  • performance_start_trace: Start a performance trace on the selected webpage. Use to find frontend performance issues, Core Web Vitals (LCP, INP, CLS), and improve page load speed.
  • performance_stop_trace: Stop the active performance trace recording on the selected webpage.
  • press_key: Press a key or key combination. Use this when other input methods like fill() cannot be used (e.g., keyboard shortcuts, navigation keys, or special key combinations).
  • resize_page: Resizes the selected page's window so that the page has specified dimension
  • select_page: Select a page as a context for future tool calls.
  • take_heapsnapshot: Capture a heap snapshot of the currently selected page. Use to analyze the memory distribution of JavaScript objects and debug memory leaks.
  • take_screenshot: Take a screenshot of the page or element.
  • take_snapshot: Take a text snapshot of the currently selected page based on the a11y tree. The snapshot lists page elements along with a unique identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot. The snapshot indicates the element selected in the DevTools Elements panel (if any).
  • type_text: Type text using keyboard into a previously focused input
  • upload_file: Upload a file through a provided element.
  • wait_for: Wait for the specified text to appear on the selected page.

III. Capturing Screenshots

1. Visual Inspection (Native Tool)

If you just need to visually check if a page loaded correctly or if an element is visible, use the native take_screenshot MCP tool without passing a filePath argument.

  • How it works: This captures the image and returns it directly to the AI's chat context/UI.
  • Benefit: Fast, built-in, and requires no workspace permissions.

2. Saving to File (CRITICAL WORKAROUND)

If you actually need to save the image as a physical file on the hard drive, you MUST NOT use the native take_screenshot tool with a filePath. The chrome_devtools server enforces a strict MCP roots security sandbox. Unless the user has explicitly mounted a workspace folder in the IDE, the native tool will fail with an Access denied error when trying to write a file.

To bypass this and save the file, you MUST use the provided Win32 background capture script (capture_devtools_bg.py). This script uses the Windows PrintWindow API to physically capture the hidden browser window's content without bringing it to the foreground or violating the security sandbox.

Screenshot Command: python capture_devtools_bg.py "C:\path\to\save\screenshot.png" (Ensure you have successfully navigated to a page using navigate_page before running the script).

This is used in: