00:00:00तो, Chrome टीम ने आखिरकार एक अपडेट जारी किया है जो Chrome DevTools MCP सर्वर को
00:00:06Chrome के एक रनिंग इंस्टेंस से बात करने की अनुमति देता है ताकि लॉगिन पेज के पीछे की समस्याओं को डीबग किया जा सके,
00:00:12लाइव सेशन पर विश्लेषण किया जा सके और कुछ बेहतरीन डीबगिंग चीजें जैसे कि
00:00:17चुने गए एलिमेंट, विशिष्ट एरर्स और नेटवर्क एक्टिविटीज़ तक पहुँच प्राप्त की जा सके।
00:00:21लेकिन Agent Browser और Playwright जैसे अन्य AI ब्राउज़र डीबगिंग टूल्स के साथ, जो स्किल और MCP सर्वर के साथ CLI भी देते हैं,
00:00:26क्या यह कुछ ऐसा है जिसे Chrome DevTools MCP को भविष्य में
00:00:31जोड़ने की आवश्यकता होगी?
00:00:33सब्सक्राइब बटन दबाएं और आइए पता लगाते हैं।
00:00:35कुछ महीने पहले, Anjis ने Chrome DevTools MCP सर्वर का
00:00:44एक बेहतरीन ओवरव्यू देते हुए एक वीडियो बनाया था, लेकिन उस समय यह केवल एक नया Chrome सेशन शुरू कर सकता था,
00:00:49या आप इसे रिमोट डीबगिंग पोर्ट से भी जोड़ सकते थे, लेकिन उसके लिए बहुत सारे मैनुअल सेटअप की आवश्यकता थी।
00:00:53लेकिन अब Chrome वर्ज़न 144 और उससे ऊपर में, रिमोट डीबगिंग फ्लैग ऑन होने पर, Chrome
00:00:58MCP टूल अब अपने आप एक खुले सेशन का पता लगा लेगा, जिसका उपयोग डीबगिंग के लिए किया जा सकता है, जो
00:01:04मेरे लिए व्यक्तिगत रूप से गेम-चेंजर है क्योंकि मैं टर्मिनल में Claude कोड का उपयोग करना पसंद करता हूँ और इसका मतलब है
00:01:09कि मुझे Deer, Comet और यहाँ तक कि Claude Chrome एक्सटेंशन जैसे AI ब्राउज़र
00:01:15या React Grab जैसे उपयोगी AI डीबगिंग टूल्स का उपयोग करने की आवश्यकता नहीं है।
00:01:18आइए इन नई Chrome DevTools MCP सुविधाओं को एक्शन में देखते हैं।
00:01:22सबसे पहले आपको ऑटो कनेक्ट विकल्प के साथ MCP सर्वर इंस्टॉल करना होगा।
00:01:27मैं ओपन कोड का उपयोग कर रहा हूँ, लेकिन यह कई एजेंट हार्नेस को सपोर्ट करता है और Chrome के अंदर
00:01:31आपको इस URL पर जाना होगा और सुनिश्चित करना होगा कि आपने यह विकल्प ऑन किया है।
00:01:36अब पहले आपको इस तरह के कमांड के साथ एक सेशन शुरू करना पड़ता था और एजेंट
00:01:40HTTP के माध्यम से एक्सपोज़्ड पोर्ट से कनेक्ट होता था।
00:01:43लेकिन इस UI के अंदर नए तरीके से, आप Chrome को सामान्य रूप से शुरू कर सकते हैं जिसमें आपकी सभी
00:01:48कुकीज़, हिस्ट्री और सब कुछ तक पहुँच होगी, और काम पूरा होने पर आप इसे बंद कर सकते हैं।
00:01:53अब यदि आप सुरक्षा के प्रति सचेत हैं, तो वीडियो में आगे, मैं आपको दिखा सकता हूँ कि Chrome के
00:01:57एक अधिक प्राइवेट वर्ज़न से कैसे कनेक्ट किया जाए।
00:01:59लेकिन उन दो चीजों को करने के बाद, यानी इस विकल्प को टॉगल करने और ऑटो कनेक्ट विकल्प के साथ
00:02:04MCP सर्वर से कनेक्ट करने के बाद, बस इतना ही करना है।
00:02:08मैं अपने एजेंट से Betastack के परफॉरमेंस की जांच करने के लिए कह सकता हूँ और Chrome के अंदर, मुझे यह
00:02:12पॉप-अप मिलेगा जिसमें पूछा जाएगा कि क्या मैं रिमोट डीबगिंग की अनुमति देना चाहता हूँ और फिर ऊपर यह बैनर दिखाई देगा।
00:02:17अब एजेंट Betastack वेबसाइट पर नेविगेट करने में सक्षम हो गया है और अब यह
00:02:21लाइटहाउस ऑडिट टूल का उपयोग करके मुझे कुछ बेहतरीन वेब वाइटल्स, लाइटहाउस स्कोर और कुछ अन्य विवरण दे रहा है।
00:02:27लेकिन अब चलिए कुछ उपयोगी करते हैं।
00:02:29यहाँ एक भाषा सीखने वाला ऐप है जिस पर मैं काम कर रहा हूँ।
00:02:31मैंने एडमिन के रूप में लॉगिन किया है, कंटेंट, एक विशिष्ट यूनिट और फिर इस एक्सरसाइज पर गया हूँ।
00:02:37और मैंने एक्सरसाइज मोडल पर गौर किया है कि यहाँ नीचे सेव बटन
00:02:42साइट के अन्य बटनों से अलग है।
00:02:44इसलिए एजेंट को मैन्युअल रूप से अपने स्टेप्स दोहराने के लिए कहने के बजाय, यानी लॉगिन करना और
00:02:49इस विशिष्ट पेज पर नेविगेट करना, मैं इंस्पेक्ट टूल्स में इस सेव बटन को चुनूंगा और फिर
00:02:55एजेंट से पूछूंगा कि क्या वे मेरे द्वारा चुने गए एलिमेंट को देख सकते हैं।
00:02:58और थोड़ी देर बाद, यह देख पाता है कि मैंने सेव बटन चुना है।
00:03:02तो अब मैं इसे सेव बटन के स्टाइल को नए एक्सरसाइज
00:03:06बटन की तरह बदलने के लिए कहूंगा, जो कि यहाँ वाला बटन है अगर आप देख सकें।
00:03:09और कुछ सेकंड बाद, इसने बटन के स्टाइल को बिल्कुल वैसा ही बदल दिया जैसा मैं चाहता था।
00:03:13लेकिन अगर आप MCP सर्वर को सैंडबॉक्स वातावरण में चला रहे हैं, तो आपको HTTP के रूप में रिमोट डीबगिंग के लिए
00:03:18पोर्ट के साथ ब्राउज़र URL विकल्प का उपयोग करना होगा, न कि WebSockets का।
00:03:23और यदि आप सुरक्षा के प्रति सचेत हैं, तो आपको MCP सर्वर के एक विकल्प के रूप में एक विशिष्ट स्थान के साथ
00:03:28यूज़र डेटा डायरेक्टरी जोड़नी होगी, जिसका अर्थ होगा कि एजेंटों के पास आपकी
00:03:33मौजूदा कुकीज़, पासवर्ड, ब्राउज़र हिस्ट्री और बहुत कुछ तक पहुँच नहीं होगी।
00:03:36और यदि आप चाहते हैं कि एजेंट के पास उन तक पहुँच हो, तो आपको उन साइटों पर फिर से लॉगिन करना होगा।
00:03:41अब यह जितना कूल है, अगर आपने मेरे पिछले कोई भी वीडियो देखे हैं, तो आप जानते होंगे कि मैं
00:03:46MCP सर्वर का बहुत बड़ा प्रशंसक नहीं हूँ क्योंकि यदि आपके पास बहुत सारे सर्वर हैं तो वे
00:03:51बहुत अधिक कॉन्टेक्स्ट का उपयोग करते हैं।
00:03:52लेकिन सौभाग्य से, Chrome DevTools MCP सर्वर आपको CLI के साथ सब कुछ करने की अनुमति देता है,
00:03:59जिसके बारे में बहुत कम लोग जानते हैं क्योंकि यह एक तरह से छिपा हुआ है क्योंकि आपको
00:04:04इस एक्सपेरिमेंटल फीचर के बारे में जानने के लिए स्किल्स डायरेक्टरी और फिर Chrome DevTools CLI में जाना होगा,
00:04:10जो आपके एजेंट को इसके उपयोग के बारे में जानकारी देता है।
00:04:12और यदि आपने इसे पहले से इंस्टॉल नहीं किया है तो कुछ इंस्टॉलेशन निर्देश भी देता है।
00:04:16यह मूल रूप से MCP सर्वर के चारों ओर एक पतला रैपर है।
00:04:20और यदि आप इसे पहले से ही एक एजेंट हार्नेस के अंदर चला रहे हैं, तो यह CLI उसका उपयोग नहीं करेगा क्योंकि
00:04:24यह अपने स्वयं के डेमन का उपयोग करता है।
00:04:26यह कमांड आपको चलने वाले डिफॉल्ट डेमन के बारे में जानकारी देता है और आप पहले से ही
00:04:30देख सकते हैं कि इसने हेडलेस और आइसोलेटेड जैसे कुछ अन्य फ्लैग के साथ ब्राउज़र URL फ्लैग सेट किया है।
00:04:34लेकिन आप यह भी देखेंगे कि उपलब्ध CLI विकल्पों में कोई ऑटो कनेक्ट नहीं है।
00:04:39इसलिए यदि आपने टर्मिनल के माध्यम से Chrome नहीं चलाया है, तो आपको इस मौजूदा को छोड़ना होगा और फिर
00:04:43इसे इस तरह से चलाना होगा, यह सुनिश्चित करते हुए कि यदि आपके पास रिमोट डीबगिंग पोर्ट फ्लैग है, तो
00:04:48आपके पास यूज़र डेटा फ्लैग भी होना चाहिए।
00:04:50तो अब इसके साथ, मैं इस तरह से डेमन शुरू कर सकता हूँ, पेजों की सूची प्राप्त कर सकता हूँ, जो
00:04:54केवल एक नया टैब दिखाता है क्योंकि फिलहाल वहां बहुत कुछ नहीं है।
00:04:57लेकिन निश्चित रूप से, असली शक्ति तब आती है जब आप इसे किसी एजेंट के साथ उपयोग करते हैं।
00:05:01इसलिए यदि मैं Chrome MCP टूल को बंद कर देता हूँ, DevTools में इस बटन को चुनता हूँ और एजेंट से
00:05:06CLI का उपयोग करके यह पता लगाने के लिए कहता हूँ कि कौन सा एलिमेंट चुना गया है, तो हम देख सकते हैं कि यह
00:05:10पता लगाने में सक्षम रहा है।
00:05:11ध्यान दें कि यूज़र डेटा डायरेक्टरी की जानकारी सेशन के बीच बनी रहती है।
00:05:15इसलिए यह मेरी सभी कुकीज़, ब्राउज़र जानकारी आदि को सुरक्षित रखता है।
00:05:19इसके अलावा और भी बहुत सी चीज़ें हैं जो Chrome DevTools CLI कर सकता है।
00:05:22इसलिए मैं आपको सलाह देता हूँ कि आप जाकर इस स्किल को देखें और शायद भविष्य में,
00:05:26वे ऑटो कनेक्ट फीचर पेश कर सकें।
00:05:28तो यह रहा, Chrome DevTools MCP सर्वर और CLI की कुछ नई बेहतरीन विशेषताओं का
00:05:32एक त्वरित रन-थ्रू, जो कोडिंग सहायकों के साथ आपके डीबगिंग अनुभव को निश्चित रूप से
00:05:38बेहतर बनाएगा।
00:05:39एक Arc उपयोगकर्ता के रूप में, हाँ, मैं अभी भी Arc का उपयोग करता हूँ, मैं वास्तव में चाहता हूँ कि यह सुविधा भविष्य में इसमें आए।
00:05:45लेकिन तब तक, मैं Vassal के एजेंट ब्राउज़र का उपयोग करके खुश हूँ, जो
00:05:50मेरे लिए वास्तव में अच्छा काम कर रहा है।
00:05:51और यदि आप एजेंट ब्राउज़र के बारे में कुछ नहीं जानते हैं, तो मेरा वह वीडियो देखें जो मैंने कुछ समय पहले बनाया था, हालाँकि
00:05:55तब से इसमें काफी सुधार हुआ है।
00:05:58तो शायद मेरे लिए एक और वीडियो बनाने का समय आ गया है।