Chrome DevTools MCP: एआई-संचालित ब्राउज़र ऑटोमेशन और डीबगिंग

एआई एजेंट्स की समझ को गहरा करने और यह जानने के लिए कि Chrome DevTools MCP जैसे टूल बड़े परिदृश्य में कैसे फिट होते हैं, DataCamp का Introduction to AI Agents कोर्स या AI Agent Fundamentals स्किल ट्रैक देखें।

Chrome DevTools MCP, Chrome DevTools टीम का एक आधिकारिक Model Context Protocol सर्वर है, जो एआई कोडिंग असिस्टेंट्स को प्राकृत भाषा के माध्यम से Chrome को नियंत्रित करने देता है। स्क्रिप्ट लिखने के बजाय, आप अपने एआई असिस्टेंट से बताते हैं कि क्या चाहिए ("इस पेज पर जाएँ और कंसोल एरर्स देखें" या "यह फॉर्म भरें और एक स्क्रीनशॉट लें"), और वह तकनीकी विवरण संभाल लेता है। 

यह सर्वर आपको शक्तिशाली ब्राउज़र ऑटोमेशन और डीबगिंग टूल्स तक पहुँच देता है। यह Puppeteer पर बनाया गया है, इसलिए विश्वसनीय है और पूरी तरह आपकी मशीन पर चलता है। आपको Puppeteer का एक भी लाइन कोड नहीं लिखना पड़ता।

इस ट्यूटोरियल में, आप सीखेंगे कि Claude, Cursor और Cline जैसे एआई कोडिंग असिस्टेंट्स के साथ इस MCP सर्वर का उपयोग कैसे करें। हम इंस्टॉलेशन और कॉन्फ़िगरेशन कवर करेंगे, फिर कोर क्षमताओं—ब्राउज़र ऑटोमेशन, डीबगिंग, और इंस्पेक्शन—पर जाएँगे। पूरे लेख में हम Conduit (demo.realworld.io), एक Medium-स्टाइल ब्लॉगिंग प्लेटफ़ॉर्म, का उपयोग वास्तविक उदाहरणों के लिए करेंगे।

यदि आप Model Context Protocol में नए हैं, तो मैं सुझाव दूँगा कि आप MCP के बारे में यह व्यापक गाइड देखें, जो बताता है कि MCP एआई मॉडलों को बाहरी टूल्स से कैसे जोड़ता है। आप हमारा Claude for Chrome ट्यूटोरियल और सर्वश्रेष्ठ एआई ब्राउज़र्स पर हमारा मार्गदर्शक भी देख सकते हैं। एआई ब्राउज़र ऑटोमेशन के एक अलग दृष्टिकोण के लिए हमारा ChatGPT Atlas ट्यूटोरियल पढ़ें।

संक्षेप में

• Chrome DevTools MCP एक आधिकारिक MCP सर्वर है जो एआई कोडिंग असिस्टेंट्स को प्राकृत भाषा के माध्यम से Chrome नियंत्रित करने देता है

• यह 6 श्रेणियों में 26 टूल्स उपलब्ध कराता है: इनपुट ऑटोमेशन, नेविगेशन, डीबगिंग, नेटवर्क, परफॉर्मेंस, और इम्यूलेशन

• Claude Code के लिए claude mcp add chrome-devtools npx chrome-devtools-mcp@latest से इंस्टॉल करें (अन्य क्लाइंट्स में सेटअप समान है)

• Puppeteer स्क्रिप्ट लिखे बिना नेविगेशन, फॉर्म भरना, और स्क्रीनशॉट कैप्चर जैसे ब्राउज़र कार्य ऑटोमेट करें

• कंसोल एरर्स, नेटवर्क रिक्वेस्ट्स की जाँच और JavaScript चलाकर वेब ऐप्स को—सिर्फ बातचीत के जरिए—डीबग करें

• एआई को हर चरण पर अपने काम की पुष्टि के लिए स्क्रीनशॉट लेने दें और फ्रंटएंड्स को क्रमिक रूप से बनाएं

Chrome DevTools MCP क्या है?

अंदरुनी तौर पर आर्किटेक्चर ऐसे काम करता है।

सर्वर 6 श्रेणियों में व्यवस्थित 26 टूल्स एक्सपोज़ करता है:

• इनपुट ऑटोमेशन (7 टूल): click, drag, fill, fill_form, handle_dialog, hover, upload_file
• नेविगेशन (7 टूल): navigate_page, new_page, list_pages, select_page, close_page, navigate_page_history, wait_for
• डीबगिंग (4 टूल): evaluate_script, list_console_messages, take_screenshot, take_snapshot
• नेटवर्क (2 टूल): list_network_requests, get_network_request
• परफॉर्मेंस (3 टूल): performance_start_trace, performance_stop_trace, performance_analyze_insight
• इम्यूलेशन (3 टूल): emulate_cpu, emulate_network, resize_page

ब्राउज़र ऑटोमेशन बातचीत-संचालित हो जाता है। Puppeteer स्क्रिप्ट लिखने और CSS सेलेक्टर्स डीबग करने के बजाय, आप अपनी ज़रूरत प्राकृत भाषा में बताते हैं। एआई असिस्टेंट तकनीकी बारीकियाँ समझकर काम करता है।

Chrome DevTools MCP बनाम पारंपरिक तरीके

इन टूल्स के साथ, आपका एआई असिस्टेंट आपकी मदद कर सकता है:

• एजेंट को हर चरण पर स्क्रीनशॉट लेने देकर क्रमिक रूप से फ्रंटएंड बनाना
• एंड-टू-एंड यूज़र फ़्लोज़ का परीक्षण, जैसे साइन अप करना, फ़ीचर्स में नेविगेट करना, और हर चरण के काम करने की पुष्टि करना
• DevTools मैन्युअली खोले बिना कंसोल एरर्स और नेटवर्क रिक्वेस्ट्स देखकर समस्याएँ डीबग करना
• विभिन्न पेजों या ऐप स्टेट्स के स्क्रीनशॉट लेकर विज़ुअल डॉक्युमेंटेशन ऑटोमेट करना
• पेज कॉन्टेक्स्ट में सीधे JavaScript चलाकर वेब पेजों से डेटा निकालना

यह सब Puppeteer स्क्रिप्ट लिखने के बजाय प्राकृत भाषा कमांड्स से ट्रिगर होता है।

Chrome DevTools MCP, थ Claude Desktop, Cursor, Cline, और VSCode Copilot के साथ काम करता है। चूँकि यह कई MCP सर्वरों में से एक है, आप इसे अन्य—जैसे फ़ाइल सिस्टम एक्सेस, डेटाबेस टूल्स और APIs—के साथ जोड़कर बहु-टूल वर्कफ़्लो बना सकते हैं।

Chrome DevTools MCP इंस्टॉलेशन और सेटअप

आपको कुछ चीज़ों की ज़रूरत होगी:

• आपकी मशीन पर Node.js और npm इंस्टॉल हों
• एक MCP-संगत एआई कोडिंग असिस्टेंट (हम इस ट्यूटोरियल में Claude Code का उपयोग करेंगे)
• Chrome ब्राउज़र (Puppeteer इसे ऑटोमेटिकली संभालता है, इसलिए आपको कुछ कॉन्फ़िगर नहीं करना पड़ता)

ब्राउज़र DevTools की बुनियादी समझ मददगार है, पर अनिवार्य नहीं।

Chrome DevTools MCP इंस्टॉल करना

Chrome DevTools MCP आपका एआई असिस्टेंट की MCP कॉन्फ़िगरेशन के जरिए चलता है। आप कौन-सा एआई कोडिंग असिस्टेंट उपयोग करते हैं, उसके अनुसार सेटअप थोड़ा अलग हो सकता है। हम Claude Code के लिए इंस्टॉलेशन दिखाएँगे, लेकिन Cursor, Cline, और VSCode Copilot जैसे अन्य एडिटर्स का तरीका भी समान है।

Claude Code के लिए, अपने टर्मिनल में यह कमांड चलाएँ:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latestसंचालित द्वारा

यह कमांड Claude Code के साथ Chrome DevTools MCP सर्वर को रजिस्टर करता है। सर्वर npx के जरिए चलता है, जो पैकेज को बिना स्थायी इंस्टॉलेशन के डाउनलोड और निष्पादित करता है। @latest यह सुनिश्चित करता है कि आपको वर्तमान वर्ज़न मिले।

कमांड चलाने के बाद, नया सर्वर लोड करने के लिए Claude Code को रीस्टार्ट करें।

यदि आप कोई दूसरा एआई कोडिंग असिस्टेंट उपयोग कर रहे हैं

अन्य MCP क्लाइंट्स में इंस्टॉलेशन तरीके समान होते हैं—कुछ कमांड का उपयोग करते हैं, कुछ कॉन्फ़िगरेशन फ़ाइलें, या वन-क्लिक इंस्टॉल बटन। Cursor, Cline, Gemini CLI, Windsurf, और अन्य समर्थित क्लाइंट्स के लिए विशेष निर्देशों हेतु Chrome DevTools MCP GitHub पेज देखें।

अपना सेटअप टेस्ट करना

एक साधारण कमांड से सुनिश्चित करें कि सब ठीक चल रहा है:

Navigate to demo.realworld.io and take a screenshotसंचालित द्वारा

आपको यह दिखना चाहिए:

• Chrome लॉन्च होता है (जब तक आपने हेडलेस मोड कॉन्फ़िगर नहीं किया, आपको ब्राउज़र विंडो दिखेगी)
• Conduit होमपेज लोड होता है
• आपका एआई असिस्टेंट एक स्क्रीनशॉट कैप्चर कर दिखाता है

यदि कुछ गड़बड़ हो, तो इन सामान्य समस्याओं की जाँच करें:

• Node.js वर्ज़न: Chrome DevTools MCP के लिए Node.js v20.19 या नया वर्ज़न चाहिए
• npm अनुमतियाँ: सुनिश्चित करें कि npm पैकेज इंस्टॉल कर सकता है
• रीस्टार्ट आवश्यक: कॉन्फ़िगरेशन बदलने के बाद आपके एआई असिस्टेंट को रीस्टार्ट चाहिए
• कॉन्फ़िग फ़ाइल स्थान: यह सत्यापित करें कि आपने अपने असिस्टेंट के लिए सही MCP सेटिंग्स फ़ाइल संपादित की है

ब्राउज़र ऑटोमेशन की मूल बातें

Chrome DevTools MCP वेब पेजों से इंटरैक्ट करने के लिए छह कोर टूल्स देता है। URLs लोड करने के लिए navigate_page, एलिमेंट्स से इंटरैक्ट करने के लिए click, टेक्स्ट दर्ज करने के लिए fill और fill_form, होवर इफेक्ट्स ट्रिगर करने के लिए hover, और दृश्य कैप्चर करने के लिए take_screenshot उपयोग करें। ये टूल्स अधिकांश ब्राउज़र ऑटोमेशन कार्यों को कवर करते हैं जिनका आप सामना करेंगे।

नेविगेशन और स्क्रीनशॉट्स

एक पेज लोड करते हैं। अपने एआई असिस्टेंट को बताइए:

Navigate to demo.realworld.ioसंचालित द्वारा

एआई navigate_page टूल का उपयोग करता है, Chrome खुलता है, और Conduit होमपेज लोड होता है। जब तक आपने हेडलेस मोड कॉन्फ़िगर नहीं किया, आपको ब्राउज़र विंडो दिखेगी।

जो दिख रहा है उसे डॉक्युमेंट करने के लिए बस कहें:

Take a screenshot of the homepageसंचालित द्वारा

एआई take_screenshot से मौजूदा पेज कैप्चर कर परिणाम दिखाता है। यह विज़ुअल डॉक्युमेंटेशन या यह जाँचने के लिए उपयोगी है कि पेज सही दिख रहा है।

एलिमेंट इंटरैक्शन

आप बिना CSS सेलेक्टर्स लिखे या एलिमेंट IDs देखे किसी भी एलिमेंट से इंटरैक्ट कर सकते हैं। बस बताएँ क्या करना है:

Click the Sign in linkसंचालित द्वारा

एआई समझ लेता है कि आप किस एलिमेंट की बात कर रहे हैं और click टूल से उसे क्लिक करता है। साइन-इन पेज लोड होता है।

आप एलिमेंट्स पर होवर भी कर सकते हैं:

Hover over the Sign up linkसंचालित द्वारा

एआई hover टूल का उपयोग करता है। यदि कोई टूलटिप या ड्रॉपडाउन है, तो वह दिखाई देगा।

फॉर्म भरना

स्क्रिप्ट लिखकर फॉर्म भरना थकाऊ हो सकता है। Chrome DevTools MCP के साथ, आप बस बताते हैं कि क्या भरना है।

Fill one field at a time:
Fill in the email field with [email protected]
Fill in the password field with testpass123
Or fill multiple fields at once:
Fill out the sign-in form with email [email protected] and password testpass123संचालित द्वारा

एआई fill_form का उपयोग करके सारे फ़ील्ड्स एक साथ संभाल लेता है। भरा हुआ फॉर्म कुछ यूँ दिखता है:

एआई आपके विवरण के आधार पर सही इनपुट फ़ील्ड्स की पहचान करता है। आपको HTML छूने की ज़रूरत नहीं।

डीबगिंग और इंस्पेक्शन

Chrome DevTools MCP डीबगिंग के लिए तीन कोर टूल देता है: कंसोल आउटपुट देखने के लिए list_console_messages, नेटवर्क गतिविधि देखने के लिए list_network_requests, और पेज पर JavaScript चलाने व डेटा निकालने के लिए evaluate_script।

जब आप इन टूल्स का उपयोग अपने एआई असिस्टेंट के माध्यम से करते हैं, तो आप एक बातचीत कर रहे होते हैं। आप प्राकृत भाषा में प्रश्न पूछते हैं, और एआई पर्दे के पीछे उन्हें MCP टूल कॉल में अनुवाद कर देता है। 

यह कुछ यूँ दिखता है:

एआई असिस्टेंट आपका उद्देश्य समझकर उपयुक्त Chrome DevTools टूल्स निष्पादित करता है और परिणाम पढ़ने योग्य रूप में प्रस्तुत करता है। देखते हैं ये व्यावहारिक रूप से कैसे काम करते हैं।

कंसोल निरीक्षण

जब कुछ टूटता है, तो कंसोल एरर्स आमतौर पर पहली जगह होती है जिसे देखना चाहिए। DevTools मैन्युअली खोलने के बजाय, अपने एआई असिस्टेंट से बस कहें:

Navigate to demo.realworld.io and check the console for any errorsसंचालित द्वारा

एआई पेज लोड करता है और list_console_messages से कंसोल जाँचता है। यह मिला:

Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/articles'
from origin 'https://demo.realworld.io' has been blocked by CORS policy
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/tags'
from origin 'https://demo.realworld.io' has been blocked by CORS policyसंचालित द्वारा

ये CORS एरर्स (Cross-Origin Resource Sharing—ब्राउज़र की सुरक्षा सुविधा जो वेब पेजों को अलग डोमेन पर रिक्वेस्ट करने से रोकती है) बताती हैं कि पेज पर वास्तविक कंटेंट की जगह “Loading articles…” और “Loading tags…” क्यों दिख रहा है:

आप एआई से इन संदेशों को फ़िल्टर और व्याख्यायित करने के लिए कहकर और गहराई में जा सकते हैं:

Are there any errors or warnings on this page?संचालित द्वारा

एआई कंसोल आउटपुट का विश्लेषण कर बताता है: “हाँ, दो CORS एरर्स हैं जो आर्टिकल्स और टैग्स के API रिक्वेस्ट्स को ब्लॉक कर रहे हैं।”

इससे आपको बिना DevTools कंसोल खोले ही तुरंत पता चल जाता है कि क्या टूट रहा है।

नेटवर्क रिक्वेस्ट ओवरव्यू

कंसोल एरर्स अक्सर नेटवर्क समस्याओं की ओर इशारा करते हैं। यह समझने के लिए कि आपकी रिक्वेस्ट्स के साथ वास्तव में क्या हो रहा है, नेटवर्क गतिविधि देखें:

Show me what network requests are made on the homepageसंचालित द्वारा

एआई list_network_requests का उपयोग करता है और सभी रिक्वेस्ट्स की सूची लौटाता है। आपको सफल रिक्वेस्ट्स (CSS, फ़ॉन्ट्स, JavaScript फाइलें) और असफल रिक्वेस्ट्स दोनों दिखेंगी:

https://demo.realworld.io/ GET [success - 200]
https://demo.realworld.io/main.css GET [success - 200]
https://demo.realworld.io/main.js GET [success - 200]
https://conduit.productionready.io/api/tags GET [failed - 307]
https://conduit.productionready.io/api/articles?limit=10&offset=0 GET [failed - 307]
https://api.realworld.io/api/tags GET [failed - net::ERR_FAILED]
https://api.realworld.io/api/articles?limit=10&offset=0 GET [failed - net::ERR_FAILED]संचालित द्वारा

गहराई से जानने के लिए फॉलो-अप पूछें:

Are there any failed requests?संचालित द्वारा

एआई सूची को फ़िल्टर कर समस्या बताता है: “हाँ, चार API रिक्वेस्ट्स असफल रहीं। दो ने 307 रीडायरेक्ट लौटाया, और दो पूरी तरह ERR_FAILED के साथ फेल हुईं।”

इससे आपको Network टैब मैन्युअली जाँचे बिना समस्याएँ जल्दी पकड़ने में मदद मिलती है।

JavaScript मूल्यांकन और डेटा निष्कर्षण

कंसोल और नेटवर्क डेटा देखने से आगे, आप पेज पर सीधे कोड चलाकर उसकी स्थिति जाँच सकते हैं या जानकारी निकाल सकते हैं। इसके लिए evaluate_script उपयोग करें:

Check if any articles are displayed on the homepageसंचालित द्वारा

एआई आर्टिकल एलिमेंट्स गिनने के लिए JavaScript चलाता है:

const articles = document.querySelectorAll('.article-preview');
return articles.length;संचालित द्वारा

परिणाम: “0 आर्टिकल्स दिख रहे हैं। पेज पर ‘Loading articles…’ दिख रहा है, जो संकेत करता है कि API एरर्स कंटेंट लोड होने से रोक रहे हैं।”

आप और जटिल डेटा भी निकाल सकते हैं:

Get the page title and main heading textसंचालित द्वारा

एआई यह इवैल्युएट करता है:

return {
 pageTitle: document.title,
 mainHeading: document.querySelector('h1')?.textContent
};संचालित द्वारा

परिणाम: {pageTitle: "Home — Conduit", mainHeading: "conduit"}

इससे आप पेज कंटेंट सत्यापित कर सकते हैं, स्ट्रक्चर्ड डेटा निकाल सकते हैं, या जाँच सकते हैं कि डायनेमिक एलिमेंट्स सही से लोड हो रहे हैं या नहीं। take_screenshot और take_snapshot टूल्स इसे पूरक करते हैं, जब आपको विज़ुअल और स्ट्रक्चरल डॉक्युमेंटेशन चाहिए।

ये तीनों डीबगिंग क्षमताएँ स्वाभाविक रूप से साथ काम करती हैं। एरर्स देखने के लिए कंसोल संदेशों से शुरू करें, क्या फेल हुआ समझने के लिए नेटवर्क रिक्वेस्ट्स देखें, फिर JavaScript मूल्यांकन से जाँचें कि इन विफलताओं का पेज पर क्या प्रभाव पड़ा—यह सब आपके एआई असिस्टेंट के साथ बातचीत के माध्यम से—न टूल्स के बीच स्विचिंग, न इंस्पेक्शन स्क्रिप्ट्स लिखना।

Chrome DevTools MCP का उपयोग करके वेबसाइट फ्रंटएंड बनाना

एआई असिस्टेंट्स वेब इंटरफेसेज़ बना सकते हैं, लेकिन वे यह नहीं देख पाते कि उन्होंने क्या बनाया। आपको मैन्युअली स्क्रीनशॉट लेकर समायोजन के लिए कहना पड़ता है।

Chrome DevTools MCP इसे बदलता है। एआई खुद स्क्रीनशॉट लेता है, लेआउट्स सत्यापित करता है, और तब तक दोहराता है जब तक सब सही न दिखे।

आइए Streamlit का उपयोग करके एक ChatGPT क्लोन बनाते हैं। इसके लिए आपको OpenAI API कुंजी चाहिए। प्रॉम्प्ट चलाते समय इसे अपने एआई असिस्टेंट को दें ताकि वह ऐप के सही काम करने की पुष्टि कर सके। प्रॉम्प्ट यह है:

Build a ChatGPT clone using Streamlit. Create a clean chat interface
with message history, text input, and OpenAI API integration. Include
a sidebar for API key management and chat management features (Clear
Chat, New Chat, message counter). Use Chrome DevTools MCP to verify
the UI at each step.संचालित द्वारा

एआई साइडबार के साथ ऐप बनाता है और शुरुआती लेआउट सत्यापित करने के लिए एक स्क्रीनशॉट लेता है:

साइडबार में API कुंजी इनपुट, Clear Chat और New Chat बटन, और 0 पर संदेश काउंटर शामिल है। इंटरफेस तैयार है, अब देखते हैं चैट फ़ंक्शनलिटी काम करती है या नहीं।

एक सरल प्रश्न से परीक्षण:

चैट सही उत्तर देता है, और काउंटर दो संदेश दिखाता है (अगले स्क्रीनशॉट में)। पर क्या यह मल्टी-टर्न बातचीत संभाल सकता है?

कॉन्टेक्स्ट के साथ बातचीत का परीक्षण:

एआई पिछले आदान-प्रदान को याद रखता है। अब Clear Chat फ़ीचर सत्यापित करना है।

Clear Chat बटन पर क्लिक करना:

चैट सफलतापूर्वक साफ हो जाती है, और काउंटर 0 पर रीसेट होता है. 

नई चैट शुरू करना:

बिल्कुल सही। एआई ने एक काम करने वाला ChatGPT क्लोन बनाया, हर चरण पर स्वरूप सत्यापित किया, और सभी फ़ीचर्स बिना मानवीय दखल के परीक्षण किए।

यह किसी भी फ़्रेमवर्क के साथ काम करता है—React, Vue, Svelte, या साधारण HTML। एआई लेआउट्स सत्यापित करता है, इंटरैक्शंस टेस्ट करता है, और कोड देखने से पहले ही बग्स पकड़ लेता है।

निष्कर्ष और अगले कदम

Chrome DevTools MCP आपको बातचीत के माध्यम से ब्राउज़र ऑटोमेशन देता है। आप बताते हैं कि क्या चाहिए, और आपका एआई असिस्टेंट तकनीकी विवरण संभाल लेता है। न स्क्रिप्ट्स लिखनी, न सेलेक्टर्स डीबग करने।

पूरे लेख में, हमने मूल बातें कवर कीं: सर्वर इंस्टॉल करना, पेज नेविगेट करना, फॉर्म भरना, एलिमेंट्स क्लिक करना, और स्क्रीनशॉट लेना। फिर हमने कंसोल इंस्पेक्शन, नेटवर्क मॉनिटरिंग, और JavaScript मूल्यांकन के साथ डीबगिंग देखी। अंत में, हमने देखा कि ये टूल्स साथ मिलकर ऐसे फ्रंटएंड बनाते हैं जहाँ एआई वही देख सकता है जो वह बनाता है।

आगे क्या आज़माएँ

सबसे पहले उस साइट पर जाएँ जिस पर आप काम कर रहे हैं और अपने एआई से कंसोल एरर्स जाँचने या नेटवर्क रिक्वेस्ट्स निरीक्षण करने के लिए कहें। यदि आप Claude Code उपयोग कर रहे हैं, तो हमारा Claude Code सर्वोत्तम प्रथाएँ मार्गदर्शक टूल उपयोग के प्रभावी प्रॉम्प्टिंग पैटर्न कवर करता है। अलग-अलग स्टेट्स के स्क्रीनशॉट लें। फॉर्म सबमिशन टेस्ट करें।

फिर कई टूल्स को संयोजित करें: किसी पेज पर जाएँ, फॉर्म भरें, सबमिट करें, और परिणाम कैप्चर करें। कंसोल संदेश जाँचें, असफल नेटवर्क रिक्वेस्ट्स सूचीबद्ध करें, और पेज स्टेट सत्यापित करने के लिए JavaScript चलाएँ।

जब आप बुनियादी बातों में सहज हो जाएँ, तो अपने एआई के साथ एक छोटा UI कॉम्पोनेंट बनाएँ और हर चरण पर लेआउट सत्यापित करने दें। देखें कैसे वह आपके मैन्युअल जाँचने से पहले ही विज़ुअल समस्याएँ पकड़ लेता है।

परफॉर्मेंस कार्य के लिए, परफॉर्मेंस टूल्स (performance_start_trace, performance_stop_trace, performance_analyze_insight) से पेज लोड समय प्रोफाइल करें और बाधाएँ पहचानें। इम्यूलेशन टूल्स (emulate_cpu, emulate_network, resize_page) से अलग-अलग परिस्थितियों में परीक्षण करें।

Chrome DevTools MCP कई सर्वरों में से एक है। इसे फ़ाइल सिस्टम सर्वरों, डेटाबेस टूल्स, या API इंटीग्रेशंस के साथ जोड़ें और ऐसे वर्कफ़्लोज़ बनाएँ जो कई सिस्टम्स में फैले हों। अधिक MCP उदाहरणों के लिए हमारा Codex CLI MCP ट्यूटोरियल और Google ADK MCP ट्यूटोरियल देखें।

यदि आप अपने MCP सर्वर बनाना चाहते हैं, तो Building an MCP Server and Client with FastMCP 2.0 देखें।