CyberAgent، یک شرکت پیشرو در حوزه فناوری اطلاعات در ژاپن، طیف گستردهای از خدمات آنلاین، از جمله پلتفرم محبوب وبلاگنویسی Ameba را ارائه میدهد. این تیم با چالش قابل توجهی در مورد خطاهای زمان اجرا روبرو شد که تشخیص آنها از طریق آزمایش خودکار دشوار بود و نیاز به مداخله دستی و زمانبر داشت.
این سند بررسی میکند که چگونه CyberAgent از سرور Chrome DevTools Model Context Protocol (MCP) برای انتقال از یک فرآیند دستی به یک گردش کار خودکار استفاده کرد، در زمان توسعهدهنده صرفهجویی کرد و قابلیت اطمینان جریان تست آنها را بهبود بخشید.
چالش: گردش کار دستی و محدود
سیستم طراحی Ameba، Spindle، مجموعهای از اجزای رابط کاربری قابل استفاده مجدد است که برای ساخت رابط کاربری پلتفرم وبلاگنویسی استفاده میشود. این سیستم برای توسعه و آزمایش اجزای رابط کاربری به Storybook متکی است.
پیش از این، گردش کار CyberAgent برای رسیدگی به خطاهای زمان اجرا یک چرخه تکراری و دستی بود. یک توسعهدهنده هر جزء را در یک مرورگر بررسی میکرد، یک اصلاحیه اعمال میکرد و سپس دوباره آن را بررسی میکرد. با تعداد زیادی صفحه و جزء، این اتکا به تأیید بصری محدودیتهای خود را داشت و تشخیص هر اشکال را دشوار میکرد.
راه حل: عامل اشکال زدایی با استفاده از Chrome DevTools MCP
برای غلبه بر این چالش، تیم به سرور Chrome DevTools MCP روی آورد. پس از یک راهاندازی ساده با استفاده از راهنمای رسمی آنبوردینگ ، آنها توانستند بلافاصله یک عامل هوش مصنوعی (Claude) را برای خودکارسازی کل گردش کار اشکالزدایی آموزش دهند.
با یک اعلان واحد، عامل میتوانست با پردازش اطلاعات وضعیت مرورگر که توسط Chrome DevTools MCP ضبط شده بود، با DevTools تعامل داشته باشد؛ به محتوای سیستم فایل دسترسی پیدا کند و گزارشهای کنسول را بخواند. سپس به طور خودکار خطاها را شناسایی کرده و بدون دخالت دستی، اصلاحات را اجرا میکرد.
اولین دستوری که آنها استفاده کردند به شرح زیر بود:
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.
عامل هوش مصنوعی به ممیزی نمونه Storybook پرداخت و کل داستانها را مرور کرد تا خطاها را بخواند، اصلاحات کد را اعمال کند و موفقیت هر اصلاح را تأیید کند.
تأثیر: از بررسیهای دستی تا رفع خودکار مشکلات
نتایج سریع بودند. تقریباً در عرض یک ساعت، عامل هوش مصنوعی به طور مستقل تمام ۳۲ قطعه و ۲۳۶ طبقه را در سیستم طراحی اسپیندل بررسی کرد.
در حالی که عامل یک خطای زمان اجرا و دو هشدار را شناسایی و برطرف کرد، ارزش واقعی آزمایش در اطمینان از نکات منفی نهفته بود: تأیید اینکه بخش عمدهای از کتابخانه بدون خطا بوده است، بدون اینکه توسعهدهنده مجبور باشد صدها حالت را به صورت دستی بررسی کند.
پیش از این، این نوع ممیزی جامع از نظر بصری طاقتفرسا و مستعد نظارت انسانی بود. با واگذاری این کار به Chrome DevTools MCP، CyberAgent به موارد زیر دست یافت:
- پوشش ۱۰۰٪ حسابرسی : نماینده به صورت مکانیکی تک تک داستانها را تأیید کرد و اطمینان حاصل کرد که اجزای «تمیز» واقعاً تمیز هستند، سطحی از دقت که حفظ آن به صورت دستی دشوار است.
- صفر مورد منفی کاذب : برخلاف مجموعههای تست خودکار که ممکن است ناهنجاریهای بصری زمان اجرا را از دست بدهند، سرور MCP به عامل اجازه میدهد تا وضعیت واقعی مرورگر را اعتبارسنجی کند و قابلیت اطمینان بالایی را تضمین کند.
- تخلیه بار شناختی : توسعهدهندگان میتوانند به سیستم اعتماد کنند تا «کارهای طاقتفرسا»ی تکراری را انجام دهد و به آنها اجازه دهد تا به جای بررسیهای روتین، روی منطق پیچیده تمرکز کنند.
همانطور که کوتا یاناگی، توسعهدهنده وب، اشاره کرد، مزیت این تغییر در مسئولیت بود:
«بارگذاری خطاهای زمان اجرا و بررسیهای هشدار که قبلاً به صورت دستی در مرورگر انجام میدادم، بسیار راحت شده است. همچنین خوشحالم که اکنون میتوانم عملیات پیچیده را به زبان طبیعی توصیف کنم و این ابزار از خواندن گزارشهای خطا مستقیماً به رفع مشکل بپردازد.»
موفقیت این گردش کار خودکار حتی باعث شده است که CyberAgent راهنمای داخلی Spindle Agents خود را برای عاملهای هوش مصنوعی خود بهروزرسانی کند. این راهنما اکنون Chrome DevTools MCP را به عنوان سرور اشکالزدایی پیشفرض برای عامل هوش مصنوعی خود، Claude، تعیین میکند و استفاده از آن را به عنوان بهترین روش رسمیت میبخشد و اعتماد خود را به این فرآیند جدید مبتنی بر هوش مصنوعی نشان میدهد.
اصلاحات اساسی در دو درخواست pull پیادهسازی شدند که میتوانید آنها را در گیتهاب بررسی کنید:
CyberAgent دستور را بیشتر پیش برد و این خروجی نهایی را منتشر کرد.
بازخورد و برنامههای آینده
CyberAgent از انعطافپذیری و تعداد گزینههای موجود در Chrome DevTools MCP راضی بود. آنها همچنین بازخورد ارزشمندی برای بهبودهای آینده ارائه دادند و خاطرنشان کردند که اگرچه این ابزار قدرتمند است، اما استفاده از ویژگیهای پیشرفتهتر آن نیاز به سطح خاصی از دانش کاربری دارد.
با نگاهی به آینده، این تیم علاقهمند به ادغام عمیقتر با پنل عملکرد DevTools است. آنها گردش کاری را تصور میکنند که در آن یک عامل بتواند Core Web Vitals را تأیید کند و سپس با استفاده از پنل عملکرد، به تجزیه و تحلیل عملکرد عمیقتری بپردازد تا آن را تجزیه و تحلیل کرده و بهبودهایی را پیشنهاد دهد.
کازوناری هارا، متخصص توسعهدهنده در CyberAgent، شگفتی خود را به اشتراک گذاشت و بر کارایی و پتانسیل این ابزار برای برنامههای آینده تأکید کرد:
«وقتی دیدم مرورگر بهطور خودکار خطاها را مستقیماً از گزارشها اصلاح میکند، شگفتزده شدم. کارهایی که قبلاً از قلم میافتادند یا زمان زیادی میبردند، اکنون میتوانند بهطور قابل اعتمادی خودکار شوند که این امر باعث بهبود کارایی توسعه میشود. از آنجایی که Chrome DevTools MCP ویژگیهای بسیار زیادی را در یک محیط زمان اجرا واقعی ارائه میدهد، انتظار دارم که در آینده در موقعیتهای مختلف بسیار مفید باشد.»
نتیجهگیری
با ادغام Chrome DevTools MCP در گردش کار خود، CyberAgent با موفقیت یک کار اشکالزدایی پیچیده و وقتگیر را خودکار کرد. تجربه آنها پتانسیل عظیم ابزارهای مبتنی بر هوش مصنوعی را برای افزایش بهرهوری توسعهدهندگان نشان میدهد.
این فرآیند به طور کامل خودکار شد، نیاز به بررسیهای دستی را از بین برد و اطمینان حاصل کرد که هیچ خطایی از قلم نیفتاده است. در حالی که پیادهسازی فعلی ارزش خود را ثابت کرده است، بازخورد CyberAgent آیندهای هیجانانگیز را برجسته میکند که در آن Chrome DevTools MCP میتواند وظایف تجزیه و تحلیل عملکرد و بهینهسازی پیچیدهتری را مستقیماً در مرورگر فعال کند.