เชื่อมต่อ AI Agent กับอินสแตนซ์เบราว์เซอร์ที่ใช้งานอยู่โดยตรงด้วยฟีเจอร์เชื่อมต่ออัตโนมัติ ซึ่งจะช่วยให้ Agent ข้ามข้อจำกัดของแซนด์บ็อกซ์ได้โดย รับช่วงแท็บ ส่วนขยายของเบราว์เซอร์ และสถานะแอปพลิเคชันที่ใช้งานอยู่ปัจจุบัน
การรับช่วงบริบทของเวิร์กโฟลว์ช่วยให้เอเจนต์เปลี่ยนจากการเขียนโค้ดไปเป็นการ แก้ไขข้อบกพร่องของสถานะเบราว์เซอร์ที่ใช้งานอยู่ได้โดยไม่สูญเสียข้อมูลเซสชัน ซึ่งจะมีประโยชน์ เมื่อคุณไปถึงสถานะแอปพลิเคชันที่เฉพาะเจาะจงแล้ว (เช่น ขั้นตอนการชำระเงินที่ซับซ้อน หรือข้อผิดพลาดที่ทำซ้ำด้วยตนเอง) และต้องการให้ตัวแทนรับช่วง การตรวจสอบทางเทคนิคโดยไม่ต้องทำตามขั้นตอนเหล่านั้นด้วยตนเองอีกครั้ง
โปรดพิจารณาสิ่งต่อไปนี้ก่อนเปิดใช้การเชื่อมต่ออัตโนมัติ
- ความปลอดภัยและความเป็นส่วนตัว: เมื่อเปิดใช้งานการเชื่อมต่ออัตโนมัติ ตัวแทนของคุณจะมีสิทธิ์เข้าถึง ข้อมูลทั้งหมดในโปรไฟล์เบราว์เซอร์ ซึ่งรวมถึงแท็บที่เปิดอยู่ ที่เก็บข้อมูลเซสชัน ที่เก็บข้อมูลในเครื่อง คุกกี้ และข้อมูลอื่นๆ ที่แสดงผ่าน JavaScript API
- การรับประกันความเป็นส่วนตัวของข้อมูล: เซิร์ฟเวอร์เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เป็นกระบวนการในเครื่องและจะไม่ส่งข้อมูลเบราว์เซอร์ โทเค็นเซสชัน หรือการวัดและส่งข้อมูลไปยัง Google
- ความน่าเชื่อถือและพรอมต์: ใช้โหมดนี้กับเอเจนต์ที่คุณเชื่อถือเท่านั้น และโปรดระมัดระวังเกี่ยวกับข้อมูลที่คุณใส่ในพรอมต์
ข้อกำหนดเบื้องต้น
ก่อนใช้ฟีเจอร์เชื่อมต่ออัตโนมัติ โปรดตรวจสอบว่าคุณมีสิ่งต่อไปนี้
- Chrome 144 ขึ้นไป: การเชื่อมต่ออัตโนมัติต้องใช้โปรโตคอลการแก้ไขข้อบกพร่องที่ทันสมัยซึ่งอยู่ใน Chrome เวอร์ชันปัจจุบัน
- ช่อง Chrome ที่ถูกต้อง: โดยค่าเริ่มต้นแล้ว ตัวแทนจะเชื่อมต่อกับ Chrome เวอร์ชันเสถียร หากต้องการใช้ Canary หรือเบต้า ให้ระบุเวอร์ชันในการกำหนดค่า
- เปิดใช้การแก้ไขข้อบกพร่องจากระยะไกล: เปิดใช้การเชื่อมต่อระหว่างเบราว์เซอร์กับ Agent ด้วยตนเอง
- การกำหนดค่าที่ถูกต้อง: คุณต้องอัปเดตการกำหนดค่า MCP ให้มี
แฟล็ก
--autoConnectดูรายละเอียดได้ที่การกำหนดค่า
ตั้งค่าการเชื่อมต่ออัตโนมัติ
หากต้องการกำหนดค่าฟีเจอร์เชื่อมต่ออัตโนมัติในเซิร์ฟเวอร์ MCP ให้ทำดังนี้
- ในเบราว์เซอร์ Chrome ที่ทำงานอยู่ ให้ไปที่
chrome://inspect/#remote-debuggingแล้วเปิดใช้การแก้ไขข้อบกพร่องจากระยะไกล อัปเดตการกำหนดค่า MCP ให้รวมแฟล็ก
--autoConnectดังนี้{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }แจ้งให้ตัวแทนโต้ตอบกับแอป Chrome ที่เปิดอยู่ เมื่อ Chrome ขอสิทธิ์เพื่ออนุญาตเซสชัน ให้คลิกอนุญาต
ตอนนี้เอเจนต์ใช้เซิร์ฟเวอร์ MCP เพื่อโต้ตอบกับแอปพลิเคชัน Chrome ที่ทำงานอยู่ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าได้ที่คู่มือการกำหนดค่า
กรณีการใช้งานสำหรับการเชื่อมต่ออัตโนมัติ
การเชื่อมต่ออัตโนมัติช่วยให้คุณใช้เครื่องมือหรือสถานะที่ใช้ในเซสชัน Chrome ที่อยู่ในแซนด์บ็อกซ์ไม่ได้ เช่น แทนที่จะขอให้ตัวแทนลงชื่อเข้าใช้ ซึ่งมักจะทำไม่สำเร็จ คุณสามารถไปที่หน้าเว็บและลงชื่อเข้าใช้ด้วยตนเองได้ จากนั้นขอให้ ตัวแทนรับช่วงต่อ
ส่วนต่อไปนี้มีตัวอย่างกรณีการใช้งานฟีเจอร์เชื่อมต่ออัตโนมัติ
แก้ไขข้อบกพร่องของแดชบอร์ดที่ตรวจสอบสิทธิ์แล้ว
เครื่องมือภายในและแดชบอร์ดส่วนตัวมักจะอยู่เบื้องหลังการลงชื่อเพียงครั้งเดียว (SSO) หรือเลเยอร์เครือข่ายส่วนตัวเสมือน (VPN) ที่ซับซ้อน โดยปกติเบราว์เซอร์แซนด์บ็อกซ์จะ ต้องมีการลงชื่อเข้าใช้ที่ตัวแทนของคุณข้ามไม่ได้ เมื่อใช้การเชื่อมต่ออัตโนมัติ 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?
ตัวอย่างการดำเนินการของเอเจนต์: เอเจนต์จะระบุกระบวนการ Chrome ที่มีอยู่ ค้นหาแท็บที่ใช้งานอยู่ และตรวจสอบโครงสร้างการช่วยเหลือพิเศษเพื่อค้นหาองค์ประกอบ นอกจากนี้ ยังอาจใช้ 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 จึงวิเคราะห์เลย์เอาต์และใช้การแก้ไขทันที คุณจะเห็นปุ่ม เคลื่อนที่บนหน้าจอ ซึ่งเป็นการยืนยันว่าการแก้ไขใช้ได้ผลก่อนที่คุณจะอัปเดตซอร์ส โค้ด