CyberAgent เป็นบริษัทไอทีชั้นนำในญี่ปุ่นที่ให้บริการออนไลน์หลากหลายประเภท รวมถึงแพลตฟอร์มบล็อก Ameba ยอดนิยม ทีมพบ ความท้าทายที่สำคัญเกี่ยวกับข้อผิดพลาดรันไทม์ที่ตรวจหาได้ยากผ่าน การทดสอบอัตโนมัติ ซึ่งต้องมีการแทรกแซงด้วยตนเองที่ใช้เวลานาน
เอกสารนี้จะอธิบายวิธีที่ CyberAgent ใช้เซิร์ฟเวอร์ Model Context Protocol (MCP) ของ Chrome DevTools เพื่อเปลี่ยนจากกระบวนการด้วยตนเองไปเป็นเวิร์กโฟลว์อัตโนมัติ ซึ่งช่วยประหยัดเวลาของนักพัฒนาซอฟต์แวร์และปรับปรุงความน่าเชื่อถือของขั้นตอนการทดสอบ
ความท้าทาย: เวิร์กโฟลว์แบบแมนนวลและมีข้อจำกัด
ระบบการออกแบบ Ameba ชื่อ Spindle เป็นคอลเล็กชันของคอมโพเนนต์ UI ที่นำกลับมาใช้ใหม่ได้ซึ่งใช้ เพื่อสร้างอินเทอร์เฟซของแพลตฟอร์มบล็อก โดยใช้ Storybook ในการพัฒนาและทดสอบคอมโพเนนต์ UI
ก่อนหน้านี้ เวิร์กโฟลว์ของ CyberAgent ในการแก้ไขข้อผิดพลาดขณะรันไทม์เป็นวงจรการทำงานด้วยตนเองที่ต้องทำซ้ำๆ นักพัฒนาแอปจะตรวจสอบคอมโพเนนต์แต่ละรายการในเบราว์เซอร์ ใช้การแก้ไข แล้วตรวจสอบอีกครั้ง เมื่อมีหน้าเว็บและคอมโพเนนต์จำนวนมาก การพึ่งพาการยืนยันด้วยภาพจึงมีข้อจำกัด ทำให้ตรวจพบข้อบกพร่องทุกรายการได้ยาก
วิธีแก้ปัญหา: ดีบักเอเจนต์โดยใช้ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ทีมจึงหันมาใช้เซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อแก้ปัญหานี้ หลังจากตั้งค่าอย่างตรงไปตรงมาโดยใช้คู่มือการเริ่มต้นใช้งานอย่างเป็นทางการ พวกเขาก็สามารถสั่งให้เอเจนต์ AI (Claude) ทำให้เวิร์กโฟลว์การแก้ไขข้อบกพร่องทั้งหมดเป็นไปโดยอัตโนมัติได้ทันที
เอเจนต์สามารถโต้ตอบกับเครื่องมือสำหรับนักพัฒนาเว็บได้ด้วยพรอมต์เดียวโดยการประมวลผลข้อมูลสถานะเบราว์เซอร์ที่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome MCP จับภาพไว้ เข้าถึงบริบทระบบไฟล์ และอ่านบันทึกคอนโซล จากนั้นก็ระบุข้อผิดพลาดและ แก้ไขโดยอัตโนมัติโดยไม่ต้องมีการแทรกแซงด้วยตนเอง
พรอมต์เริ่มต้นที่ใช้มีดังนี้
Currently, spindle-ui's Storybook is running, but runtime errors may be occurring.
Please use chrome-dev-tools-mcp to confirm the operation of the Story in the following steps:
Identify all target Stories. Confirm each and every one, no matter how many there are.
Confirm that the Story is displayed correctly using dev-tools-mcp.
Fix all errors.
Click and move through each Story from the top in the browser opened with mcp to confirm.
เอเจนต์ AI ได้ตรวจสอบอินสแตนซ์ Storybook โดยไปยังส่วนต่างๆ ของ เรื่องราวทั้งหมดเพื่ออ่านข้อผิดพลาด ใช้การแก้ไขโค้ด และยืนยันความสำเร็จ ของการแก้ไขแต่ละรายการ
ผลกระทบ: จากการตรวจสอบด้วยตนเองเป็นการแก้ไขอัตโนมัติ
ซึ่งได้ผลลัพธ์อย่างรวดเร็ว ในเวลาประมาณ 1 ชั่วโมง เอเจนต์ AI ได้ตรวจสอบคอมโพเนนต์ทั้ง 32 รายการและเรื่องราว 236 รายการในระบบการออกแบบ Spindle โดยอัตโนมัติ
แม้ว่าเอเจนต์จะระบุและแก้ไขข้อผิดพลาดรันไทม์ 1 รายการและคำเตือน 2 รายการ แต่คุณค่าที่แท้จริงของการทดสอบอยู่ที่การรับประกันผลลัพธ์เชิงลบ นั่นคือการยืนยันว่าไลบรารีส่วนใหญ่ไม่มีข้อผิดพลาดโดยไม่ต้องให้นักพัฒนาซอฟต์แวร์คลิกผ่านสถานะหลายร้อยรายการด้วยตนเอง
ก่อนหน้านี้ การตรวจสอบที่ครอบคลุมประเภทนี้ทำให้ผู้ตรวจสอบเหนื่อยล้าและมีแนวโน้ม ที่จะเกิดข้อผิดพลาดจากมนุษย์ การมอบหมายงานนี้ให้กับ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ทำให้ CyberAgent ได้รับผลลัพธ์ต่อไปนี้
- การครอบคลุมการตรวจสอบ 100%: เอเจนต์ตรวจสอบเรื่องราวทุกเรื่องโดยอัตโนมัติ เพื่อให้มั่นใจว่าคอมโพเนนต์ที่ "สะอาด" สะอาดจริง ซึ่งเป็นระดับความขยันหมั่นเพียร ที่ทำได้ยากด้วยตนเอง
- ไม่มีผลลบลวง: เซิร์ฟเวอร์ MCP ช่วยให้เอเจนต์ตรวจสอบสถานะเบราว์เซอร์จริงได้ ซึ่งรับประกันความน่าเชื่อถือสูง ต่างจากชุดทดสอบอัตโนมัติที่อาจพลาดความผิดปกติของรันไทม์ภาพ
- การลดภาระทางปัญญา: นักพัฒนาซอฟต์แวร์สามารถเชื่อมั่นในระบบเพื่อจัดการกับ "งานหนัก" ที่ต้องทำซ้ำๆ ได้ ทำให้มีเวลาโฟกัสกับตรรกะที่ซับซ้อนแทนการตรวจสอบตามปกติ
Kota Yanagi นักพัฒนาเว็บกล่าวว่าประโยชน์ที่ได้รับคือการเปลี่ยน ความรับผิดชอบ
"การตรวจสอบข้อผิดพลาดรันไทม์และคำเตือนที่ฉันเคยทำด้วยตนเองในเบราว์เซอร์นั้นสะดวกมาก นอกจากนี้ เรายังชอบที่ตอนนี้สามารถอธิบายการดำเนินการที่ซับซ้อนเป็นภาษาพูดง่ายๆ และให้เครื่องมืออ่านบันทึกข้อผิดพลาดไปจนถึงการแก้ไขปัญหาได้โดยตรง"
ความสำเร็จของเวิร์กโฟลว์อัตโนมัตินี้ทำให้ CyberAgent อัปเดตคู่มือตัวแทน Spindleภายในสำหรับตัวแทน AI ของตน ตอนนี้คู่มือนี้ได้กำหนดให้ MCP ของ Chrome DevTools เป็นเซิร์ฟเวอร์แก้ไขข้อบกพร่องเริ่มต้นสำหรับเอเจนต์ AI ของตนเองอย่าง Claude ซึ่งเป็นการกำหนดการใช้งานให้เป็นแนวทางปฏิบัติแนะนำและแสดงความมั่นใจในกระบวนการใหม่ที่ทำงานด้วยระบบ AI นี้
การแก้ไขที่เฉพาะเจาะจงได้รับการติดตั้งใช้งานในคำขอดึงข้อมูล 2 รายการ ซึ่งคุณสามารถตรวจสอบได้ ใน GitHub
CyberAgent ได้ปรับแต่งพรอมต์เพิ่มเติมและเผยแพร่ผลลัพธ์ สุดท้ายนี้
ความคิดเห็นและแผนในอนาคต
CyberAgent พึงพอใจกับความยืดหยุ่นและตัวเลือกต่างๆ ที่มี ใน MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome นอกจากนี้ยังให้ความคิดเห็นที่มีประโยชน์สำหรับการปรับปรุงในอนาคต โดยระบุว่าแม้เครื่องมือนี้จะมีประสิทธิภาพ แต่การใช้ฟีเจอร์ขั้นสูงเพิ่มเติมต้องอาศัยความรู้ของผู้ใช้ในระดับหนึ่ง
ในอนาคต ทีมงานสนใจที่จะผสานรวมกับแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บ ให้ลึกซึ้งยิ่งขึ้น โดยมีเป้าหมายที่จะสร้างเวิร์กโฟลว์ที่เอเจนต์สามารถตรวจสอบ Core Web Vitals แล้วดำเนินการวิเคราะห์ประสิทธิภาพในเชิงลึกมากขึ้นโดยใช้ แผงประสิทธิภาพเพื่อวิเคราะห์และแนะนำการปรับปรุง
Kazunari Hara ผู้เชี่ยวชาญด้านนักพัฒนาแอปที่ CyberAgent ได้แสดงความประหลาดใจ โดยเน้นถึงประสิทธิภาพของเครื่องมือและศักยภาพในการใช้งานในอนาคต
"ฉันรู้สึกทึ่งเมื่อเห็นว่าเบราว์เซอร์แก้ไขข้อผิดพลาดโดยอัตโนมัติจาก บันทึกโดยตรง ตอนนี้คุณสามารถทำให้งานที่เคยพลาดหรือใช้เวลานานทำงานโดยอัตโนมัติได้อย่างน่าเชื่อถือ ซึ่งจะช่วยปรับปรุงประสิทธิภาพในการพัฒนา เนื่องจาก MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีฟีเจอร์มากมายในสภาพแวดล้อมรันไทม์จริง ฉันจึงคาดหวังว่า MCP จะเป็นประโยชน์ในสถานการณ์ต่างๆ มากมายในอนาคต"
บทสรุป
การผสานรวม MCP ของเครื่องมือสำหรับนักพัฒนาเว็บ Chrome เข้ากับเวิร์กโฟลว์ช่วยให้ CyberAgent สามารถ ทำให้งานดีบักที่ซับซ้อนและใช้เวลานานเป็นไปโดยอัตโนมัติได้สำเร็จ ประสบการณ์ของพวกเขา แสดงให้เห็นถึงศักยภาพอันมหาศาลของเครื่องมือที่ทำงานด้วยระบบ AI ในการเพิ่ม ประสิทธิภาพการทำงานของนักพัฒนาแอป
กระบวนการนี้ทำงานโดยอัตโนมัติอย่างสมบูรณ์ จึงไม่จำเป็นต้องตรวจสอบด้วยตนเอง และมั่นใจได้ว่าจะไม่มีข้อผิดพลาดใดหลุดรอดไป แม้ว่าการใช้งานในปัจจุบันจะพิสูจน์ให้เห็นถึงคุณค่าแล้ว แต่ความคิดเห็นจาก CyberAgent ก็ชี้ให้เห็นถึงอนาคตที่น่าตื่นเต้นซึ่ง MCP ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome จะช่วยให้การวิเคราะห์ประสิทธิภาพและงานเพิ่มประสิทธิภาพมีความซับซ้อนมากยิ่งขึ้นโดยตรงภายในเบราว์เซอร์