ช่วยเอเจนต์สร้าง แก้ไขข้อบกพร่อง และยืนยันโค้ดอย่างถูกต้อง เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ AI Agent ช่วยให้ AI Agent สามารถโต้ตอบกับเบราว์เซอร์ Chrome เพื่อทดสอบโค้ด จำลองผู้ใช้ และตรวจหาข้อบกพร่องโดยใช้ความสามารถของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ก่อนที่จะเผยแพร่
เริ่มใช้งาน ดูใน GitHub

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

ดูตัวเลือกการติดตั้งทั้งหมดบน GitHub

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับตัวแทนจะมาพร้อมกับ Antigravity 2.0 คุณเริ่มใช้งานได้ทันทีด้วยAgent ย่อยของเบราว์เซอร์ ลองใช้คำสั่งเครื่องหมายทับ เช่น

/browser Navigate to the Google homepage

หากต้องการเข้าถึงทักษะของเอเจนต์เฉพาะทาง ให้ติดตั้งปลั๊กอิน DevTools ในขั้นตอนสร้างด้วย Google ของการตั้งค่าเริ่มต้นหรือในการตั้งค่าแอปพลิเคชัน

  # Install as a Gemini extension (MCP+Skills):
  gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
 
  # Install as a plugin (MCP+Skills)
  # Add the marketplace registry:
  /plugin marketplace add ChromeDevTools/chrome-devtools-mcp
  # Install
  /plugin install chrome-devtools-mcp@chrome-devtools-plugins
 
  codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

หากคุณใช้เอเจนต์การเขียนโค้ดอื่นๆ เช่น Copilot หรือ OpenCode ให้ทำตามวิธีการ ในที่เก็บข้อมูล GitHub ของเรา

ตัวแทนของคุณทำอะไรได้บ้าง

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

ทดสอบการออกแบบที่ตอบสนองตามอุปกรณ์ ตำแหน่งทางภูมิศาสตร์ต่างๆ และโฟลว์ของผู้ใช้จริง ดูข้อมูลเพิ่มเติม
เชื่อมต่อกับเซสชัน Chrome ที่ใช้งานอยู่เพื่อตรวจสอบ หยุดชั่วคราว และแก้ปัญหาแบบเรียลไทม์ ดูข้อมูลเพิ่มเติม
เรียกใช้การตรวจสอบเพื่อ A11y, SEO และประสิทธิภาพเพื่อให้รายการตรวจสอบที่นำไปใช้ได้จริงก่อนที่จะพุชโค้ดไปยังเวอร์ชันที่ใช้งานจริง ดูข้อมูลเพิ่มเติม

พรอมต์ที่ช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีขึ้น

มอบสิทธิ์ให้ AI Agent ท่องเว็บไซต์ โต้ตอบกับปุ่ม สำรวจหน้าเว็บ และเรียกใช้การตรวจสอบการช่วยเหลือพิเศษได้ทันที ทั้งหมดนี้ผ่านอินสแตนซ์เบราว์เซอร์ที่มีการจัดการอย่างเต็มรูปแบบ 
Go to developer.chrome.com on mobile, click the burger menu, and check for top-level navigation items.
 
Go to https://chrome.dev/devtools-store-locator. Simulate your location is Berlin and check if the store locator shows the Rosenthaler Strasse branch.
 
Run a Lighthouse accessibility audit and suggest fixes for any low-contrast elements.
 
Perform an SEO audit and verify all images have descriptive alt text.
ดูวิธีตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์ รวมถึงดูการแก้ไขข้อบกพร่องและการยืนยันเอเจนต์โดยอัตโนมัติ วิดีโอนี้ครอบคลุมการติดตั้ง การเชื่อมต่อ และการใช้ CLI สำหรับการดำเนินการเป็นชุด