Chrome DevTools, वेब डेवलपर टूल का एक सेट है. यह सीधे Google Chrome ब्राउज़र में पहले से मौजूद होता है. DevTools की मदद से, पेजों में तुरंत बदलाव किए जा सकते हैं और समस्याओं का तुरंत विश्लेषण किया जा सकता है. इससे, तेज़ी से और बेहतर वेबसाइटें बनाने में आपको मदद मिलती है.
शुरू करना जानें कि नया क्या है
DevTools, वेब डेवलपमेंट से जुड़े कई सामान्य टास्क के साथ काम करता है. इस पेज पर आगे बढ़ें और DevTools की कुछ मुख्य सुविधाओं के बारे में जानें. क्या आपको नहीं पता कि कहां से शुरू करना है या DevTools का इस्तेमाल पहली बार किया जा रहा है? DevTools के बारे में जानकारी देने वाला वीडियो देखें.
कंसोल की अहम जानकारी और एआई की मदद से, JavaScript की गड़बड़ियों, परफ़ॉर्मेंस, और स्टाइल को बेहतर तरीके से डीबग और ठीक किया जा सकता है.
अपने पेज की परफ़ॉर्मेंस के बारे में पूरी जानकारी पाएं और उस पर कार्रवाई करें.
अपने पेज पर लोड किए गए संसाधनों की जांच करने और अपने ब्राउज़र से उनमें बदलाव करने का तरीका जानें.
नेटवर्क अनुरोधों और जवाबों का तुरंत विश्लेषण करें और उन्हें बदलें.

एआई की मदद और कंसोल की अहम जानकारी

जानें कि DevTools में एआई के इनोवेशन की मदद से, ज़्यादा और तेज़ी से काम कैसे किया जा सकता है.
Gemini की मदद से, अपनी वेबसाइट की स्टाइल, नेटवर्क, सोर्स, और परफ़ॉर्मेंस का विश्लेषण करें और उन्हें बेहतर बनाएं.
Chrome DevTools में एआई असिस्टेंस के इस्तेमाल के उदाहरण देखें. साथ ही, जानें कि यह स्टाइल, परफ़ॉर्मेंस वगैरह के लिए, डीबग करने के वर्कफ़्लो में कैसे मदद कर सकता है.

कंसोल मैसेज को समझना

DevTools में कंसोल मैसेज और गड़बड़ियों को समझें. साथ ही, उन्हें कॉपी-पेस्ट किए बिना ठीक करने का तरीका जानें.

DevTools से जुड़ी सलाह

वेब डेवलपमेंट से जुड़ी सामान्य समस्याओं को हल करने के लिए, DevTools का इस्तेमाल करने का तरीका बताने वाली हमारी हर महीने की वीडियो सीरीज़ देखें.
DevTools में परफ़ॉर्मेंस ट्रेस रिकॉर्ड करने और परफ़ॉर्मेंस से जुड़ी समस्याओं की पहचान करने और उन्हें ठीक करने के लिए, उनका विश्लेषण करने का तरीका जानें.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को लाइव मॉनिटर करना

LCP से जुड़ी समस्याओं को डीबग करें और CrUX डेटा का इस्तेमाल करके देखें कि क्या आपने उपयोगकर्ताओं के अनुभव से जुड़ी समस्या को डीबग किया है
ब्राउज़र कैश के अलग-अलग टाइप के बारे में जानें. साथ ही, Chrome DevTools में उनकी जांच करने और उन्हें मैनेज करने का तरीका जानें!
क्या किसी एलिमेंट की जांच करते समय, वह अचानक से गायब हो गया? ऐसा लगता है कि आपका कोड आपसे छिप-छिपाकर खेल रहा है!

परफ़ॉर्मेंस के बारे में अहम जानकारी पाना

रनटाइम की परफ़ॉर्मेंस के अलग-अलग पहलुओं को मेज़र और ऑप्टिमाइज़ करने में मदद करने के लिए, कई तरह के टूल: परफ़ॉर्मेंस पैनल, Lighthouse वगैरह.
परफ़ॉर्मेंस पैनल की सभी सुविधाओं के बारे में जानें: परफ़ॉर्मेंस ट्रेस को रिकॉर्ड करने, ट्रेस को देखने और उसका विश्लेषण करने का तरीका वगैरह.
परफ़ॉर्मेंस पैनल, डेवलपर को 15 साल से ज़्यादा समय से, अपने ऐप्लिकेशन के रनटाइम की परफ़ॉर्मेंस को मेज़र करने और उसे ऑप्टिमाइज़ करने में मदद कर रहा है. जानें कि आने वाले समय में इसमें क्या बदलाव होंगे.
ट्रेस में एनोटेट करें और उन्हें सीधे ट्रेस फ़ाइल में सेव करें, ताकि उन्हें आसानी से शेयर किया जा सके.

खबरें और अपडेट

DevTools के परफ़ॉर्मेंस पैनल में नेविगेशन और फ़िल्टर करने की बेहतर सुविधा

Updated 19 मार्च 2025

DevTools के परफ़ॉर्मेंस पैनल में किए गए अपडेट की मदद से, ट्रैस में नेविगेट करना और उन्हें फ़िल्टर करना आसान हो जाता है.

Chrome DevTools की मदद से नेटवर्क का बेहतर तरीके से विश्लेषण करना

Updated 27 फ़रवरी 2025

Chrome DevTools की मदद से, नेटवर्क का बेहतर तरीके से विश्लेषण करना.

हमने Chrome DevTools में Gemini को कैसे जोड़ा

Updated 14 जनवरी 2025

DevTools में एआई असिस्टेंस के नए पैनल के इस्तेमाल के मज़ेदार और दिलचस्प उदाहरणों के बारे में जानें

संसाधनों की जांच करना और उनमें बदलाव करना

सोर्स पैनल की सभी सुविधाओं के बारे में जानें: फ़ाइलों को देखने और उनमें बदलाव करने, JavaScript को डीबग करने, और वर्कस्पेस सेट अप करने का तरीका.
शुरू करना
Workspace की मदद से, DevTools में किए गए बदलावों को कंप्यूटर पर सेव किए गए सोर्स कोड में सेव किया जा सकता है. अपने प्रोजेक्ट में वर्कस्पेस सेट अप करने का तरीका जानें.
ट्यूटोरियल पढ़ें

नेटवर्क पर की गई गतिविधि का विश्लेषण करना

नेटवर्क पैनल में मौजूद सभी सुविधाओं के बारे में जानें: रिस्पॉन्स और अनुरोध के मुख्य हिस्सों की जांच करना, हेडर को बदलना वगैरह.
शुरू करना
नेटवर्क पैनल में सामान्य टास्क करने के बारे में बताने वाला ट्यूटोरियल.
ट्यूटोरियल पढ़ें

और टूल

DevTools में अन्य सभी सुविधाओं और क्षमताओं के बारे में जानें.
पेज के DOM को देखने और उसमें बदलाव करने का तरीका जानें.
किसी पेज की सीएसएस को देखने और बदलने का तरीका जानें.
एचटीएमएल, सीएसएस, और JavaScript में किए गए बदलावों को ट्रैक करें.
मैसेज लॉग करें और JavaScript चलाएं.
वेबसाइट की परफ़ॉर्मेंस का आकलन करें.
मेमोरी से जुड़ी उन समस्याओं का पता लगाएं जिनका असर पेज की परफ़ॉर्मेंस पर पड़ता है. इनमें मेमोरी लीक वगैरह शामिल हैं.
वेब ऐप्लिकेशन की जांच करें, उनमें बदलाव करें, और उन्हें डीबग करें, कैश मेमोरी की जांच करें, स्टोरेज देखें वगैरह.
ऐनिमेशन की जांच करें और उनमें बदलाव करें.
यूज़र फ़्लो को रिकॉर्ड करना, उसे फिर से चलाना, मेज़र करना, और उसके कदमों में बदलाव करना.
ऐसे विकल्पों के कलेक्शन के बारे में जानें जो वेब कॉन्टेंट रेंडरिंग पर असर डालते हैं.
सेव किए गए पतों की जांच करें और उन्हें डीबग करें.
अपनी वेबसाइट की समस्याएं ढूंढें और उन्हें ठीक करें.
पक्का करें कि पेज को एचटीटीपीएस से पूरी तरह सुरक्षित किया गया हो.

मीडिया

हर ब्राउज़र टैब के हिसाब से जानकारी देखें और मीडिया प्लेयर को डीबग करें.
डिवाइस के सेंसर को एम्युलेट करें.
पुष्टि करने वालों को एम्युलेट करें.