รีวิว Chrome DevTools MCP — ให้ AI agent คุมและ debug Chrome ตัวจริง

คืออะไร

โปรเจกต์นี้เป็น MCP (Model Context Protocol) server จากทีม Chrome DevTools ที่อยู่ระหว่าง coding agent กับเบราว์เซอร์ Chrome ตัวจริง ทำให้ agent เปิดหน้าเว็บ วิเคราะห์ performance, ดู console, network requests และ capture screenshot ได้ในตัว

นอกจากใช้เป็น MCP server แล้ว ยังมี CLI ให้ใช้โดยไม่ผ่าน MCP ด้วย

จุดเด่น

• Performance insights: ใช้ Chrome DevTools บันทึก performance trace แล้วดึงข้อมูลเชิงลึกออกมาให้
• Debugging ขั้นสูง: วิเคราะห์ network requests, ถ่าย screenshot และอ่าน browser console พร้อม source-mapped stack traces
• Automation ที่เชื่อถือได้: ใช้ puppeteer ขับเคลื่อน Chrome และรอผลลัพธ์ของแต่ละ action ให้อัตโนมัติ
• ทางเลือกแบบ slim: ถ้าทำแค่งานเบราว์เซอร์พื้นฐาน ใช้ flag --slim ลดชุดเครื่องมือให้เหลือเฉพาะที่จำเป็น
• รองรับการใช้งานขั้นสูง: คู่มือ Advanced Usage ครอบคลุม concurrent sessions, persistent user data directory, การเชื่อมกับ Chrome ที่เปิดอยู่แล้ว และการ debug บน Android
• มีเอกสารครบ: Tool Reference, Configuration Guide, Troubleshooting, Design Principles และ Changelog แยกเป็นหน้าชัดเจน

ตัวเลข ณ 5 ต.ค. 2026: ⭐ 52,960, fork 5,602, เขียนด้วย TypeScript, open issue 105 รายการ, ยังไม่ถูก archive

เหมาะกับใคร

• คนที่ใช้ coding agent อย่าง Claude, Cursor, Copilot หรือ Antigravity และอยากให้ agent ช่วย debug เว็บจริง ไม่ใช่เดา
• สาย frontend / web performance ที่อยากให้ agent ช่วยวิเคราะห์หน้าเว็บ เช่น trace, console, network
• ผู้ที่ทำเครื่องมือ agentic และอยากต่อยอด browser subagent ในผลิตภัณฑ์ของตัวเอง (มีตัวอย่างอ้างอิงคือ browser agent ของ Gemini CLI)
• คนที่มี Node.js LTS, npm และ Google Chrome เวอร์ชัน stable ล่าสุดพร้อมแล้ว

เริ่มต้นใช้งาน

เพิ่ม config นี้ใน MCP client ของคุณ:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

การใช้ chrome-devtools-mcp@latest ทำให้ MCP client ได้ server เวอร์ชันล่าสุดเสมอ

ถ้าต้องการเฉพาะงานเบราว์เซอร์พื้นฐาน ใช้โหมด slim:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

ลองพิมพ์ prompt นี้ใน MCP client เพื่อเช็คว่าทุกอย่างเดิน:

Check the performance of https://developers.chrome.com

client ควรเปิดเบราว์เซอร์และบันทึก performance trace ให้อัตโนมัติ

ข้อควรรู้

• สิทธิ์และความเป็นส่วนตัว: server นี้เปิดเผย content ของเบราว์เซอร์ให้ MCP client ทั้ง inspect, debug และ modify ได้ ตัว README เตือนชัดว่าอย่าแชร์ข้อมูลอ่อนไหวหรือข้อมูลส่วนตัวที่ไม่อยากเปิด
• รองรับเฉพาะ Chrome: รองรับอย่างเป็นทางการแค่ Google Chrome และ Chrome for Testing เบราว์เซอร์ Chromium อื่นอาจใช้ได้แต่ไม่รับประกัน และทีมงานตั้งใจซัพพอร์ต Extended Stable Chrome รุ่นล่าสุด
• ส่งข้อมูลไปที่ Google: มีการเก็บ usage statistics เปิดไว้เป็นค่าเริ่มต้น และเครื่องมือ performance อาจส่ง trace URL ไปที่ Google CrUX API เพื่อดึงข้อมูลประสบการณ์ผู้ใช้จริง ปิดด้วย --no-usage-statistics และ --no-performance-crux ได้ (การเก็บ usage statistics จะปิดเองถ้าตั้ง env CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS หรือ CI)
• อัปเดตอัตโนมัติ: server จะเช็ค npm registry เป็นระยะและ log แจ้งเมื่อมีเวอร์ชันใหม่ ปิดได้ด้วย env CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS
• เบราว์เซอร์ไม่เปิดทันที: server จะ start เบราว์เซอร์เมื่อ client เรียกใช้ tool ที่ต้องใช้เบราว์เซอร์เท่านั้น การ connect อย่างเดียวจะไม่เปิดเบราว์เซอร์
• License: Apache License 2.0 — ใช้และดัดแปลงตามเงื่อนไขของ license ได้
• ความสดใหม่: สร้าง repo เมื่อ 11 ก.ย. 2025 push ล่าสุด 4 ต.ค. 2026 (ข้อมูล ณ 5 ต.ค. 2026) อายุราว 1 ปี และยังไม่ถูก archive ถ้าใช้ @latest ควรตาม CHANGELOG ด้วย

🔗 https://github.com/ChromeDevTools/chrome-devtools-mcp

ข้อมูลจาก GitHub ณ 5 ต.ค. 2026: ⭐ 52,960 | ภาษา TypeScript | license Apache-2.0