Chrome DevTools สำหรับ AI Agent (MCP)

• การเปิดตัว Chrome DevTools MCP Server เวอร์ชันพรีวิวสาธารณะ ทำให้ AI coding agent สามารถ ใช้ความสามารถด้านการดีบักและประสิทธิภาพของ Chrome DevTools ได้
• เดิมทีเอเจนต์ไม่สามารถตรวจสอบผลลัพธ์จากการรันโค้ดได้ แต่ตอนนี้สามารถใช้ข้อมูลรันไทม์จริงอย่าง เครือข่าย, คอนโซล, DOM และ performance trace ได้แล้ว
• การใช้ DevTools MCP Server ทำให้สามารถทำงานอัตโนมัติได้หลากหลาย เช่น ตรวจสอบโค้ดแบบเรียลไทม์, วิเคราะห์ข้อผิดพลาดของเครือข่ายและคอนโซล, จำลองพฤติกรรมผู้ใช้, ดีบักสไตล์และเลย์เอาต์, และ ตรวจสอบประสิทธิภาพอัตโนมัติ
• นักพัฒนาสามารถเพิ่มเซิร์ฟเวอร์เข้าไปในค่าตั้งของ MCP client แล้วใช้งานได้ทันที พร้อมใช้พรอมป์ต์ตัวอย่างเพื่อ ตรวจสอบ LCP หรือ วิเคราะห์ข้อผิดพลาดในการส่งฟอร์ม ได้
• Google มีแผนขยายความสามารถของ MCP ต่อไปโดยอิงจากฟีดแบ็กของชุมชน

---

ภาพรวม

• Google เปิดตัว Chrome DevTools Model Context Protocol (MCP) Server เวอร์ชันพรีวิวสาธารณะตัวใหม่
• สิ่งนี้ทำให้ AI coding assistant สามารถเข้าถึงความสามารถของ Chrome DevTools สำหรับการดีบักและการวัดประสิทธิภาพได้โดยตรงจากในเบราว์เซอร์
• กล่าวคือ ช่วยแก้ข้อจำกัดที่เกิดจากการที่ coding agent ไม่สามารถตรวจสอบพฤติกรรมจริงของโค้ดที่รันอยู่ในเบราว์เซอร์ได้

แนะนำ Model Context Protocol (MCP)

• Model Context Protocol (MCP) เป็นมาตรฐานโอเพนซอร์สสำหรับเชื่อมต่อ large language model (LLM) เข้ากับ เครื่องมือภายนอก และแหล่งข้อมูลต่าง ๆ
• Chrome DevTools MCP Server ใช้ มาตรฐาน นี้เพื่อเชื่อมต่อกับ AI agent และรองรับการใช้เครื่องมือต่าง ๆ เช่น การดีบักเว็บและการติดตามประสิทธิภาพ
• ตัวอย่างเช่น ด้วยเครื่องมือ performance_start_trace นั้น LLM สามารถเปิดเบราว์เซอร์ เก็บรวบรวมและวิเคราะห์ข้อมูลประสิทธิภาพ พร้อมเสนอแนวทางปรับปรุงได้
• ผ่านโปรโตคอล MCP ทำให้ coding agent ได้รับความสามารถสนับสนุนที่ทรงพลังยิ่งขึ้นสำหรับการพัฒนาเว็บไซต์และการแก้ปัญหา
• สามารถดูรายละเอียดการทำงานของ MCP เพิ่มเติมได้ใน เอกสาร MCP อย่างเป็นทางการ

กรณีการใช้งานหลัก

• ตรวจสอบการเปลี่ยนแปลงของโค้ดแบบเรียลไทม์

  • หลังจาก AI agent แก้ไขโค้ดแล้ว ก็สามารถใช้ Chrome DevTools MCP เพื่อตรวจสอบ การทำงานในเบราว์เซอร์ ได้ทันที
  • ตัวอย่างพรอมป์ต์:

    Verify in the browser that your change works as expected.  
    

• วินิจฉัยข้อผิดพลาดของเครือข่ายและคอนโซล

  • รองรับ การวินิจฉัยอัตโนมัติ เช่น การวิเคราะห์คำขอเครือข่าย การตรวจจับปัญหา CORS และการตรวจสอบคอนโซลล็อก
  • ตัวอย่างพรอมป์ต์:

    A few images on localhost:8080 are not loading. What's happening?  
    

• จำลองพฤติกรรมผู้ใช้

  • ช่วยทำ การทดสอบอัตโนมัติ ตามลำดับการใช้งานจริงภายในเบราว์เซอร์ เช่น การนำทาง การกรอกฟอร์ม และการคลิกปุ่ม รวมถึงช่วยจำลองบั๊กให้เกิดซ้ำ
  • ตัวอย่างพรอมป์ต์:

    Why does submitting the form fail after entering an email address?  
    

• ดีบักปัญหาสไตล์และเลย์เอาต์แบบเรียลไทม์

  • รองรับการตรวจสอบ DOM และ CSS พร้อมให้ข้อเสนอแนะโดยละเอียดอัตโนมัติสำหรับปัญหาเลย์เอาต์ เช่น overflow
  • ตัวอย่างพรอมป์ต์:

    The page on localhost:8080 looks strange and off. Check what's happening there.  
    

• ทำ performance audit แบบอัตโนมัติ

  • รองรับ การติดตามประสิทธิภาพของเบราว์เซอร์แบบอัตโนมัติ และการวิเคราะห์
  • ตัวอย่างพรอมป์ต์:

    Localhost:8080 is loading slowly. Make it load faster.  
    

• สามารถดูรายการเครื่องมือ MCP ที่ใช้งานได้ใน เอกสารอ้างอิงเครื่องมืออย่างเป็นทางการ

วิธีเริ่มต้น

• สามารถเชื่อมต่อ Chrome DevTools MCP Server ได้โดยเพิ่มการตั้งค่าต่อไปนี้ใน MCP client

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

• สามารถตรวจสอบการทำงานได้ด้วยพรอมป์ต์ตัวอย่าง

  Please check the LCP of web.dev.  
  

• ข้อมูลเพิ่มเติมและเอกสารมีให้ใน เอกสาร Chrome DevTools MCP บน GitHub

การมีส่วนร่วมและแผนการขยายต่อไป

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

[shakespeares]

ผมสงสัยว่ามีกรณีใช้งานที่มันดีกว่า Playwright อย่างชัดเจนอยู่บ้างหรือเปล่า
ถ้ามองแบบตรงไปตรงมา ตอนนี้ก็ยังรู้สึกว่าน่าเสียดายอยู่ครับ