एजेंट के लिए Chrome DevTools में, कमांड-लाइन इंटरफ़ेस (सीएलआई) शामिल होता है. इसकी मदद से, आपका कोडिंग एजेंट या आप, DevTools के टूल को स्टैंडर्ड शेल कमांड के तौर पर चला सकते हैं. एमसीपी सर्वर के ज़रिए टूल को डाइनैमिक तौर पर कॉल करने के बजाय, आपका एजेंट शेल कमांड के तौर पर वही कार्रवाइयां लिखता है. साथ ही, उन्हें एक स्क्रिप्ट में जोड़ सकता है, जिसे किसी भी समय फिर से चलाया जा सकता है. उदाहरण के लिए, आपका एजेंट इस तरह की स्क्रिप्ट जनरेट कर सकता है:
chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"
एमसीपी सर्वर और सीएलआई, दोनों एक ही इंजन से कनेक्ट होते हैं: एक परसिस्टेंट बैकग्राउंड डीमन, जो Chrome DevTools Protocol (सीडीपी) के ज़रिए Chrome से इंटरैक्ट करता है. इनमें अंतर यह है कि आपका एजेंट उस इंजन तक कैसे पहुंचता है:
- एमसीपी सर्वर: आपका एजेंट, JSON-RPC का इस्तेमाल करके स्टैंडर्ड इनपुट/आउटपुट से कनेक्ट करता है. साथ ही, हर ब्राउज़र टूल को इंटरैक्टिव फ़ंक्शन कॉल के तौर पर इस्तेमाल करता है.
- सीएलआई: आपका एजेंट, सीधे उसी बैकग्राउंड डीमन के लिए शेल कमांड को एक्ज़ीक्यूट करता है.
सीएलआई का इस्तेमाल करके, ये काम किए जा सकते हैं:
- वर्कफ़्लो को सेव करना: एक्सप्लोरेटरी डीबगिंग सेशन के दौरान, आपके एजेंट ने जो कार्रवाइयां की हैं उन्हें फिर से इस्तेमाल की जा सकने वाली स्क्रिप्ट में बदलें.
- ऐप्लिकेशन की स्थिति को फिर से जनरेट करना: फिर से डीबग करने से पहले, ब्राउज़र को पहले वाली स्थिति में वापस लाने के लिए, स्क्रिप्ट को फिर से चलाएं.
- बैच ऐक्शन: नेविगेशन, इनपुट, एम्युलेशन, और जांच के निर्देशों का क्रम चलाएं. इसके लिए, हर चरण के बीच बातचीत करने की ज़रूरत नहीं है.
- एआई एजेंट के बिना स्क्रिप्ट चलाना: जनरेट की गई स्क्रिप्ट को किसी भी टर्मिनल, सबशेल या सीआई कंटेनर से चलाया जा सकता है. इसके लिए, किसी चालू एलएलएम सेशन या एमसीपी क्लाइंट की ज़रूरत नहीं होती.
सीएलआई और एमसीपी सर्वर में से कोई एक चुनें
सीएलआई और एमसीपी सर्वर में से किसी एक को चुनना, लागत, कॉन्टेक्स्ट, और वर्कफ़्लो से जुड़ा एक इंजीनियरिंग फ़ैसला है.
- कॉन्टेक्स्ट विंडो की लागत: एमसीपी सर्वर को रजिस्टर करने पर, हर टूल की परिभाषा और JSON स्कीमा को हर बातचीत में आपके एलएलएम के सिस्टम प्रॉम्प्ट में इंजेक्ट किया जाता है. सीएलआई स्किल की मदद से, आपका एजेंट सिर्फ़ एक छोटा मार्कडाउन की खास जानकारी लोड करता है. साथ ही, जब वह पूरी स्किल को पढ़ने और ज़रूरी कमांड बनाने का फ़ैसला करता है, तब टोकन की लागत का पेमेंट करता है. एजेंट के साथ लंबे और कई बार होने वाले सेशन के लिए, यह अंतर लागत और इंतज़ार के समय, दोनों में जुड़ जाता है.
- एक्सप्लोर करना बनाम लागू करना: एमसीपी टूल, डाइनैमिक और एक्सप्लोरेटरी डीबगिंग में बेहतरीन होते हैं. ऐसा तब होता है, जब आपको या आपके एजेंट को यह नहीं पता होता कि आपको क्या जांच करनी है. आपका एजेंट, उपलब्ध सभी टूल के बारे में पहले से जानता है. इसलिए, इस बात की ज़्यादा संभावना है कि वह अपने लक्ष्य को हासिल करने के लिए उनका इस्तेमाल करे. जब पाथ पहले से पता हो, तो सीएलआई आपको सिर्फ़ ज़रूरी चरणों को चलाने की अनुमति देता है.
- फिर से इस्तेमाल करने की सुविधा: सीएलआई स्क्रिप्ट को सेव किया जा सकता है, उसे किसी स्किल में फिर से इस्तेमाल किया जा सकता है या एजेंट लूप के बाहर मैन्युअल तरीके से चलाया जा सकता है. एमसीपी टूल कॉल के लिए ऐसा नहीं किया जा सकता.
| एमसीपी सर्वर का इस्तेमाल तब करें, जब | सीएलआई का इस्तेमाल तब करें, जब |
|---|---|
| आपको किसी ऐसी समस्या की जांच करनी है जिसके बारे में आपको जानकारी नहीं है और आपको उपलब्ध सभी टूल की ज़रूरत है. | आपको पहले से ही चरणों की जानकारी है और आपको उन्हें भरोसेमंद तरीके से दोहराना है. |
| आपको लाइव और डाइनैमिक तरीके से समस्याओं को हल करना है. साथ ही, ब्राउज़र की बारीकी से जांच करनी है. | आपको एजेंट की ऐसी स्किल चाहिए जो कम टोकन इस्तेमाल करती हों या टर्मिनल पर आधारित ऑटोमेशन चाहिए. |
| आपका एजेंट, एमसीपी की सुविधा वाले आईडीई या क्लाइंट में चलता है. | आपका एनवायरमेंट, एमसीपी क्लाइंट के साथ काम नहीं करता. |
सीएलआई का इस्तेमाल करते समय, इन बातों का ध्यान रखें:
- टूल कवरेज: सीएलआई, एजेंट के लिए Chrome DevTools के ज़्यादातर टूल के साथ काम करता है. ये टूल, शेल-आधारित ऑटोमेशन के लिए इस्तेमाल किए जाते हैं. कमांड की पूरी सूची देखने के लिए, सीएलआई स्किल का रेफ़रंस देखें.
- इंप्लिसिट स्टार्टअप: पहली बार इस्तेमाल करने पर, बैकग्राउंड सर्वर अपने-आप चालू हो जाता है. आपको हर निर्देश से पहले
start,statusयाstopको चलाने की ज़रूरत नहीं है. - परसिस्टेंट स्टेट: ब्राउज़र की स्थिति, सभी कमांड में बनी रहती है. इसलिए, अगर आपने किसी कमांड में कोई पेज खोला है, तो वह अगले कमांड में भी उपलब्ध रहेगा. हालांकि, ऐसा तब ही होगा, जब उसे साफ़ तौर पर बंद न किया गया हो.
- पेज आईडी और एलिमेंट यूआईडी: ज़्यादातर कमांड, पेज आईडी को अपने पहले आर्ग्युमेंट के तौर पर लेते हैं. इसे ढूंढने के लिए,
chrome-devtools list_pagesचलाएं. साथ ही, जिन एलिमेंट के साथ आपको इंटरैक्ट करना है उनके यूआईडी पाने के लिए,chrome-devtools take_snapshotचलाएं. - आउटपुट फ़ॉर्मैट: आउटपुट, डिफ़ॉल्ट रूप से Markdown जैसे सादे टेक्स्ट में होता है. अगर आपको नतीजों को अन्य स्क्रिप्ट या सीआई पाइपलाइन में इस्तेमाल करना है, तो
--output-format=jsonपास करें. - फ़ाइल का ऐक्सेस: डिफ़ॉल्ट रूप से, सीएलआई के पास फ़ाइल सेव करने के पैरामीटर और
upload_fileके लिए, फ़ाइल सिस्टम का पूरा ऐक्सेस होता है. फ़ाइल के ऐक्सेस को ओएस की अस्थायी डायरेक्ट्री तक सीमित करने के लिए,--allowUnrestrictedPaths=falseपास करें. - सीआई में Lighthouse: सीएलआई से
lighthouse_auditको चलाया जा सकता है. हालांकि, अगर आपको सीआई में सिर्फ़ Lighthouse स्कोर चाहिए, तो स्टैंडअलोन Lighthouse सीएलआई और इसके GitHub Actions ज़्यादा आसान विकल्प हैं. - ब्राउज़र ऑटोमेशन स्क्रिप्ट की तुलना में आसान ऐब्स्ट्रैक्शन: JavaScript या TypeScript में पूरी Puppeteer या Playwright स्क्रिप्ट लिखने के बजाय, DevTools सीएलआई एक सीमित और टारगेट किया गया एपीआई उपलब्ध कराता है. इस शेल सिंटैक्स को पढ़ना और मैनेज करना आसान है. साथ ही, कम क्षमता वाले मॉडल भी बिना किसी गड़बड़ी के इसे आसानी से जनरेट कर सकते हैं.
ज़रूरी शर्तें
सीएलआई का इस्तेमाल करने से पहले, पक्का करें कि आपके पास ये चीज़ें हों:
- एजेंट के लिए Chrome DevTools इंस्टॉल किया गया है: शुरुआती निर्देश देखें. एजेंट के लिए बने प्लग इन और एक्सटेंशन (जैसे, Gemini CLI एक्सटेंशन) में, एमसीपी सर्वर के साथ-साथ एजेंट की स्किल भी शामिल होती हैं.
- आपके शेल में उपलब्ध सीएलआई: इसे सिर्फ़ एक बार इंस्टॉल करना होता है. यह एजेंट के सामान्य वर्कफ़्लो का हिस्सा नहीं है. इंस्टॉलेशन रेफ़रंस देखें.
chrome-devtools-cliस्किल (एजेंट के लिए Chrome DevTools के साथ इंस्टॉल की गई): इस स्किल से आपके एजेंट को सीएलआई की मदद से, शेल स्क्रिप्ट लिखने या शेल कमांड चलाने का तरीका पता चलता है.
निर्देश का स्ट्रक्चर
कमांड, chrome-devtools <tool> [arguments] [flags] पैटर्न के मुताबिक होते हैं.
ज़रूरी आर्ग्युमेंट, पोज़िशनल होते हैं और वैकल्पिक आर्ग्युमेंट, फ़्लैग का इस्तेमाल करते हैं. किसी भी निर्देश के बारे में ज़्यादा जानकारी पाने के लिए, --help का इस्तेमाल करें.
उदाहरण के लिए:
chrome-devtools new_page "https://example.com" # Open a page
chrome-devtools list_pages # Find the page ID
chrome-devtools take_snapshot 1 # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello" # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"
Chrome DevTools सीएलआई के इस्तेमाल के उदाहरण
अपने एजेंट को निर्देश दें कि वह हर सेशन में एक ही ब्राउज़र फ़्लो को फिर से हल करने के बजाय, उन चरणों को स्क्रिप्ट के तौर पर कैप्चर करे जो उसने पहले ही तय कर लिए हैं.
डीबग करने के सेशन को फिर से इस्तेमाल की जा सकने वाली स्क्रिप्ट के तौर पर सेव करना
एमसीपी पर डीबगिंग सेशन के बाद, अक्सर इस बात की गारंटी नहीं दी जा सकती कि वही समस्या दोबारा नहीं आएगी. अगली बार, गड़बड़ी को फिर से पैदा करने के चरणों को दोबारा बताने के बजाय, अपने एजेंट से कहें कि वह उस फ़्लो को लिख दे जिसे उसने अभी-अभी लागू किया है.
प्रॉम्प्ट का उदाहरण:
Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.
एजेंट के काम करने का उदाहरण: आपका एजेंट, सेशन के दौरान नेविगेशन, इनपुट, और जांच के चरणों की समीक्षा करता है. इसके बाद, वह उन्हें chrome-devtools कमांड के क्रम में बदलता है. उदाहरण के लिए, new_page, take_snapshot, fill, click, और list_console_messages. यह स्क्रिप्ट को test.sh के तौर पर सेव करता है. अगली बार इस हिस्से को डीबग करते समय, अपने एजेंट को स्क्रिप्ट पर ले जाएं, ताकि वह फिर से उसी स्थिति में पहुंच सके. इसके अलावा, मैन्युअल तरीके से डीबग करने के लिए, इसे एजेंट लूप के बाहर चलाएं.
जांच करने से पहले, ऐप्लिकेशन की स्थिति को फिर से जनरेट करना
कई चरणों वाली चेकआउट प्रोसेस या फ़िल्टर किए गए डैशबोर्ड जैसी जटिल स्थितियों को, बातचीत के ज़रिए हर बार फिर से बनाना एजेंट के लिए मुश्किल होता है. किसी नई जांच की शुरुआत करने के लिए, सेव की गई स्क्रिप्ट का इस्तेमाल करें.
प्रॉम्प्ट का उदाहरण:
Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.
एजेंट के काम करने का उदाहरण: आपका एजेंट स्क्रिप्ट को चलाता है. यह स्क्रिप्ट, चेकआउट पेज पर जाती है, पते का फ़ॉर्म भरती है, और शिपिंग का विकल्प चुनती है. ब्राउज़र की स्थिति सभी निर्देशों के दौरान बनी रहती है. इसलिए, आपका एजेंट उसी पेज पर take_snapshot और evaluate_script का इस्तेमाल करता है, ताकि बटन की स्थिति और पेमेंट सिलेक्टर से जुड़े इवेंट हैंडलर की जांच की जा सके.
अलग-अलग व्यूपोर्ट पर विज़ुअल की एक साथ जांच करना
अलग-अलग साइज़ की स्क्रीन पर लेआउट में हुए बदलाव की पुष्टि करना, बार-बार किया जाने वाला काम है. आम तौर पर, इसे मैन्युअल तरीके से किया जाता है. अपने एजेंट से ऐसी स्क्रिप्ट मांगें जो एम्युलेशन सेटिंग लागू करती हो और हर सेटिंग के लिए एक ही बार में सबूत कैप्चर करती हो.
प्रॉम्प्ट का उदाहरण:
Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.
एजेंट के एक्ज़ीक्यूशन का उदाहरण: आपका एजेंट एक लूप लिखता है, जो हर व्यूपोर्ट के लिए chrome-devtools emulate 1 --viewport "<size>" और फिर chrome-devtools
take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png" को कॉल करता है. सीएसएस में हर बदलाव के बाद, स्क्रिप्ट को फिर से चलाया जा सकता है. इसके लिए, आपको बातचीत खोलने की ज़रूरत नहीं है.
ऐसे फ़्लो की स्मोक-टेस्टिंग करना जिसमें कोई एमसीपी क्लाइंट उपलब्ध न हो
सीआई कंटेनर या लॉक किए गए एंटरप्राइज़ सेटअप जैसे कुछ एनवायरमेंट, एमसीपी क्लाइंट के साथ काम नहीं करते. हर टर्मिनल, सबशेल, सीआई कंटेनर, और एजेंट फ़्रेमवर्क में स्टैंडर्ड शेल स्क्रिप्ट चलाने और stdout को पढ़ने की सुविधा होती है. इस वजह से, सीएलआई का इस्तेमाल करके इन जगहों पर आसानी से जांच की जा सकती है.
प्रॉम्प्ट का उदाहरण:
Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.
एजेंट के काम करने का उदाहरण: आपका एजेंट एक स्क्रिप्ट लिखता है, जो new_page, take_snapshot, fill, और click का इस्तेमाल करती है. इसके बाद, वह list_console_messages 1
--types error --output-format=json को कॉल करता है और JSON आउटपुट को पार्स करके, एक्ज़िट कोड तय करता है.
वर्कफ़्लो को एक आसान स्किल के तौर पर पैकेज करना
अगर कोई फ़्लो अलग-अलग प्रोजेक्ट या टीम के सदस्यों के लिए काम का है, तो आपका एजेंट स्क्रिप्ट को किसी स्किल में रैप कर सकता है. यह DevTools सीएलआई स्किल है: यह एक आसान रेफ़रंस है, जो आपके एजेंट को ब्राउज़र के खास निर्देश चलाने की सुविधा देता है. इसके लिए, सभी टूल के लिए टोकन की कीमत पहले से चुकाने की ज़रूरत नहीं होती.
प्रॉम्प्ट का उदाहरण:
Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.
एजेंट के काम करने का उदाहरण: आपका एजेंट एक SKILL.md बनाता है. इसमें एक नाम, एक लाइन में यह जानकारी कि स्किल कब लागू होती है, और स्क्रिप्ट का रेफ़रंस देने वाले निर्देश शामिल होते हैं. बाद के सेशन में, एजेंट स्किल को सिर्फ़ तब पढ़ता है, जब टास्क उसके ब्यौरे से मेल खाता हो.
अगले चरण
- सीएलआई कमांड और फ़्लैग की पूरी सूची देखने के लिए, सीएलआई स्किल का रेफ़रंस देखें.
- अंडरलाइंग सर्वर (हेडलेस मोड, चैनल, एक्सपेरिमेंटल कैटगरी) को कॉन्फ़िगर करने के लिए, कॉन्फ़िगरेशन देखें.