ให้ Coding Agent ดีบักเซสชันเบราว์เซอร์ของคุณด้วย MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

Sebastian Benz
Alex Rudenko
Alex Rudenko
X GitHub

เผยแพร่: 11 ธันวาคม 2025

เราได้ปรับปรุงเซิร์ฟเวอร์ MCP ของ Chrome DevTools ตามที่ผู้ใช้หลายคนขอมา นั่นคือความสามารถในการให้เอเจนต์การเขียนโค้ดเชื่อมต่อกับเซสชันเบราว์เซอร์ที่ใช้งานอยู่ได้โดยตรง

การปรับปรุงนี้ช่วยให้เอเจนต์การเขียนโค้ดทำสิ่งต่อไปนี้ได้

  1. ใช้เซสชันเบราว์เซอร์ที่มีอยู่ซ้ำ: สมมติว่าคุณต้องการให้เอเจนต์การเขียนโค้ด แก้ไขปัญหาที่ต้องลงชื่อเข้าใช้ก่อน ตอนนี้ตัวแทนการเขียนโค้ดของคุณสามารถ เข้าถึงเซสชันการท่องเว็บปัจจุบันได้โดยตรงโดยไม่ต้อง ลงชื่อเข้าใช้เพิ่มเติม
  2. เข้าถึงเซสชันการแก้ไขข้อบกพร่องที่ใช้งานอยู่: ตอนนี้เอเจนต์การเขียนโค้ดสามารถเข้าถึงเซสชันการแก้ไขข้อบกพร่องที่ใช้งานอยู่ได้ใน UI ของ DevTools เช่น เมื่อพบคำขอเครือข่ายที่ไม่สำเร็จในแผงเครือข่ายของ Chrome DevTools ให้เลือกคำขอและขอให้เอเจนต์การเขียนโค้ดตรวจสอบ และยังใช้ได้กับองค์ประกอบที่เลือกในแผงองค์ประกอบด้วย เราตื่นเต้นกับความสามารถใหม่นี้ ที่ช่วยให้สลับไปมาระหว่างการแก้ไขข้อบกพร่องด้วยตนเองและการแก้ไขข้อบกพร่องที่ AI ช่วยได้อย่างราบรื่น

ดูของจริง

ฟีเจอร์การเชื่อมต่ออัตโนมัติเป็นส่วนเพิ่มเติมจากวิธีที่มีอยู่สำหรับ MCP ของ Chrome DevTools ในการเชื่อมต่อกับอินสแตนซ์ Chrome โปรดทราบว่าคุณยังทำสิ่งต่อไปนี้ได้

  • เรียกใช้ Chrome ด้วยโปรไฟล์ผู้ใช้ที่เฉพาะเจาะจงเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (ปัจจุบัน ค่าเริ่มต้น)
  • เชื่อมต่อกับอินสแตนซ์ Chrome ที่ทำงานอยู่ด้วยพอร์ตการแก้ไขข้อบกพร่องระยะไกล
  • เรียกใช้ Chrome หลายอินสแตนซ์แยกกัน โดยแต่ละอินสแตนซ์จะทำงานใน โปรไฟล์ชั่วคราว

วิธีการทำงาน

เราได้เพิ่มฟีเจอร์ใหม่ลงใน Chrome M145 (ปัจจุบันอยู่ใน Canary) ซึ่งช่วยให้ เซิร์ฟเวอร์ MCP ของ Chrome DevTools สามารถขอการเชื่อมต่อการแก้ไขข้อบกพร่องจากระยะไกลได้ โฟลว์ใหม่นี้สร้างขึ้นจากความสามารถในการแก้ไขข้อบกพร่องจากระยะไกลที่มีอยู่ของ Chrome โดยค่าเริ่มต้น Chrome จะปิดใช้การเชื่อมต่อการแก้ไขข้อบกพร่องจากระยะไกล นักพัฒนาแอปต้องเปิดใช้ฟีเจอร์นี้อย่างชัดแจ้งก่อนโดยไปที่chrome://inspect#remote-debugging

เมื่อกำหนดค่าเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ด้วย--autoConnect ตัวเลือก เซิร์ฟเวอร์ MCP จะเชื่อมต่อกับอินสแตนซ์ Chrome ที่ใช้งานอยู่และขอเซสชันการแก้ไขข้อบกพร่องระยะไกล เพื่อป้องกันไม่ให้ผู้ไม่ประสงค์ดีนำไปใช้ในทางที่ผิด ทุกครั้งที่เซิร์ฟเวอร์ MCP ของ Chrome DevTools ขอเซสชันการแก้ไขข้อบกพร่องจากระยะไกล Chrome จะแสดงกล่องโต้ตอบต่อผู้ใช้และขอสิทธิ์เพื่ออนุญาตเซสชันการแก้ไขข้อบกพร่องจากระยะไกล นอกจากนี้ ขณะเซสชันการแก้ไขข้อบกพร่องทำงานอยู่ Chrome จะแสดงแบนเนอร์ "ซอฟต์แวร์ทดสอบอัตโนมัติกำลังควบคุม Chrome อยู่" ที่ด้านบน

ขั้นตอนการแก้ไขข้อบกพร่องจากระยะไกล: ก่อนอื่นให้เปิดใช้ฟีเจอร์การแก้ไขข้อบกพร่องจากระยะไกล จากนั้นยืนยันคำขอการเชื่อมต่อการแก้ไขข้อบกพร่องจากระยะไกล เซสชันการแก้ไขข้อบกพร่องจะระบุด้วยข้อความแบนเนอร์
ขั้นตอนการแก้ไขข้อบกพร่องจากระยะไกลและ UI ใหม่ใน Chrome

เริ่มต้นใช้งาน

หากต้องการใช้ความสามารถในการแก้ไขข้อบกพร่องจากระยะไกลแบบใหม่ คุณต้องเปิดใช้การแก้ไขข้อบกพร่องจากระยะไกลใน Chrome ก่อน แล้วจึงกำหนดค่าเซิร์ฟเวอร์ MCP ของ Chrome DevTools ให้ใช้ฟีเจอร์การเชื่อมต่ออัตโนมัติใหม่

ขั้นตอนที่ 1: ตั้งค่าการแก้ไขข้อบกพร่องจากระยะไกลใน Chrome

ใน Chrome ให้ทำดังนี้เพื่อตั้งค่าการแก้ไขข้อบกพร่องจากระยะไกล

  1. ไปที่ chrome://inspect/#remote-debugging เพื่อเปิดใช้การแก้ไขข้อบกพร่องจากระยะไกล
  2. ทำตาม UI ของกล่องโต้ตอบเพื่ออนุญาตหรือไม่อนุญาตการเชื่อมต่อการแก้ไขข้อบกพร่องขาเข้า
ภาพหน้าจอแสดงวิธีเปิดใช้การแก้ไขข้อบกพร่องจากระยะไกลใน Chrome
ต้องเปิดใช้การแก้ไขข้อบกพร่องจากระยะไกลก่อน ไคลเอ็นต์จึงจะขอการเชื่อมต่อการแก้ไขข้อบกพร่องจากระยะไกลได้

ขั้นตอนที่ 2: กำหนดค่าเซิร์ฟเวอร์ MCP ของ Chrome DevTools ให้เชื่อมต่อกับอินสแตนซ์ Chrome ที่ทำงานอยู่โดยอัตโนมัติ

หากต้องการเชื่อมต่อเซิร์ฟเวอร์ chrome-devtools-mcp กับอินสแตนซ์ Chrome ที่ทำงานอยู่ ให้ใช้ --autoConnect อาร์กิวเมนต์บรรทัดคำสั่งสำหรับชุดเซิร์ฟเวอร์ MCP

ข้อมูลโค้ดต่อไปนี้เป็นตัวอย่างการกำหนดค่าสำหรับ gemini-cli

{
   "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--channel=canary"
      ]
    }
  }
}

ขั้นตอนที่ 3: ทดสอบการตั้งค่า

ตอนนี้ให้เปิด gemini-cli แล้วเรียกใช้พรอมต์ต่อไปนี้

Check the performance of https://developers.chrome.com

เซิร์ฟเวอร์ MCP ของ Chrome DevTools จะพยายามเชื่อมต่อกับอินสแตนซ์ Chrome ที่กำลังทำงาน โดยจะแสดงกล่องโต้ตอบที่ขอสิทธิ์จากผู้ใช้ ดังนี้

กล่องโต้ตอบของ Chrome ที่ขอให้ผู้ใช้เปิดใช้เซสชันการแก้ไขข้อบกพร่องจากระยะไกล
Chrome ขอสิทธิ์จากผู้ใช้เพื่อเริ่มเซสชันการแก้ไขข้อบกพร่องจากระยะไกล

การคลิกอนุญาตจะทำให้เซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เปิด developers.chrome.com และบันทึกการติดตามประสิทธิภาพ

ดูวิธีการแบบเต็มได้ที่ README ใน GitHub

อนุญาตให้เอเจนต์การเขียนโค้ดเข้าควบคุมเซสชันการแก้ไขข้อบกพร่อง

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

ซึ่งใช้ได้กับแผงเครือข่ายด้วย คุณสามารถเลือกคำขอเครือข่ายและ ขอให้ตัวแทนการเขียนโค้ดตรวจสอบได้

แต่นี่เป็นเพียงก้าวแรก เราวางแผนที่จะค่อยๆ เปิดเผยข้อมูลแผงเพิ่มเติมให้แก่ตัวแทนการเขียนโค้ดผ่านเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โปรดอดใจรอ