From 5e13a3d5d16511c34c5000968f6ed6fc6eedc253 Mon Sep 17 00:00:00 2001 From: George Liu Date: Sat, 4 Oct 2025 09:00:36 +1000 Subject: [PATCH] add Chrome Devtools MCP server dynamically loaded only when needed --- .claude/mcp/chrome-devtools.json | 11 ++++++ .claude/settings.local.json | 17 ++++++++- README.md | 59 ++++++++++++++++++++++++++++++++ 3 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 .claude/mcp/chrome-devtools.json diff --git a/.claude/mcp/chrome-devtools.json b/.claude/mcp/chrome-devtools.json new file mode 100644 index 0000000..0bd49a8 --- /dev/null +++ b/.claude/mcp/chrome-devtools.json @@ -0,0 +1,11 @@ +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest" + ] + } + } +} \ No newline at end of file diff --git a/.claude/settings.local.json b/.claude/settings.local.json index eebdc5f..e31f9d5 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -62,7 +62,22 @@ "WebFetch(domain:github.com)", "WebFetch(domain:openrouter.ai)", "WebFetch(domain:www.comet.com)", - "Bash(mkdir:*)" + "Bash(mkdir:*)", + "mcp__chrome-devtools__list_pages", + "mcp__chrome-devtools__navigate_page", + "mcp__chrome-devtools__take_snapshot", + "mcp__chrome-devtools__take_screenshot", + "mcp__chrome-devtools__list_console_messages", + "mcp__chrome-devtools__list_network_requests", + "mcp__chrome-devtools__click", + "mcp__chrome-devtools__fill_form", + "mcp__chrome-devtools__hover", + "mcp__chrome-devtools__emulate_cpu", + "mcp__chrome-devtools__emulate_network", + "mcp__chrome-devtools__evaluate_script", + "mcp__chrome-devtools__resize_page", + "mcp__chrome-devtools__fill", + "mcp__chrome-devtools__navigate_page_history", ], "deny": [] } diff --git a/README.md b/README.md index b5d902f..19aeb14 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ I also install the following MCP servers ([install commands](#claude-code-mcp-se * [Gemini CLI MCP](https://github.com/centminmod/gemini-cli-mcp-server) * [Cloudflare Documentation MCP](https://github.com/cloudflare/mcp-server-cloudflare/tree/main/apps/docs-vectorize) * [Context 7 MCP](https://github.com/upstash/context7) +* [Chrome Devtools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) * [Notion MCP](https://github.com/makenotion/notion-mcp-server) ## Claude Code Hooks @@ -388,6 +389,64 @@ claude mcp add --transport sse context7 https://mcp.context7.com/sse -s user claude mcp add-json notionApi '{"type":"stdio","command":"npx","args":["-y","@notionhq/notion-mcp-server"],"env":{"OPENAPI_MCP_HEADERS":"{\"Authorization\": \"Bearer ntn_API_KEY\", \"Notion-Version\": \"2022-06-28\"}"}}' -s user ``` +### Chrome Devtools MCP sever + +[Chrome Devtools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) + +This MCP server can take up to 17K of Claude's context window so I only install it when project needs it via `--mcp-config` parameter when running Claude client: + +```bash +claude --mcp-config .claude/mcp/chrome-devtools.json +``` + +Where `.claude/mcp/chrome-devtools.json` + +```json +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest" + ] + } + } +} +``` + +Chrome Devtool MCP server takes up ~16,977 tokens across 26 MCP tools + +```bash + mcp__chrome-devtools__list_console_messages (chrome-devtools): 584 tokens + mcp__chrome-devtools__emulate_cpu (chrome-devtools): 651 tokens + mcp__chrome-devtools__emulate_network (chrome-devtools): 694 tokens + mcp__chrome-devtools__click (chrome-devtools): 636 tokens + mcp__chrome-devtools__drag (chrome-devtools): 638 tokens + mcp__chrome-devtools__fill (chrome-devtools): 644 tokens + mcp__chrome-devtools__fill_form (chrome-devtools): 676 tokens + mcp__chrome-devtools__hover (chrome-devtools): 609 tokens + mcp__chrome-devtools__upload_file (chrome-devtools): 651 tokens + mcp__chrome-devtools__get_network_request (chrome-devtools): 618 tokens + mcp__chrome-devtools__list_network_requests (chrome-devtools): 783 tokens + mcp__chrome-devtools__close_page (chrome-devtools): 624 tokens + mcp__chrome-devtools__handle_dialog (chrome-devtools): 645 tokens + mcp__chrome-devtools__list_pages (chrome-devtools): 582 tokens + mcp__chrome-devtools__navigate_page (chrome-devtools): 642 tokens + mcp__chrome-devtools__navigate_page_history (chrome-devtools): 656 tokens + mcp__chrome-devtools__new_page (chrome-devtools): 637 tokens + mcp__chrome-devtools__resize_page (chrome-devtools): 629 tokens + mcp__chrome-devtools__select_page (chrome-devtools): 619 tokens + mcp__chrome-devtools__performance_analyze_insight (chrome-devtools): 649 tokens + mcp__chrome-devtools__performance_start_trace (chrome-devtools): 689 tokens + mcp__chrome-devtools__performance_stop_trace (chrome-devtools): 586 tokens + mcp__chrome-devtools__take_screenshot (chrome-devtools): 803 tokens + mcp__chrome-devtools__evaluate_script (chrome-devtools): 775 tokens + mcp__chrome-devtools__take_snapshot (chrome-devtools): 614 tokens + mcp__chrome-devtools__wait_for (chrome-devtools): 643 tokens +``` + ## Star History [![Star History Chart](https://api.star-history.com/svg?repos=centminmod/my-claude-code-setup&type=Date)](https://www.star-history.com/#centminmod/my-claude-code-setup&Date) +