Using Chrome DevTools MCP More Effectively: Preparation with Remote Debugging Mode

Introduction

When using Chrome DevTools MCP, it is convenient to start Chrome in remote debugging mode.

Since you can log in in advance or open specific pages beforehand, you can quickly give instructions like "Look at the logs for this tab!"

Starting Chrome in Remote Debugging Mode

On Mac, you can start Chrome like this:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/puppeteer-user1

--remote-debugging-port=9222 opens port 9222, and --user-data-dir creates a dedicated profile. This is useful because it allows you to keep it separate from the Chrome instance you use for daily tasks.

Chrome DevTools MCP Configuration

Add the following to your MCP server configuration file:

"chrome-devtools": {
  "command": "npx",
  "args": [
    "chrome-devtools-mcp@latest",
    "--browserUrl=http://localhost:9222"
  ]
}

With this, it will connect to http://localhost:9222.

Why is it useful?

You can log in in advance

By logging into the necessary services in the launched Chrome instance, you can eliminate the need to authenticate every time.

You can keep pages open

By keeping the development target page open, you can quickly access it by giving instructions like "Look at the logs for this tab."

Can be combined with manual operations

You can manually operate to reach a specific state and then perform checks like "What happens if I press this button in the current state?"

Summary

Starting Chrome in remote debugging mode significantly improves the development experience with just a little preparation, so it is highly recommended.