जापान की एक प्रमुख आईटी कंपनी CyberAgent, कई तरह की ऑनलाइन सेवाएं देती है. इनमें लोकप्रिय Ameba ब्लॉगिंग प्लैटफ़ॉर्म भी शामिल है. टीम को रनटाइम की गड़बड़ियों से जुड़ी एक बड़ी समस्या का सामना करना पड़ा. इन गड़बड़ियों का पता ऑटोमेटेड टेस्टिंग से नहीं लगाया जा सका. इसलिए, इन्हें ठीक करने के लिए मैन्युअल तरीके से काफ़ी समय देना पड़ा.
इस दस्तावेज़ में बताया गया है कि CyberAgent ने मैन्युअल प्रोसेस से ऑटोमेटेड वर्कफ़्लो पर स्विच करने के लिए, Chrome DevTools Model Context Protocol (MCP) सर्वर का इस्तेमाल कैसे किया. इससे डेवलपर का समय बचा और उनके टेस्ट फ़्लो की विश्वसनीयता बेहतर हुई.
चुनौती: मैन्युअल और सीमित वर्कफ़्लो
Ameba का डिज़ाइन सिस्टम, Spindle है. यह फिर से इस्तेमाल किए जा सकने वाले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट का कलेक्शन है. इसका इस्तेमाल, ब्लॉगिंग प्लैटफ़ॉर्म का इंटरफ़ेस बनाने के लिए किया जाता है. यह यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट डेवलपमेंट और टेस्टिंग के लिए, Storybook पर निर्भर करता है.
पहले, रनटाइम की गड़बड़ियों को ठीक करने के लिए CyberAgent का वर्कफ़्लो, बार-बार दोहराया जाने वाला मैन्युअल साइकल था. डेवलपर, ब्राउज़र में हर कॉम्पोनेंट की जांच करेगा, गड़बड़ी को ठीक करेगा, और फिर से उसकी जांच करेगा. पेजों और कॉम्पोनेंट की संख्या ज़्यादा होने की वजह से, विज़ुअल पुष्टि पर निर्भर रहने की कुछ सीमाएं थीं. इसलिए, हर बग का पता लगाना मुश्किल हो गया था.
समाधान: Chrome DevTools MCP का इस्तेमाल करके एजेंट को डीबग करना
इस चुनौती से निपटने के लिए, टीम ने Chrome DevTools MCP सर्वर का इस्तेमाल किया. ऑनबोर्डिंग की आधिकारिक गाइड का इस्तेमाल करके, आसानी से सेटअप करने के बाद, उन्होंने एआई एजेंट (Claude) को पूरे डीबगिंग वर्कफ़्लो को ऑटोमेट करने का निर्देश दिया.
एक ही प्रॉम्प्ट की मदद से, एजेंट DevTools के साथ इंटरैक्ट कर सकता है. इसके लिए, उसे Chrome DevTools 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.
एआई एजेंट ने Storybook इंस्टेंस की ऑडिट की. इसके लिए, उसने पूरी कहानियों को नेविगेट किया, ताकि गड़बड़ियों को पढ़ा जा सके, कोड में सुधार किया जा सके, और हर सुधार के सही होने की पुष्टि की जा सके.
असर: मैन्युअल तरीके से जांच करने से लेकर अपने-आप ठीक होने तक
नतीजे जल्दी मिल गए. एआई एजेंट ने करीब एक घंटे में, स्पिंडल डिज़ाइन सिस्टम के सभी 32 कॉम्पोनेंट और 236 स्टोरी की अपने-आप जांच की.
एजेंट ने एक रनटाइम गड़बड़ी और दो चेतावनियों की पहचान करके उन्हें ठीक किया. हालांकि, एक्सपेरिमेंट की असली वैल्यू इस बात की पुष्टि करने में थी कि लाइब्रेरी का ज़्यादातर हिस्सा गड़बड़ी से मुक्त है. इसके लिए, डेवलपर को सैकड़ों स्थितियों पर मैन्युअल तरीके से क्लिक करने की ज़रूरत नहीं पड़ी.
पहले, इस तरह की पूरी ऑडिट को विज़ुअलाइज़ करना मुश्किल होता था. साथ ही, इसमें मानवीय गलतियां होने की आशंका भी बनी रहती थी. इस काम को Chrome DevTools MCP को सौंपने से, CyberAgent को ये फ़ायदे मिले:
- ऑडिट में 100% कवरेज: एजेंट ने हर कहानी की पुष्टि अपने-आप की. इससे यह पक्का किया गया कि "साफ़" कॉम्पोनेंट वाकई में साफ़ हैं. इस तरह की सावधानी को मैन्युअल तरीके से बनाए रखना मुश्किल है.
- कोई भी फ़ॉल्स नेगेटिव नहीं: ऑटोमेटेड टेस्टिंग सुइट, विज़ुअल रनटाइम की गड़बड़ियों का पता नहीं लगा पाते. हालांकि, एमसीपी सर्वर की मदद से एजेंट, ब्राउज़र की मौजूदा स्थिति की पुष्टि कर सकता है. इससे यह पक्का किया जा सकता है कि ब्राउज़र भरोसेमंद है.
- कॉग्निटिव ऑफलोडिंग: डेवलपर, सिस्टम पर भरोसा करके बार-बार किए जाने वाले "मेहनत वाले काम" को हैंडल कर सकते हैं. इससे उन्हें रूटीन की जांच के बजाय, जटिल लॉजिक पर फ़ोकस करने में मदद मिलती है.
वेब डेवलपर कोटा यानागी ने बताया कि इसका फ़ायदा यह था कि ज़िम्मेदारी में बदलाव हुआ:
"मुझे ब्राउज़र में मैन्युअल तरीके से रनटाइम की गड़बड़ियों और चेतावनियों की जांच करनी पड़ती थी. अब इस टूल की मदद से, यह काम आसानी से हो जाता है. मुझे यह भी पसंद है कि अब मैं सामान्य भाषा में मुश्किल कार्रवाइयों के बारे में बता सकता हूं. साथ ही, टूल को गड़बड़ी के लॉग पढ़ने से लेकर समस्या को ठीक करने तक का काम करने के लिए कह सकता हूं."
अपने-आप काम करने वाले इस वर्कफ़्लो की सफलता की वजह से, CyberAgent ने अपने एआई एजेंट के लिए, Spindle Agents की इंटरनल गाइड को भी अपडेट किया है. इस गाइड में, Chrome DevTools MCP को अब उनके एआई एजेंट, Claude के लिए डिफ़ॉल्ट डीबगिंग सर्वर के तौर पर सेट किया गया है. साथ ही, इसे सबसे सही तरीके के तौर पर इस्तेमाल करने की पुष्टि की गई है. इससे पता चलता है कि उन्हें एआई की मदद से काम करने वाली इस नई प्रोसेस पर भरोसा है.
इन समस्याओं को ठीक करने के लिए, दो पुल के अनुरोध किए गए थे. इन्हें GitHub पर देखा जा सकता है:
CyberAgent ने प्रॉम्प्ट को और बेहतर बनाया और इस फ़ाइनल आउटपुट को पब्लिश किया.
फ़ीडबैक और आने वाले समय के लिए प्लान
CyberAgent को Chrome DevTools MCP में उपलब्ध विकल्पों की संख्या और सुविधा पसंद आई. उन्होंने आने वाले समय में सुधार करने के लिए, अहम सुझाव/राय भी दी. उन्होंने बताया कि यह टूल बहुत काम का है, लेकिन इसकी ज़्यादा बेहतर सुविधाओं का इस्तेमाल करने के लिए, उपयोगकर्ता को इसके बारे में कुछ जानकारी होनी चाहिए.
आगे चलकर, टीम को DevTools के परफ़ॉर्मेंस पैनल के साथ बेहतर तरीके से इंटिग्रेट करने में दिलचस्पी है. वे एक ऐसे वर्कफ़्लो की कल्पना करते हैं जिसमें कोई एजेंट, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मान्य कर सकता है. इसके बाद, परफ़ॉर्मेंस पैनल का इस्तेमाल करके, परफ़ॉर्मेंस का ज़्यादा बारीकी से विश्लेषण कर सकता है. साथ ही, सुधार के सुझाव दे सकता है.
CyberAgent के डेवलपर एक्सपर्ट, काज़ुनारी हारा ने इस टूल की क्षमता और आने वाले समय में इसके इस्तेमाल की संभावनाओं के बारे में बताया:
"मुझे यह देखकर हैरानी हुई कि ब्राउज़र, लॉग से सीधे तौर पर गड़बड़ियों को अपने-आप ठीक कर रहा है. जिन कामों को पहले पूरा नहीं किया जा सका या जिन्हें पूरा करने में ज़्यादा समय लगता था उन्हें अब भरोसेमंद तरीके से अपने-आप पूरा किया जा सकता है. इससे डेवलपमेंट की प्रोसेस ज़्यादा बेहतर हो जाती है. Chrome DevTools MCP, रनटाइम एनवायरमेंट में कई सुविधाएं देता है. इसलिए, मुझे उम्मीद है कि आने वाले समय में यह कई मामलों में मददगार साबित होगा."
नतीजा
Chrome DevTools MCP को अपने वर्कफ़्लो में इंटिग्रेट करके, CyberAgent ने मुश्किल और समय लेने वाले डीबगिंग टास्क को अपने-आप पूरा होने की सुविधा के साथ उपलब्ध कराया. इनके अनुभव से पता चलता है कि एआई की मदद से काम करने वाले टूल, डेवलपर की परफ़ॉर्मेंस को बेहतर बनाने में काफ़ी मददगार साबित हो सकते हैं.
इस प्रोसेस को पूरी तरह से ऑटोमेटेड कर दिया गया है. इसलिए, मैन्युअल तरीके से जांच करने की ज़रूरत नहीं है. साथ ही, यह भी पक्का किया गया है कि कोई गड़बड़ी न छूटे. मौजूदा समय में लागू की गई सुविधा से पहले ही काफ़ी फ़ायदा मिल चुका है. हालांकि, CyberAgent से मिले सुझावों से पता चलता है कि आने वाले समय में Chrome DevTools MCP, ब्राउज़र में ही परफ़ॉर्मेंस का ज़्यादा बेहतर तरीके से विश्लेषण और ऑप्टिमाइज़ेशन कर पाएगा.