เผยแพร่: 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
เช่น เซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีเครื่องมือชื่อ
performance_start_trace เมื่อได้รับมอบหมายให้ตรวจสอบประสิทธิภาพของเว็บไซต์ LLM จะใช้เครื่องมือนี้เพื่อเริ่ม Chrome เปิดเว็บไซต์ และใช้ Chrome DevTools เพื่อบันทึกการติดตามประสิทธิภาพได้ จากนั้น LLM จะวิเคราะห์
การติดตามประสิทธิภาพเพื่อแนะนำการปรับปรุงที่อาจเป็นไปได้ การใช้โปรโตคอล MCP ทำให้เซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สามารถนำความสามารถในการแก้ไขข้อบกพร่องใหม่ๆ มาสู่เอเจนต์การเขียนโค้ดของคุณ เพื่อให้สร้างเว็บไซต์ได้ดียิ่งขึ้น
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของ 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 เรียกใช้การติดตามประสิทธิภาพ วิเคราะห์ผลลัพธ์ และ ตรวจสอบปัญหาด้านประสิทธิภาพที่เฉพาะเจาะจง เช่น จำนวน LCP สูง
พรอมต์ให้ลองใช้
Localhost:8080 is loading slowly. Make it load faster.
ดูรายการเครื่องมือทั้งหมดที่พร้อมใช้งานได้ในเอกสารอ้างอิงเครื่องมือ
เริ่มต้นใช้งาน
หากต้องการลองใช้ฟีเจอร์นี้ ให้เพิ่มรายการการกำหนดค่าต่อไปนี้ลงในไคลเอ็นต์ MCP
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
หากต้องการตรวจสอบว่าใช้งานได้หรือไม่ ให้เรียกใช้พรอมต์ต่อไปนี้ในเอเจนต์การเขียนโค้ด
Please check the LCP of web.dev.
ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ใน GitHub
มาร่วมกับเรา
เรากำลังสร้าง MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แบบค่อยเป็นค่อยไป โดยเริ่มจากเวอร์ชันตัวอย่างสาธารณะที่เราจะเปิดตัวในวันนี้ เรากำลังมองหาความคิดเห็นจากคุณและชุมชนเกี่ยวกับความสามารถที่เราควรเพิ่มในลำดับถัดไป ไม่ว่าคุณจะเป็นนักพัฒนาแอปที่ใช้ผู้ช่วยเขียนโค้ด AI หรือผู้ให้บริการที่สร้างเครื่องมือพัฒนา AI รุ่นถัดไป ข้อมูลเชิงลึกของคุณจะมีคุณค่าอย่างยิ่ง และหากมีสิ่งใดขาดหายไปหรือไม่ทำงาน โปรดรายงานปัญหาใน GitHub