เผยแพร่: 23 กันยายน 2025
วันนี้เราจะเปิดตัวเวอร์ชันตัวอย่างแบบสาธารณะสำหรับเซิร์ฟเวอร์ Model Context Protocol (MCP) ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ใหม่ ซึ่งจะนำ ความสามารถของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มาสู่ผู้ช่วยเขียนโค้ด AI
เอเจนต์การเขียนโค้ดเผชิญกับปัญหาพื้นฐานคือไม่สามารถดูสิ่งที่โค้ด ที่สร้างขึ้นทำได้จริงเมื่อเรียกใช้ในเบราว์เซอร์ ซึ่งก็เหมือนกับการ เขียนโปรแกรมโดยปิดตา
เซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะเปลี่ยนแปลงสิ่งนี้ ผู้ช่วยการเขียนโค้ด AI สามารถ แก้ไขข้อบกพร่องของหน้าเว็บได้โดยตรงใน Chrome และใช้ประโยชน์จากความสามารถในการแก้ไขข้อบกพร่องของ DevTools และข้อมูลเชิงลึกด้านประสิทธิภาพ ซึ่งจะช่วยเพิ่มความแม่นยำเมื่อระบุและแก้ไขปัญหา
ดูวิธีการทำงานด้วยตัวคุณเอง
Model Context Protocol (MCP) คืออะไร
Model Context Protocol (MCP) เป็นมาตรฐานโอเพนซอร์ส สำหรับการเชื่อมต่อโมเดลภาษาขนาดใหญ่ (LLM) กับเครื่องมือและแหล่งข้อมูล ภายนอก เซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะเพิ่มความสามารถในการแก้ไขข้อบกพร่องให้กับ AI Agent
ตัวอย่างเช่น เซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีเครื่องมือชื่อ
performance_start_trace เมื่อได้รับมอบหมายให้ตรวจสอบประสิทธิภาพของเว็บไซต์ LLM สามารถใช้เครื่องมือนี้เพื่อเริ่ม Chrome เปิดเว็บไซต์ และใช้ Chrome DevTools เพื่อบันทึกการติดตามประสิทธิภาพ จากนั้น LLM จะวิเคราะห์
การติดตามประสิทธิภาพเพื่อแนะนำการปรับปรุงที่อาจเป็นไปได้ เซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สามารถนำความสามารถในการแก้ไขข้อบกพร่องใหม่ๆ มาสู่เอเจนต์การเขียนโค้ดของคุณเพื่อช่วยให้สร้างเว็บไซต์ได้ดียิ่งขึ้นโดยใช้โปรโตคอล MCP
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของ MCP โปรดดูเอกสารประกอบของ MCP
คุณใช้ฟีเจอร์นี้ทำอะไรได้บ้าง
ต่อไปนี้คือตัวอย่างพรอมต์ที่คุณลองใช้ในผู้ช่วย AI ที่คุณเลือกได้ เช่น Gemini CLI
ยืนยันการเปลี่ยนแปลงโค้ดแบบเรียลไทม์
สร้างการแก้ไขด้วยเอเจนต์ AI แล้วยืนยันโดยอัตโนมัติว่าโซลูชันทำงานได้ตามที่ตั้งใจไว้ด้วย MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
พรอมต์ให้ลองใช้
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?
แก้ไขข้อบกพร่องเกี่ยวกับปัญหาการจัดรูปแบบและเลย์เอาต์แบบเรียลไทม์
ขอให้เอเจนต์ AI เชื่อมต่อกับหน้าเว็บที่เผยแพร่อยู่ ตรวจสอบ DOM และ CSS รวมถึงรับคำแนะนำที่เฉพาะเจาะจงเพื่อแก้ไขปัญหาเลย์เอาต์ที่ซับซ้อน เช่น องค์ประกอบที่ล้น โดยอิงตามข้อมูลแบบเรียลไทม์จากเบราว์เซอร์
พรอมต์ให้ลองใช้
The page on localhost:8080 looks strange and off. Check what's happening there.
ตรวจสอบประสิทธิภาพโดยอัตโนมัติ
สั่งให้ AI Agent เรียกใช้การติดตามประสิทธิภาพ วิเคราะห์ผลลัพธ์ และ ตรวจสอบปัญหาด้านประสิทธิภาพที่เฉพาะเจาะจง เช่น จำนวน LCP สูง
พรอมต์ให้ลองใช้
Localhost:8080 is loading slowly. Make it load faster.
ดูรายการเครื่องมือทั้งหมดที่พร้อมใช้งานได้ในเอกสารอ้างอิงเครื่องมือ
เริ่มต้นใช้งาน
หากต้องการลองใช้ฟีเจอร์นี้ ให้เพิ่มรายการการกำหนดค่าต่อไปนี้ลงในไคลเอ็นต์ MCP
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
หากต้องการตรวจสอบว่าใช้งานได้หรือไม่ ให้เรียกใช้พรอมต์ต่อไปนี้ใน Agent การเขียนโค้ด
Please check the LCP of web.dev.
ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ใน GitHub
มาร่วมกับเรา
เรากำลังสร้าง MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แบบค่อยเป็นค่อยไป โดยเริ่มจากเวอร์ชันตัวอย่างสาธารณะที่เราจะเปิดตัวในวันนี้ เรากำลังมองหาความคิดเห็นจากคุณและชุมชนเกี่ยวกับความสามารถที่เราควรเพิ่มในลำดับถัดไป ไม่ว่าคุณจะเป็นนักพัฒนาแอปที่ใช้ผู้ช่วยเขียนโค้ด AI หรือผู้ให้บริการที่สร้างเครื่องมือพัฒนา AI รุ่นต่อไป ข้อมูลเชิงลึกของคุณจะมีคุณค่าอย่างยิ่ง และหากมีสิ่งใดขาดหายไปหรือไม่ทำงาน โปรดรายงานปัญหาใน GitHub