Codex: add Chrome DevTools MCP via config.toml

What this does

Codex looks for Model Context Protocol servers in ~/.codex/config.toml. Adding the Chrome DevTools block lets Codex launch a dedicated Chrome instance with the correct debugging flags whenever a DevTools task runs.

Steps

Ensure ~/.codex/config.toml exists (create the directory/file if needed).
Append the Chrome DevTools MCP block shown above.
Restart Codex so the new server definition is loaded.

Verification

After Codex restarts, ask it to run a browser task such as:

Check the LCP of https://web.dev

Codex should spawn a Chrome window controlled through MCP and return a response. You can also target a local project:

Open http://localhost:3000 and report console errors

Variations

To add more MCP servers, repeat the pattern with another [mcp_servers."name"] block.
If the Chrome window fails to launch automatically, manually start Chrome with --remote-debugging-port=9222 and rerun the command.

Safety Notes

Non-destructive: only edits your Codex configuration file.
Expect a separate Chrome profile window when the MCP server starts.

Related Commands

Other useful commands you might find helpful

Homebrew: fix codex stuck on old version (formula overrides cask)

Removes the outdated codex Homebrew formula (0.46.x) so the newly installed cask (0.47.x) becomes the active binary.

brew uninstall codex --formula

Temporarily Override DNS for a Domain (macOS)

Force your Mac to resolve a domain to a specific IP by modifying the /etc/hosts file

sudo nano /etc/hosts

ripgrep: search TypeScript files excluding common dirs

Search recursively for <Button in TS/TSX files while excluding node_modules, src/components/contact, and src/components/ui.

rg "<Button" -g "*.ts*" -g '!*./node_modules/**' -g '!src/components/contact/**' -g '!src/components/ui/**'

Payload CMS

Get in Touch