Analyzing Logs for Debugging & Validation
- Get Console Logs: Returns the most recent console logs
- Get Console Errors: Returns the most recent console errors
- Get XHR Network Logs: Returns all of the most recent xhr requests that results in an HTTP success response code like 200 or 300
- Get XHR Network Errors: Returns the most recent xhr requests that returned a 400 or 500 HTTP error response code Cursor agent will automatically use all four tools if you ask this when debugging.
- Wipe Logs: Deletes all logs stored on the server Cursor agent will delete all logs stored in the server so that you have a fresh slate for debugging. Useful if you don’t want to refresh to browser to wipe reset/wipe your logs.
Updating & Debugging UI Components
-
Capture Screenshot: Sends a screenshot to
/user/Downloads/mcp-screenshotsWe suggest setting a custom path in the dev tools panel so screenshots are sent directly to AI code editors workspace / current project. Then you can easily drag n’ drop screenshots into your AI chat interface. - Get currently selected element: Returns the currently selected element. When using the chrome dev tools you can use the Element Selector tool to select any component in your UI. After selecting an element, you’ll be be able to ask Cursor to edit or find the currently selected element in your code. This makes traversing through a codebase and making UI changes much easier.
Requirements
- NodeJS installed on your machine
- Google Chrome or a Chromium-based Browser
- MCP Client Application (Cursor, RooCode, Continue, Zed, Cline, Claude Desktop)
- BrowserToolsMCP Chrome Extension, Server & MCP Client Setup
Note: Model Context Protocol (MCP) is specific to Anthropic models. When
using an editor like Cursor, make sure to enable composer agent with Claude
3.5 Sonnet selected as the model.