Playwright MCP vs Chrome DevTools MCP: Which One Should You Use?

28 September 2025

Exploring Chrome DevTools MCP: A Complete Guide for Agents

28 September 2025

Introduction

Chrome DevTools has long been the go-to toolkit for developers to inspect, debug, and optimize web applications. Traditionally, it required manual interaction through the Chrome UI.

Now, with Model Context Protocol (MCP), DevTools can be exposed as structured tools that agents (LLMs) can call programmatically. This means agents can not only reason about problems but also open Chrome, inspect the DOM, capture traces, analyze performance, and even interact with forms directly — closing the loop between reasoning and action.

In this article, we’ll walk through each available tool in Chrome DevTools MCP, show practical examples, and provide sample prompts that you can use with an AI agent.

Tool Categories and Examples

🔹 Input Automation

click – simulate user click.
Example: click(selector="#submit-button")
drag – drag one element to another.
Example: drag(sourceSelector="#item", targetSelector="#dropzone")
fill – fill a single input.
Example: fill(selector="#email", value="test@example.com")
fill_form – fill multiple fields at once. fill_form({ "#username": "john_doe", "#password": "StrongPass123" })
handle_dialog – accept/dismiss alert, confirm, or prompt.
Example: handle_dialog(action="accept")
hover – hover over an element.
Example: hover(selector=".menu-item")
upload_file – upload a file into <input type="file">.
Example: upload_file(selector="#file", path="/tmp/data.csv")

🔹 Navigation

new_page – open a new page.
Example: new_page()
navigate_page – go to a specific URL.
Example: navigate_page("https://example.com")
close_page – close a tab.
Example: close_page(pageId)
list_pages – list all open tabs.
Example: list_pages()
select_page – switch agent context to a tab.
Example: select_page(pageId)
navigate_page_history – go back or forward in history.
Example: navigate_page_history(pageId, direction="back")
wait_for – wait for a condition (selector, navigation).
Example: wait_for(selector="#ready", timeout=5000)

🔹 Performance

performance_start_trace – start recording a trace.
performance_stop_trace – stop and return trace data.
performance_analyze_insight – analyze metrics like LCP, TBT, CLS.

Workflow Example:

performance_start_trace()
click(selector="#load-more")
performance_stop_trace()
performance_analyze_insight(trace)

🔹 Debugging

evaluate_script – run JavaScript in the page.
Example: evaluate_script("document.title")
list_console_messages – get console logs.
Example: list_console_messages(pageId)
take_screenshot – capture a screenshot.
Example: take_screenshot(pageId)
take_snapshot – capture DOM snapshot.
Example: take_snapshot(pageId)

🔹 Network

list_network_requests – view all network requests.
Example: list_network_requests(pageId)
get_network_request – inspect a single request.
Example: get_network_request(pageId, requestId)

🔹 Emulation

emulate_cpu – throttle CPU.
Example: emulate_cpu(rate=4)
emulate_network – set network profile (3G, WiFi, offline).
Example: emulate_network(profile="Slow 3G")
resize_page – set viewport dimensions.
Example: resize_page(width=375, height=812)

Sample Prompts for Agents

Here are some ready-to-use prompts you can provide to an agent connected with Chrome DevTools MCP:

Prompt 1: Diagnose a failing login form

Open a new page and navigate to https://myapp.com/login.
Fill the username field with "demo" and the password with "wrongpass".
Click the login button and wait for an error message.
Take a screenshot and list console messages.
Tell me why the login failed.

Prompt 2: Analyze performance on mobile network

Navigate to https://news-site.com.
Emulate Slow 3G network and throttle CPU x4.
Start a performance trace, wait for the page to load completely, then stop the trace.
Analyze the trace and explain which scripts or resources slowed down the loading.

Prompt 3: Inspect broken images

Navigate to https://ecommerce.com/product/123.
List all network requests and filter for those with 404 status.
For each failing request, get its details.
Take a screenshot of the product page.
Suggest fixes for the missing images.

Prompt 4: Test responsive layout

Navigate to https://my-portfolio.com.
Resize the page to width=375, height=812 (iPhone X).
Take a screenshot of the viewport.
Then resize to 1440x900 and take another screenshot.
Compare layouts and report differences.

Why This Matters

By combining DevTools capabilities with MCP, agents can:

Debug websites automatically.
Verify UI functionality with clicks, forms, and dialogs.
Analyze performance traces without manual setup.
Inspect network activity to catch errors early.
Emulate real-world conditions (slow networks, small devices).

This makes Chrome DevTools MCP not just a developer tool — but a powerful autonomous assistant toolkit.