เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เป็นชุดเครื่องมือที่ช่วยให้คุณใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome กับเวิร์กโฟลว์การเขียนโค้ดด้วย AI ได้ เมื่อติดตั้งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent คุณจะได้รับสิทธิ์เข้าถึงเครื่องมือต่อไปนี้
- เซิร์ฟเวอร์ MCP: เชื่อมต่อ AI Agent กับอินสแตนซ์เบราว์เซอร์ที่ใช้งานอยู่โดยใช้โอเพนซอร์ส Model Context Protocol
- Chrome DevTools CLI: อินเทอร์เฟซสำหรับโต้ตอบกับเบราว์เซอร์โดยตรง จากเทอร์มินัล
- Agentic Skills: คำแนะนำจากผู้เชี่ยวชาญที่สอน Agent ให้ ประสานงานเครื่องมือหลายรายการสำหรับงานที่ซับซ้อน เช่น การช่วยเหลือพิเศษหรือ การแก้ไขข้อบกพร่องด้านประสิทธิภาพ
ในบริบทของการพัฒนาเว็บ เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent จะผสานรวมความสามารถในการแก้ไขข้อบกพร่องเข้ากับ AI Agent
ตัวอย่างเช่น Agent สามารถใช้เครื่องมือเพื่อบันทึกและประเมินการติดตามประสิทธิภาพเพื่อวิเคราะห์ประสิทธิภาพของเว็บไซต์และระบุการปรับปรุงที่อาจเกิดขึ้น นอกจากนี้ เครื่องมือสำหรับนักพัฒนาเว็บสำหรับ Agent ยังช่วยให้ Agent เรียกดูเว็บที่ใช้งานอยู่ได้แทนที่จะดึงข้อมูล HTML แบบคงที่เท่านั้น
ตั้งค่า
คู่มือนี้จะแสดงวิธีตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เพื่อช่วยให้ Agent การเขียนโค้ดควบคุมและตรวจสอบเบราว์เซอร์ Chrome ที่ใช้งานอยู่ได้
ใช้แพ็กเกจ chrome-devtools-mcp เพื่อควบคุมและตรวจสอบเบราว์เซอร์ Chrome ที่ใช้งานอยู่จาก Agent การเขียนโค้ด (เช่น Gemini, Claude, Cursor หรือ Copilot) โปรดทราบว่าแม้ว่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent จะมีชุดเครื่องมือทั้งหมด แต่ CLI จะรองรับเฉพาะชุดย่อยที่กำหนดเป้าหมายสำหรับการทำงานอัตโนมัติตามเชลล์
IDE และโมเดลที่รองรับ
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent รองรับเครื่องมือหรือ IDE ใดก็ตามที่รองรับโปรโตคอล MCP ซึ่งรวมถึง Antigravity, Gemini CLI, Claude Code, Cursor, Copilot และอื่นๆ
ข้อควรพิจารณาด้านความปลอดภัย
เนื่องจาก Agent จะดูและโต้ตอบกับหน้าที่เข้าถึงได้ Agent จึงสามารถดำเนินการในนามของคุณได้อย่างมีประสิทธิภาพหากคุณเชื่อมต่อ Agent กับเบราว์เซอร์ที่มีเซสชันที่ใช้งานอยู่และผ่านการตรวจสอบสิทธิ์แล้ว โปรดหลีกเลี่ยงการแชร์ข้อมูลที่ละเอียดอ่อนหรือข้อมูลส่วนบุคคลที่คุณไม่ต้องการแชร์กับ Agent
ข้อกำหนดเบื้องต้น
ก่อนติดตั้งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent โปรดตรวจสอบว่าสภาพแวดล้อมของคุณมีคุณสมบัติตรงตามข้อกำหนดต่อไปนี้
หากต้องการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ให้เลือกวิธีที่ตรงกับสภาพแวดล้อมการเขียนโค้ดที่คุณต้องการ แม้ว่า Agent บางรายจะต้องติดตั้งด้วยตนเอง แต่ Agent รายอื่นๆ จะมาพร้อมกับเครื่องมือที่ผสานรวมไว้ล่วงหน้า
Antigravity
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent มาพร้อมกับ Antigravity 2.0 ที่รวมไว้ล่วงหน้า คุณสามารถเริ่มใช้งานได้ทันทีด้วย Agent ย่อยของเบราว์เซอร์ ลองใช้คำสั่งเครื่องหมายทับ เช่น
/browser Navigate to the Google homepage
หากต้องการเข้าถึงทักษะเฉพาะของ Agent เราขอแนะนำให้ติดตั้งปลั๊กอินเครื่องมือสำหรับนักพัฒนาเว็บในขั้นตอนสร้างด้วย Google ของการตั้งค่าเริ่มต้นหรือในการตั้งค่าแอปพลิเคชัน ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบ Agent ย่อยของเบราว์เซอร์ Antigravity
ติดตั้งโดยใช้ CLI
หากต้องการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent คุณสามารถใช้ไฟล์การกำหนดค่า JSON หรือคำสั่ง CLI เพื่อติดตั้งเซิร์ฟเวอร์โดยตรงได้หาก Agent ของคุณรองรับ นอกจากนี้ Agent บางรายยังมีส่วนขยายหรือปลั๊กอินอย่างเป็นทางการซึ่งรวมถึงทักษะของ Agent ซึ่งเป็นคำแนะนำจากผู้เชี่ยวชาญที่จะช่วยให้ Agent ใช้ฟีเจอร์เครื่องมือสำหรับนักพัฒนาเว็บได้
หาก Agent ของคุณไม่อยู่ในรายการนี้ คุณสามารถดูวิธีติดตั้งได้ในที่เก็บ Chrome DevTools สำหรับ Agent GitHub
หากต้องการเพิ่มเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ลงใน Agent บรรทัดคำสั่ง ให้ใช้คำสั่ง CLI ในตัวสำหรับ Agent ของคุณโดยเฉพาะ
Gemini CLI
ติดตั้งส่วนขยาย Gemini CLI ซึ่งรวมถึงแพ็กเกจ MCP และทักษะที่เกี่ยวข้องโดยใช้คำสั่งต่อไปนี้
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
ติดตั้งเฉพาะแพ็กเกจ MCP ด้วยคำสั่งต่อไปนี้
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
หากต้องการติดตั้งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เป็นปลั๊กอิน Claude Code ให้ใช้คำสั่ง Slash ต่อไปนี้ใน Claude Code เพิ่มรีจิสทรี Marketplace
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
และติดตั้งปลั๊กอินจากรีจิสทรี Marketplace
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
ดูข้อมูลเพิ่มเติมได้ที่หน้าปลั๊กอินเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome อย่างเป็นทางการของ Claude
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
ติดตั้งโดยใช้การกำหนดค่า JSON
สำหรับ Agent อื่นๆ ที่รองรับคีย์การกำหนดค่า mcpServers ให้เพิ่มรายการนี้ด้วยตนเอง
และตรวจสอบว่าได้ติดตั้งเครื่องมือสำหรับนักพัฒนาเว็บสำหรับ Agent ผ่าน npm i
chrome-devtools-mcp แล้ว
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
ติดตั้งใน Agent อื่นๆ
หากต้องการกำหนดค่าสำหรับ Agent ที่ไม่อยู่ในรายการ ให้ดูที่ ที่เก็บ GitHub ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome MCP
ทดสอบการตั้งค่า
ป้อนข้อความแจ้งต่อไปนี้ใน Agent เพื่อตรวจสอบว่าทุกอย่างทำงานได้ตามปกติ
Check the performance of https://developers.chrome.com
Agent ควรเปิดหน้าต่างเบราว์เซอร์และบันทึกการติดตามประสิทธิภาพ
แก้ปัญหาการตั้งค่า
หาก Agent ไม่สามารถเรียกใช้เครื่องมือและมีสิทธิ์เข้าถึงทักษะเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome Agent อาจพยายามแก้ไขปัญหาโดยอัตโนมัติ หากไม่เป็นเช่นนั้น คุณสามารถแจ้งให้ Agent ทราบอย่างชัดเจนได้ดังนี้
Use the Chrome DevTools troubleshooting skill to fix my setup.
หรือคุณจะระบุรายละเอียดเพิ่มเติมได้ดังนี้
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
ขั้นตอนถัดไป
หากต้องการปรับแต่งการตั้งค่า โปรดดู การกำหนดค่า