เครื่องมือสำหรับนักพัฒนาเว็บใน 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.
ขั้นตอนถัดไป
หากต้องการปรับแต่งการตั้งค่า โปรดดูการกำหนดค่า