Chrome DevTools MCP

Source: Dev.to

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 open the actions menu (start/stop/restart/configure).
Open the project folder in the IDE so the AI agent has context.

You can also run:

npx chrome-devtools-mcp@latest --help

to see all available configuration options.

Use it

Open the Copilot chat in the IDE and ask, for example:

• “Why is my form not centered?”
• “Test this form submission with all inputs.”
• “Check if layout shifts with error messages displaying on the form.”
• “Improve the LCP.”

Tools

The MCP provides many tools to the AI agent. Use # in chat to see the list of available tools. Both direct tool commands and natural‑language descriptions work.

Example command syntax

#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

Natural‑language equivalent

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 the console logs. List the network requests.

GitHub page for more help