← 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 Playwright Browser).

Unlike the Playwright 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.

[!WARNING] LOGIN LIMITATION: The Dev Tools Browser is easily detected as a bot by Google and other platforms, preventing you from logging into accounts. If a workflow requires authentication or logging into a site, you MUST use the Playwright Browser instead.

I. Architecture & Setup

  • Server Name: chrome-devtools-mcp (This is a lazy-loaded MCP server. You must use call_mcp_tool with ServerName: "chrome-devtools-mcp").
  • 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 browser fails to open or throws an EOF/timeout error, verify the server is installed and active:
      1. Explain to the user that the server may need to be added or reset.
      2. Ask them to open the Antigravity UI (Installed MCP Servers list).
      3. Verify chrome-devtools-mcp is added (if not, click Add MCP + and add Chrome DevTools for agents).
      4. If it is installed, toggle the blue switch OFF and then ON to reset the server connection.

II. Complete Tool List

The server exposes the following 29 tools. Use the call_mcp_tool wrapper targeting ServerName: "chrome-devtools-mcp" 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.
  • Viewport vs. Full Page: The tool accepts a fullPage boolean flag.
    • Viewport (fullPage: false, default): Takes a picture of exactly what is currently visible on the screen. USE THIS for interacting with the page (e.g., getting accurate coordinates for clicking), dealing with sticky headers/footers, or when speed/token limit is a priority.
    • Full Page (fullPage: true): Takes a picture of the entire scrolling length of the document. USE THIS only when you need a holistic archive of the page layout, as it can generate massive files, hit memory limits, and cause visual glitches with fixed elements.

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: