เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เป็นชุดเครื่องมือที่นำความสามารถของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มาสู่เวิร์กโฟลว์การเขียนโค้ด AI ของคุณ การติดตั้งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent จะช่วยให้คุณเข้าถึงสิ่งต่อไปนี้ได้
- เซิร์ฟเวอ��์ MCP: เชื่อมต่อ AI Agent กับอินสแตนซ์เบราว์เซอร์ที่ใช้งานอยู่โดยใช้Model Context Protocol แบบโอเพนซอร์ส
- Chrome DevTools CLI: อินเทอ��์เฟซสำหรับโต้ตอบกับเบราว์เซอร์โดยตรง จากเทอร์มินัล
- ทักษะของ Agent: คำสั่งจากผู้เชี่ยวชาญที่สอน Agent ของคุณเกี่ยวกับวิธี ประสานงานเครื่องมือหลายอย่างสำหรับงานที่ซับซ้อน เช่น การแก้ไขข้อบกพร่องด้านการช่วยเหลือพิเศษหรือ ประสิทธิภาพ
ในบริบทของการพัฒนาเว็บ เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent จะผสานรวม ความสามารถในการแก้ไขข้อบกพร่องเข้ากับ AI 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 และอื่นๆ
ข้อควรพิจารณาด้านความปลอดภัย
เนื่องจากตัวแทนจะดูและโต้ตอบกับหน้าเว็บที่เข้าถึงได้ จึงดำเนินการในนามของคุณได้อย่างมีประสิทธิภาพหากคุณเชื่อมต่อกับเบราว์เซอร์ที่มีเซสชันที่ใช้งานอยู่และได้รับการตรวจสอบสิทธิ์ โปรดหลีกเลี่ยงการแชร์ข้อมูลที่มีความละเอียดอ่อนหรือข้อมูลส่วนบุคคล ที่คุณไม่ต้องการแชร์กับตัวแทน
ข้อกำหนดเบื้องต้น
ก่อนติดตั้งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent โปรดตรวจสอบว่าสภาพแวดล้อมเป็นไปตามข้อกำหนดต่อไปนี้
หากต้องการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ให้เลือกวิธีการที่ตรงกับสภาพแวดล้อมการเขียนโค้ดที่คุณต้องการ แม้ว่าเอเจนต์บางรายจะต้องติดตั้งด้วยตนเอง แต่เอเจนต์รายอื่นๆ จะมาพร้อมกับเครื่องมือที่ผสานรวมไว้ล่วงหน้า
Antigravity
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent มาพร้อมกับ Antigravity 2.0 คุณสามารถเริ่มใช้งานได้ทันทีด้วยAgent ย่อยของเบราว์เซอร์ ลองใช้คำสั่งเครื่องหมายทับ เช่น
/browser Navigate to the Google homepage
หากต้องการเข้าถึงทักษะของเอเจนต์เฉพาะทาง เราขอแนะนำให้ติดตั้งปลั๊กอิน DevTools ในขั้นตอนสร้างด้วย Google ของการตั้งค่าเริ่มต้นหรือในการตั้งค่าแอปพลิ��คชัน ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบของ Antigravity Browser Subagent
ติดตั้งโดยใช้ CLI
หากต้องการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent คุณสามารถใช้ไฟล์การกำหนดค่า JSON หรือคำสั่ง CLI เพื่อติดตั้งเซิร์ฟเวอร์โดยตรงได้หาก Agent รองรับ นอกจากนี้ เอเจนต์บางรายยังมีส่วนขยายหรือปลั๊กอินอย่างเป็นทางการซึ่งรวมถึงทักษะของเอเจนต์ คำแนะนำจากผู้เชี่ยวชาญที่จะช่วยให้เอเจนต์ใช้ฟีเจอร์ DevTools ได้
หากไม่พบเอเจนต์ของคุณที่นี่ คุณสามารถดูวิธีติดตั้งได้ในที่เก็บ GitHub ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์
หากต้องการเพิ่มเครื่องมือสำหรับนักพัฒนาเว็บใน 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 ให้ใช้คำสั่งเครื่องหมายทับต่อไปนี้ในโค้ดของ Claude เพิ่มรีจิสทรีของมาร์เก็ตเพลส
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
และติดตั้งปลั๊กอินจากรีจิสทรีของมาร์เก็ตเพลสดังนี้
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
ดูข้อมูลเพิ่มเติมได้ที่หน้าปลั๊กอิน Claude สำหรับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome อย่างเป็นทางการ
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
ติดตั้งโดยใช้การกำหนดค่า JSON
สำหรับ Agent อื่นๆ ที่รองรับคีย์การกำหนดค่า mcpServers ให้เพิ่มรายการนี้ด้วยตนเอง
และตรวจสอบว่าได้ติดตั้ง DevTools สำหรับ Agent ผ่าน npm i
chrome-devtools-mcp แล้ว
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
ติดตั้งใน Agent อื่นๆ
หากต้องการกำหนดค่าสำหรับตัวแทนที่ไม่ไ���้อยู่ในรายการ โปรดดูที่ ที่เก็บ Chrome DevTools MCP GitHub
ทดสอบการตั้งค่า
ป้อนพรอมต์ต่อไปนี้ในเอเจนต์เพื่อตรวจสอบว่าทุกอย่างทำงานได้หรือไม่
Check the performance of https://developers.chrome.com
ตัวแทนของคุณควรเปิดหน้าต่างเบราว์เซอร์และบันทึกการติดตามประสิทธิภาพ
แก้ปัญหาการตั้งค่า
หากเอเจนต์เรียกใช้เครื่องมือไม่สำเร็จและมีสิทธิ์เข้าถึงทักษะเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เอเจนต์ อาจพยายามแก้ไขปัญหาโดยอัตโนมัติ หากไม่เป็นเช่นนั้น คุณสามารถ แจ้งเอเจนต์อย่างชัดเจนได้ดังนี้
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.
ขั้นตอนถัดไป
หากต้องการปรับแต่งการตั้งค่า โปรดดูการกำหนดค่า