เชื่อมต่อ AI Agent กับอินสแตนซ์เบราว์เซอร์ที่ใช้งานอยู่โดยตรงด้วยฟีเจอร์เชื่อมต่ออัตโนมัติ ซึ่งจะช่วยให้ Agent ข้ามข้อจำกัดของแซนด์บ็อกซ์ได้โดยการรับช่วงแท็บ ส่วนขยายเบราว์เซอร์ และสถานะแอปพลิเคชันที่ใช้งานอยู่ของคุณ
การรับช่วงบริบทเวิร์กโฟลว์จะช่วยให้ Agent เปลี่ยนจากการเขียนโค้ดเป็นการแก้ไขข้อบกพร่องในสถานะเบราว์เซอร์ที่ใช้งานอยู่ได้โดยไม่สูญเสียข้อมูลเซสชัน ฟีเจอร์นี้มีประโยชน์เมื่อคุณไปถึงสถานะแอปพลิเคชันที่เฉพาะเจาะจงแล้ว (เช่น ขั้นตอนการชำระเงินที่ซับซ้อนหรือข้อผิดพลาดที่ทำซ้ำด้วยตนเอง) และต้องการให้ Agent เข้ามาตรวจสอบทางเทคนิคแทนการทำตามขั้นตอนเหล่านั้นด้วยตนเอง
โปรดพิจารณาสิ่งต่อไปนี้ก่อนเปิดใช้การเชื่อมต่ออัตโนมัติ
- ความปลอดภัยและความเป็นส่วนตัว: เมื่อการเชื่อมต่ออัตโนมัติทำงานอยู่ Agent จะเข้าถึงข้อมูลทั้งหมดในโปรไฟล์เบราว์เซอร์ของคุณได้ ซึ่งรวมถึงแท็บที่เปิดอยู่ พื้นที่เก็บข้อมูลเซสชัน พื้นที่เก็บข้อมูลในเครื่อง คุกกี้ และข้อมูลอื่นๆ ที่แสดงผ่าน JavaScript API
ข้อมูลที่ส่งไปยัง Google: เซิร์ฟเวอร์ Chrome DevTools for Agents จะทำงานเป็นกระบวนการในเครื่อง อย่างไรก็ตาม ระบบจะส่งข้อมูลต่อไปนี้ไปยัง Google โดยค่าเริ่มต้น ไม่ว่าโหมดการเชื่อมต่อจะเป็นอย่างไร
- สถิติการใช้งาน เช่น อัตราความสำเร็จในการเรียกใช้เครื่องมือ เวลาในการตอบสนอง
และข้อมูลสภาพแวดล้อม หากต้องการเลือกไม่รับ ให้ใช้แฟล็ก
--no-usage-statisticsหรือตั้งค่าตัวแปรสภาพแวดล้อมCHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS - URL จากการติดตามประสิทธิภาพ ซึ่งจะส่งไปยัง รายงาน Chrome UX (CrUX) API เพื่อดึงข้อมูลประสบการณ์ของผู้ใช้จริง หากต้องการเลือกไม่รับ ให้ใช้แฟล็ก
--no-performance-crux
ดูข้อมูลเพิ่มเติมได้ที่ ตัวเลือกความปลอดภัยและความเป็นส่วนตัว
- สถิติการใช้งาน เช่น อัตราความสำเร็จในการเรียกใช้เครื่องมือ เวลาในการตอบสนอง
และข้อมูลสภาพแวดล้อม หากต้องการเลือกไม่รับ ให้ใช้แฟล็ก
ความน่าเชื่อถือและการแจ้งเตือน: ใช้โหมดนี้กับ Agent ที่คุณเชื่อถือเท่านั้น และระมัดระวังข้อมูลที่จะรวมไว้ในการแจ้งเตือน
ข้อกำหนดเบื้องต้น
ก่อนใช้ฟีเจอร์เชื่อมต่ออัตโนมัติ โปรดตรวจสอบว่าคุณมีสิ่งต่อไปนี้
- Chrome 114 ขึ้นไป: การเชื่อมต่ออัตโนมัติต้องใช้โปรโตคอลการแก้ไขข้อบกพร่องที่ทันสมัยซึ่งมีอยู่ใน Chrome เวอร์ชันปัจจุบัน
- ช่อง Chrome ที่ถูกต้อง: Agent จะเชื่อมต่อกับ Chrome เวอร์ชันเสถียรโดยค่าเริ่มต้น หากต้องการใช้ Canary หรือเบต้า ให้ระบุช่องในการกำหนดค่า
- เปิดใช้การแก้ไขข้อบกพร่องระยะไกล: เปิดใช้บริดจ์ระหว่าง เบราว์เซอร์กับ Agent ด้วยตนเอง
- การกำหนดค่าที่ถูกต้อง: คุณต้องอัปเดตการกำหนดค่า MCP ให้รวม
แฟล็ก
--autoConnectดูรายละเอียดได้ที่การกำหนดค่า
ตั้งค่าการเชื่อมต่ออัตโนมัติ
หากต้องการกำหนดค่าฟีเจอร์เชื่อมต่ออัตโนมัติในเซิร์ฟเวอร์ MCP ให้ทำดังนี้
- ในเบราว์เซอร์ Chrome ที่ทำงานอยู่ ให้ไปที่
chrome://inspect/#remote-debuggingแล้วเปิดใช้การแก้ไขข้อบกพร่องระยะไกล อัปเดตการกำหนดค่า MCP ให้รวมแฟล็ก
--autoConnectดังนี้{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }หากต้องการเลือกไม่ส่งสถิติการใช้งานและ URL การติดตามประสิทธิภาพไปยัง Google ให้เพิ่มแฟล็ก
--no-usage-statisticsและ--no-performance-cruxลงในargsด้วยแจ้งให้ Agent โต้ตอบกับแอป Chrome ที่เปิดอยู่ เมื่อ Chrome ขอสิทธิ์อนุญาตเซสชัน ให้คลิกอนุญาต
ตอนนี้ Agent จะใช้เซิร์ฟเวอร์ MCP เพื่อโต้ตอบกับแอปพลิเคชัน Chrome ที่ทำงานอยู่ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าได้ที่ คู่มือการกำหนดค่า
กรณีการใช้งานสำหรับการเชื่อมต่ออัตโนมัติ
การเชื่อมต่ออัตโนมัติช่วยให้คุณใช้เครื่องมือหรือสถานะที่ใช้ในเซสชัน Chrome ที่อยู่ในแซนด์บ็อกซ์ไม่ได้ ตัวอย่างเช่น แทนที่จะขอให้ Agent ลงชื่อเข้าใช้ ซึ่งมักจะล้มเหลว คุณสามารถไปที่หน้าเว็บและลงชื่อเข้าใช้ด้วยตนเอง จากนั้นขอให้ Agent เข้ามาจัดการต่อ
ส่วนต่อไปนี้มีตัวอย่างกรณีการใช้งานสำหรับฟีเจอร์เชื่อมต่ออัตโนมัติ
แก้ไขข้อบกพร่องของแดชบอร์ดที่ต้องมีการตรวจสอบสิทธิ์
เครื่องมือภายในและแดชบอร์ดส่วนตัวมักจะอยู่เบื้องหลังเลเยอร์การลงชื่อเข้าใช้ครั้งเดียว (SSO) หรือเครือข่ายส่วนตัวเสมือน (VPN) ที่ซับซ้อน เบราว์เซอร์ที่อยู่ในแซนด์บ็อกซ์มักจะต้องมีการลงชื่อเข้าใช้ที่ Agent ไม่สามารถข้ามได้ การเชื่อมต่ออัตโนมัติจะช่วยให้ Agent รับช่วงเซสชันที่ใช้งานอยู่ของคุณ
ตัวอย่างการแจ้งเตือน
I have my company's staging dashboard open in the next tab. Can you look at the
User Analytics chart, find the SVG element for the Friday data point, and tell
me why the tooltip isn't appearing on hover?
ตัวอย่างการดำเนินการของ Agent: Agent จะระบุกระบวนการ Chrome ที่มีอยู่ ค้นหาแท็บที่ใช้งานอยู่ และตรวจสอบแผนผังการเข้าถึงเพื่อค้นหาองค์ประกอบต่างๆ นอกจากนี้ Agent ยังอาจใช้ JavaScript API เพื่อประเมินความขัดแย้งที่เฉพาะเจาะจง
แก้ไขแท็บปัจจุบันแบบสดๆ
หลีกเลี่ยงการทำซ้ำข้อผิดพลาดด้วยตนเอง แทนที่จะแปลขั้นตอนการทำซ้ำเป็นการแจ้งเตือนใหม่สำหรับ Agent ที่อยู่ในแซนด์บ็อกซ์ คุณสามารถขอให้ Agent แก้ไขข้อบกพร่องในหน้าเว็บที่ใช้งานอยู่ซึ่งคุณพบข้อบกพร่องนั้นแล้ว
ตัวอย่างการแจ้งเตือน
Look at the current page. The Submit button overlaps with the footer on this
screen size. Generate a fix for the layout and verify it by injecting the CSS
directly into this tab.
ตัวอย่างการดำเนินการของ Agent: เนื่องจากเชื่อมต่อกับหน้าต่างที่ใช้งานอยู่ Agent จึงวิเคราะห์เลย์เอาต์และใช้การแก้ไขทันที คุณจะเห็นปุ่มย้ายบนหน้าจอ ซึ่งยืนยันว่าการแก้ไขใช้งานได้ก่อนที่คุณจะอัปเดตซอร์สโค้ด