A browser's console can reveal JavaScript behavior that source files alone cannot show. The Chrome DevTools MCP server connects Codex CLI to a separate Chrome instance on macOS or Linux so a coding session can inspect console messages, network requests, and performance traces.

The server launches locally through npm and communicates with Codex over stdio. An isolated browser profile keeps the inspected page separate from everyday browsing sessions, although page content and diagnostic results are still visible to the model.

A signed-in Codex CLI, Node.js LTS with npm, and current Google Chrome or Chrome for Testing must already be available. The browser starts when Codex first calls a tool that needs it, so a saved server entry alone does not confirm a working connection.

Related: How to get Codex MCP server details
Related: How to list Codex MCP servers
Related: How to add the Playwright MCP server to Codex
Related: How to remove a Codex MCP server

Steps to add Chrome DevTools MCP server to Codex:

  1. Register the Chrome DevTools MCP launcher with a temporary browser profile.

    The server runs third-party code and can inspect or modify content in its browser. Sensitive page content can reach Codex through tool results; page text and tool results remain untrusted input. 

    $ codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest \
  --headless --isolated --no-usage-statistics --no-performance-crux
Added global MCP server 'chrome-devtools'.

    -y accepts the npx package prompt, and @latest selects the current upstream package. Headless mode needs no browser window. The isolated profile is discarded when the browser closes. The two privacy flags disable server usage statistics and CrUX lookups of trace URLs; they do not prevent Codex from receiving tool results.

  2. Check the saved chrome-devtools launcher. 
    $ codex mcp get chrome-devtools
chrome-devtools
  enabled: true
  transport: stdio
  command: npx
  args: -y chrome-devtools-mcp@latest --headless --isolated --no-usage-statistics --no-performance-crux
  cwd: -
  env: -
  remove: codex mcp remove chrome-devtools

    The entry is saved in the user-level Codex configuration. An enabled entry records a launcher, rather than confirming that Chrome has started.

  3. Start a new Codex CLI session in your project. 
    $ codex

    A fresh session loads the saved server entry. An already-open session needs to be restarted to load the change.

  4. Wait for the Chrome DevTools MCP server to connect.

    A first connection can take longer while npx downloads the package. A startup error must be resolved before the browser tools are available.

  5. Ask Codex to inspect the public sample page through Chrome DevTools MCP. 
    Use chrome-devtools to open https://example.com in a new page, take a snapshot, and report the page title and its link URL.

    npx may download the package on first use. Any permission request should correspond to the server and public page you requested.

  6. Allow the chrome-devtools.new_page request for https://example.com when prompted.

    This approval applies to a single tool call.

  7. Allow the chrome-devtools.take_snapshot request when prompted.
  8. Confirm that both browser calls completed with the expected page details. 
    https://iana.org/help/example-domains

    The browser tool results should show Example Domain as the page title and this URL as the Learn more link target. A reply based only on general knowledge, a saved launcher, or a browser-start error does not establish that Codex inspected the page.

Share this guide