Chrome DevTools MCP

Chrome DevTools สำหรับเอเจนต์

Chrome DevTools สำหรับเอเจนต์ (chrome-devtools-mcp) ช่วยให้เอเจนต์เขียนโค้ดของคุณ (เช่น Antigravity, Claude, Cursor หรือ Copilot) สามารถควบคุมและตรวจสอบเบราว์เซอร์ Chrome ที่ทำงานอยู่ได้ โดยทำหน้าที่เป็นเซิร์ฟเวอร์ Model-Context-Protocol (MCP) ซึ่งช่วยให้ผู้ช่วยเขียนโค้ด AI ของคุณเข้าถึงความสามารถเต็มรูปแบบของ Chrome DevTools เพื่อการทำงานอัตโนมัติที่เชื่อถือได้ การดีบักเชิงลึก และการวิเคราะห์ประสิทธิภาพ นอกจากนี้ยังมี CLI สำหรับการใช้งานโดยไม่ต้องใช้ MCP อีกด้วย

เอกสารอ้างอิงเครื่องมือ | บันทึกการเปลี่ยนแปลง | การมีส่วนร่วม | การแก้ไขปัญหา | หลักการออกแบบ

คุณสมบัติหลัก

• รับข้อมูลเชิงลึกด้านประสิทธิภาพ: ใช้ Chrome DevTools เพื่อบันทึก เทรซและดึงข้อมูลเชิงลึกด้านประสิทธิภาพที่นำไปปฏิบัติได้
• การดีบักเบราว์เซอร์ขั้นสูง: วิเคราะห์คำขอเครือข่าย ถ่ายภาพหน้าจอ และ ตรวจสอบข้อความคอนโซลของเบราว์เซอร์ (พร้อมกับ source-mapped stack traces)
• การทำงานอัตโนมัติที่เชื่อถือได้: ใช้ puppeteer เพื่อทำงานอัตโนมัติใน Chrome และรอผลลัพธ์ของการทำงานโดยอัตโนมัติ

ข้อจำกัดความรับผิดชอบ

chrome-devtools-mcp เปิดเผยเนื้อหาของอินสแตนซ์เบราว์เซอร์ให้กับ MCP clients ซึ่งช่วยให้พวกเขาสามารถตรวจสอบ ดีบัก และแก้ไขข้อมูลใดๆ ในเบราว์เซอร์หรือ DevTools ได้ หลีกเลี่ยงการแชร์ข้อมูลที่ละเอียดอ่อนหรือข้อมูลส่วนบุคคลที่คุณไม่ต้องการแชร์กับ MCP clients

chrome-devtools-mcp รองรับ Google Chrome และ Chrome for Testing อย่างเป็นทางการเท่านั้น เบราว์เซอร์ที่ใช้ Chromium อื่นๆ อาจทำงานได้ แต่ไม่มีการรับประกัน และคุณอาจพบพฤติกรรมที่ไม่คาดคิดได้ โปรดใช้วิจารณญาณของคุณเอง เรามุ่งมั่นที่จะให้การแก้ไขและการสนับสนุนสำหรับเวอร์ชันล่าสุดของ Extended Stable Chrome

เครื่องมือด้านประสิทธิภาพอาจส่ง trace URLs ไปยัง Google CrUX API เพื่อดึงข้อมูล ประสบการณ์ผู้ใช้จริง ซึ่งช่วยให้เห็นภาพประสิทธิภาพแบบองค์รวมโดย นำเสนอข้อมูลภาคสนามควบคู่กับข้อมูลจากห้องปฏิบัติการ ข้อมูลนี้ถูกรวบรวมโดย Chrome User Experience Report (CrUX) หากต้องการปิดการใช้งาน ให้รันด้วยแฟล็ก --no-performance-crux

สถิติการใช้งาน

Google รวบรวมสถิติการใช้งาน (เช่น อัตราความสำเร็จของการเรียกใช้เครื่องมือ เวลาแฝง และข้อมูลสภาพแวดล้อม) เพื่อปรับปรุงความน่าเชื่อถือและประสิทธิภาพของ Chrome DevTools MCP

การรวบรวมข้อมูล เปิดใช้งานตามค่าเริ่มต้น คุณสามารถเลือกไม่ใช้ได้โดยส่งแฟล็ก --no-usage-statistics เมื่อเริ่มเซิร์ฟเวอร์:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google จัดการข้อมูลนี้ตาม นโยบายความเป็นส่วนตัวของ Google

การรวบรวมสถิติการใช้งานของ Google สำหรับ Chrome DevTools MCP เป็นอิสระจากสถิติการใช้งานของเบราว์เซอร์ Chrome การเลือกไม่ใช้ Chrome metrics ไม่ได้หมายความว่าคุณเลือกไม่ใช้เครื่องมือนี้โดยอัตโนมัติ และในทางกลับกัน

การรวบรวมจะถูกปิดใช้งานหากตั้งค่าตัวแปรสภาพแวดล้อม CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS หรือ CI

การตรวจสอบอัปเดต

ตามค่าเริ่มต้น เซิร์ฟเวอร์จะตรวจสอบ npm registry เป็นระยะเพื่อหาอัปเดตและบันทึกการแจ้งเตือนเมื่อมีเวอร์ชันใหม่กว่า คุณสามารถปิดการตรวจสอบอัปเดตเหล่านี้ได้โดยตั้งค่าตัวแปรสภาพแวดล้อม CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS

ข้อกำหนด

• Node.js เวอร์ชัน LTS
• Chrome เวอร์ชันเสถียรปัจจุบันหรือใหม่กว่า
• npm

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

เพิ่มการกำหนดค่าต่อไปนี้ลงใน MCP client ของคุณ:

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

[!NOTE] การใช้ chrome-devtools-mcp@latest ช่วยให้มั่นใจได้ว่า MCP client ของคุณจะใช้เวอร์ชันล่าสุดของ Chrome DevTools MCP server เสมอ

หากคุณสนใจที่จะทำงานเบราว์เซอร์พื้นฐานเท่านั้น ให้ใช้โหมด --slim:

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

ดู เอกสารอ้างอิงเครื่องมือแบบสลิม

การกำหนดค่า MCP Client

สำหรับคำแนะนำการตั้งค่าที่เฉพาะเจาะจงกับโปรแกรมแก้ไขหรือเอเจนต์ของคุณ (เช่น Antigravity, Claude Code, Cursor, VS Code) โปรดดู คู่มือการกำหนดค่าไคลเอนต์ ของเรา

พรอมต์แรกของคุณ

ป้อนพรอมต์ต่อไปนี้ใน MCP Client ของคุณเพื่อตรวจสอบว่าทุกอย่างทำงานถูกต้อง:

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

MCP client ของคุณควรเปิดเบราว์เซอร์และบันทึกเทรซประสิทธิภาพ

[!NOTE] MCP server จะเริ่มเบราว์เซอร์โดยอัตโนมัติเมื่อ MCP client ใช้เครื่องมือที่ต้องมีอินสแตนซ์เบราว์เซอร์ที่ทำงานอยู่ การเชื่อมต่อกับ Chrome DevTools MCP server เพียงอย่างเดียวจะไม่เริ่มเบราว์เซอร์โดยอัตโนมัติ

เครื่องมือ

หากคุณพบปัญหาใดๆ โปรดดู คู่มือการแก้ไขปัญหา ของเรา ดู เอกสารอ้างอิงเครื่องมือ ฉบับเต็มสำหรับรายการความสามารถ MCP ที่รองรับทั้งหมด

การกำหนดค่า

ค้นหารายการพารามิเตอร์เซิร์ฟเวอร์ทั้งหมด (เช่น --headless, --isolated, --slim) และวิธีกำหนดค่าการเชื่อมต่อ WebSocket ได้ใน คู่มือการกำหนดค่า

การใช้งานขั้นสูง

สำหรับคุณสมบัติขั้นสูง เช่น การจัดการเซสชันพร้อมกัน ไดเรกทอรีข้อมูลผู้ใช้แบบถาวร การเชื่อมต่อกับอินสแตนซ์ Chrome ที่ทำงานอยู่แทนการเริ่มใหม่ หรือการดีบักบน Android โปรดดู คู่มือการใช้งานขั้นสูง ของเรา

การผสานรวมเป็นเบราว์เซอร์ซับเอเจนต์

หากคุณกำลังพัฒนาเครื่องมือสำหรับเอเจนต์และต้องการให้เบราว์เซอร์ซับเอเจนต์แบบผสานรวมเป็นส่วนหนึ่งของผลิตภัณฑ์ของคุณ เราขอแนะนำให้สร้างบน Chrome DevTools สำหรับเอเจนต์

สำหรับการใช้งานอ้างอิง โปรดดู เอกสารประกอบเบราว์เซอร์เอเจนต์ Gemini CLI