มอบความสามารถของเครื่องมือสำหรับนักพัฒนาเว็บให้กับ Agent การเขียนโค้ดผ่านเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บ หรือ CLI และทักษะเฉพาะทาง

ดูข้อมูลเพิ่มเติมใน GitHub
เครื่องมือสำหรับนักพัฒนาเว็บ Chrome ทำงานร่วมกับ Agent ทุกตัวที่รองรับเซิร์ฟเวอร์ MCP ได้แก่ Gemini CLI, Antigravity, Claude Code, Codex และอื่นๆ ใช้เซิร์ฟเวอร์ MCP เพื่อแจ้งให้ Agent ทราบเกี่ยวกับความสามารถของ DevTools ในทุกเซสชัน
คุณสามารถใช้ Chrome DevTools CLI เป็นทางเลือกแทนเซิร์ฟเวอร์ MCP ที่มีประสิทธิภาพด้านโทเค็นมากกว่า แพ็กเกจเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีทักษะเฉพาะที่จะสอนเอเจนต์การเขียนโค้ดให้เขียนสคริปต์โดยใช้เครื่องมือที่มีประสิทธิภาพเช่นเดียวกับเซิร์ฟเวอร์ MCP

ติดตั้งทันที

ทั้งเซิร์ฟเวอร์ MCP และ CLI เป็นส่วนหนึ่งของแพ็กเกจเดียวกัน รับส่วนลดสำหรับเอเจนต์การเขียนโค้ดที่คุณเลือก ดูวิธีการสำหรับเอเจนต์ยอดนิยมได้ที่ด้านล่าง และดูวิธีการสำหรับเอเจนต์กว่า 20 รายการได้ใน GitHub

  # Either MCP only:
  gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
  # Or as a Gemini extension (MCP+Skills):
  gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
 
  # Either MCP only:
  claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
  # Or as a plugin (MCP+Skills):
  /plugin marketplace add ChromeDevTools/chrome-devtools-mcp
  /plugin install chrome-devtools-mcp
 
  codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

เมื่อติดตั้งเซิร์ฟเวอร์หรือ CLI ของ MCP สำหรับ DevTools แล้ว ให้ลองใช้พรอมต์ 2-3 รายการเพื่อเริ่มต้นใช้งาน ขอรับการตรวจสอบ Lighthouse, กรอกแบบฟอร์ม หรือขอภาพหน้าจอจากตัวแทน หากต้องการดูความสามารถทั้งหมดนี้ในการทำงาน ให้ลองใช้พรอมต์ต่อไปนี้

  Visit developer.chrome.com and run a search for "devtools",
  while recording a performance trace.
  Let me know how I can improve the website's performance.

พรอมต์นี้ใช้เครื่องมือเพื่อสร้างหน้าใหม่ โต้ตอบกับแถบค้นหา และเรียกใช้การติดตามประสิทธิภาพ รวมถึงข้อมูล CrUX


ดูเครื่องมือทั้งหมดที่พร้อมใช้งาน