Have you ever felt AI was blind when debugging your web app with AI agent? AI couldn't see the shift in UI layout? AI didn't care about the loading performance or issues with styles?
With the power of using real browser, the AI agent can do better. ChromeDevtools MCP enables the ai agents to use a real browser, load the app, click buttons or fill form on the app, collect logs, take snapshots, and fix things with a real 'vision'. This guide is for VS Code but similar steps can be found for any IDE.
Install the extension
Open extensions (Ctrl + Shift + x)
Search @mcp devtools
Install ChromeDevTools
Ensure the MCP server is running
Right click on the installed extension to get actions menu (you can do start/stop/restart/configure here)
Open the project folder in IDE for the AI agent to get the context.
You can also use npx chrome-devtools-mcp@latest --help to see all available configuration options.
Use it
Open the Copilot chat on the IDE and ask why my form is not centered or Test this form submission with all inputs or Check if layout shifts with error messages displaying on the form or Improve the LCP.
Tools
This MCP provides many tools to the AI agent. You can use '#' in chat to see the list of tools available. Here is an example with direct tools usage and in common words. Both will work. Use tools for a precise prompt and faster response.
#navigate_page home page and #fill_form first name: Adam, last name: Noah, #take_snapshot , #click submit, #wait_for submission, #list_network_requests , #list_console_messages
Navigate to the home page and fill the form with first name: Adam, last name: Noah. Click the submit button and wait for it. List down the console logs. List down the network requests.
Top comments (1)
I hadn't seen this, super helpful!