What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Chrome DevTools MCP Server is an open-source Model Context Protocol (MCP) server that lets a compatible AI coding agent control a live Chrome browser and use DevTools capabilities. After you register the server, your agent can navigate pages, inspect the DOM and console, debug runtime problems, and gather performance information. The server is software launched through Node.js; it is not a browser extension or a physical device.
The quickest Codex setup is:
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latestWhen an agent first invokes a browser-dependent tool, the server starts or connects to Chrome according to your configuration. Simply adding the MCP server does not necessarily open a browser immediately.
What Chrome DevTools MCP does
Chrome describes DevTools for agents as “a suite of tools that brings the power of Chrome DevTools to your AI coding workflows.” The MCP server is the component that exposes those capabilities to an MCP-compatible client such as Codex or another coding agent.
Instead of asking an agent to reason only from source files, you can let it work against a running page. Depending on the tools enabled by your installed version, an agent can perform browser interactions, inspect page state, examine console output, investigate network and runtime behavior, and collect performance insights. This is useful when a defect appears only after JavaScript runs, when layout depends on a real viewport, or when a page requires authentication and client-side data.
#1 Best Overall
The server is distributed through npm. The documented requirements are Node.js LTS, npm, and current stable Chrome or newer. Package flags and Chrome compatibility can change, so check the current project documentation when you pin a version rather than using @latest.
Set up Chrome DevTools MCP in Codex
1. Verify the prerequisites
- Install Node.js LTS and confirm that
node --versionandnpm --versionwork in the same environment where Codex runs. - Install a current stable Chrome release.
- Use a Codex build that supports MCP server registration.
If Codex cannot find npx, fix the Node.js installation or PATH before troubleshooting the MCP server.
2. Register the server
Run the official Codex command:
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latestThe name chrome-devtools is the local MCP-server name. The double hyphen separates Codex options from the command Codex should launch. npx downloads or uses the package and starts it when Codex needs the server.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall3. Start a task that needs Chrome
Ask the agent to open or inspect a page and invoke a Chrome tool. The first browser-dependent call is when the server normally starts the browser. If you only connect to the MCP endpoint and see no Chrome window, that can be expected.
4. Confirm the connection
Have the agent perform a small, harmless action such as opening a local development URL and reading the page title. A successful response demonstrates that Codex can reach the server and that the server can reach Chrome. Test with a non-sensitive profile before connecting an authenticated session.
Generic MCP configuration
Clients that accept a command-and-arguments MCP definition can launch the server with:
npx -y chrome-devtools-mcp@latestThe -y flag allows npx to proceed without an installation prompt. Translate that command into your client’s MCP configuration format; the exact file location and JSON or TOML shape are client-specific. Keep the package version explicit if reproducibility matters, because @latest follows the newest published release.
Full versus slim configuration
The project documents a slim configuration for simpler browser tasks and flags for selecting enabled tool categories. Slim mode can reduce the surface exposed to an agent, while full mode is appropriate when you need the broader inspection and debugging workflow. Because flag names and supported categories are version-sensitive, obtain the options from the version you installed rather than copying an old configuration unchanged.
Choose how Chrome runs
Visible (headed) Chrome
A visible browser is easiest to understand while developing. You can watch navigation, consent dialogs, redirects, and permission prompts as they happen. It is generally the best first choice for diagnosing a page that behaves differently from your expectations.
Headless Chrome
Headless mode runs without a visible window and is useful in CI, containers, and remote development environments. Make sure the environment has the fonts, certificates, network access, and display-independent dependencies your page needs. A page that works on your workstation can still fail in a minimal CI image.
Launch a managed browser or connect to one
The server can launch Chrome itself, or connect to an already running browser. Configuration flags documented by the project include --autoConnect and --browser-url; exact support depends on the installed release.
Automatic connection is documented for Chrome 144 or newer in the configuration guide. Manual connection uses a browser debugging URL. A debugging endpoint is a control surface, not a view-only feed: any application that can reach the debugging port may be able to control that browser. Bind it narrowly, protect the route, and avoid exposing it to an untrusted network.
Existing authenticated sessions
Connecting to your normal Chrome session can preserve logged-in state, cookies, and account context. It also gives the agent access to that browser data. Use this mode only with an agent you trust, and prefer a separate Chrome profile with the minimum accounts and permissions needed for the task. Do not assume that an existing session is isolated or risk-free.
A practical Codex workflow
- Start with a separate Chrome profile or a local test site.
- Register the server with the Codex command above.
- Ask Codex to navigate to the page and report the title, URL, and visible errors.
- Ask it to inspect the console and relevant DOM or network state.
- Reproduce the bug in the live page, then request a diagnosis tied to the observed evidence.
- Make the smallest code change, reload, and repeat the same check.
- For performance work, capture a consistent scenario and compare the resulting insights rather than relying on a subjective feeling of speed.
Give the agent explicit boundaries: which URL it may visit, whether it may click or submit forms, and whether it may modify data. Browser control is powerful enough to perform real account actions.
Rank #3
Security and trust boundaries
- Authenticated data: an existing session may expose cookies, account pages, personal information, and tokens available to that profile.
- Remote debugging: a reachable debugging port can permit browser control. Do not publish it openly or forward it through an untrusted network.
- Prompt-driven actions: an agent can follow instructions that lead to navigation, clicks, form entry, downloads, or other side effects. Use a test account for exploratory work.
- Profile separation: a dedicated profile limits what the agent can see and makes revocation straightforward.
- Least privilege: enable only the tool categories needed for the job, especially in shared or automated environments.
Common setup problems and fixes
Codex says the command is not found
Cause: Node.js or npm is missing from the Codex process environment, or PATH differs between your shell and Codex.
Fix: install Node.js LTS, restart Codex, and verify node, npm, and npx from the same environment.
The server connects but no browser appears
Cause: the browser is launched lazily, or headless mode is enabled.
Fix: invoke a browser-dependent tool, then inspect the configured mode. Use visible mode for diagnosis or headless mode intentionally in automation.
Chrome cannot be reached
Cause: an incorrect browser URL, an unsupported Chrome version for automatic connection, a closed debugging endpoint, or a blocked port.
Free tools Windows power users keep installed
One-click scans. No signup required.
Fix: confirm the Chrome version, use the documented automatic-connection requirement, or supply the correct manual debugging URL. Keep the endpoint reachable only from the trusted client.
Pages behave differently from normal Chrome
Cause: headless execution, a fresh profile, missing extensions, different viewport settings, or different cookies and permissions.
Fix: reproduce with a visible browser and the appropriate profile, then compare one variable at a time.
Tools are missing
Cause: slim mode or a tool-category flag disabled them, or the client cached an older server definition.
Recommended Free Tools
Fix: review the installed version’s flags, enable the required category, and restart the MCP client.
npx installs an unexpected release
Cause: @latest intentionally follows the newest package.
Fix: pin a known package version after validating it, and update deliberately rather than during an incident.
Performance, reliability, and cost considerations
The official material describes capabilities and setup, not an independent speed or productivity benchmark. Treat DevTools MCP as an observability and control interface, not as a guarantee that an agent will diagnose every issue correctly.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesFor repeatable results, keep the browser version, profile, viewport, network conditions, and test URL consistent. In CI, use a dedicated profile and deterministic test data. Record whether a run was headed or headless and whether it connected to an existing session; those choices affect page behavior and security.
The npm package and Chrome are separate moving parts. A package update, Chrome update, or changed client configuration can alter available flags or tools. Pin versions for production automation, test upgrades in a staging workflow, and retain a simple smoke test that opens a known page and reads a known value.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When to use a screenshot API instead
Chrome DevTools MCP is designed for an agent that needs an interactive browser and inspection. If your requirement is simply to obtain repeatable image or PDF files from URLs, a screenshot API avoids maintaining browser setup in your application.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request returns PNG, JPEG, WebP, or PDF. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →For a direct call, see the ScreenshotNeo documentation:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe same request in Python:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)And Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Its options include full-page capture with lazy images loaded, CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, PDF paper and margin controls, custom CSS and JavaScript, pre-capture clicks, selector waits, network-idle or delay waits, request and resource blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, an OpenAPI specification, and compatibility with parameter names used by other screenshot APIs.
Every feature is included on every plan: 1,000 shots per month free with no card, then Starter is $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing provides two months free. Create a free ScreenshotNeo account to try it without a card.
Which connection mode should you choose?
| Need | Recommended mode | Main trade-off |
|---|---|---|
| Watch and debug a local page | Visible Chrome with a dedicated profile | Easy observation; requires a display session |
| Run in CI or a container | Headless Chrome | Automation-friendly; environment differences can affect rendering |
| Use an already logged-in test account | Existing session via automatic or manual connection | Convenient state, but browser data and debugging access are sensitive |
| Limit the agent’s surface | Slim configuration or selected tool categories | Lower exposure; some tools are unavailable |
| Produce images or PDFs without interactive debugging | ScreenshotNeo API or MCP server | Focused capture workflow instead of live DevTools control |
Frequently Asked Questions
Does Chrome DevTools MCP replace Chrome DevTools in the browser?
No. It exposes browser and DevTools workflows to an MCP-compatible agent; you can still use Chrome’s regular DevTools interface.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Will adding the MCP server automatically log me into websites?
No. Login state comes from the profile or existing session you deliberately connect. A fresh profile has different cookies and permissions.
Can I use it safely with my personal Chrome profile?
That is not the recommended default. An existing session can expose accounts and browser data, so use a dedicated profile and a trusted agent.
Is there a quantified speed improvement from using the server?
No independent performance or productivity figure is established here. The documented benefit is interactive inspection and debugging access.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
