Chrome DevTools, वेब डेवलपर टूल का एक सेट है. यह सीधे Google Chrome ब्राउज़र में पहले से मौजूद होता है. DevTools की मदद से, पेजों में तुरंत बदलाव किए जा सकते हैं और समस्याओं का तुरंत विश्लेषण किया जा सकता है. इससे, तेज़ी से और बेहतर वेबसाइटें बनाने में आपको मदद मिलती है.
शुरू करें
Chrome DevTools को खोलने के सभी तरीके.
DevTools में हुए नए बदलावों के बारे में अप-टू-डेट रहें.
DevTools की सुविधाओं के बारे में जानने के लिए, छोटे-छोटे वीडियो की सीरीज़.

निर्देश और शॉर्टकट

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

पैनल

हर DevTools पैनल की खासियत जानें.

एलिमेंट - DOM

पेज के DOM को देखने और उसमें बदलाव करने का तरीका जानें.
दस्तावेज़ पढ़ें

एलिमेंट - सीएसएस

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

सुरक्षा

पक्का करें कि पेज को एचटीटीपीएस से पूरी तरह सुरक्षित किया गया हो.
JavaScript में arrayBuffer, Typedarray या DataView के साथ-साथ C++ Wasm ऐप्लिकेशन की WebAssembly और मेमोरी की जांच करें.
उपयोगकर्ता एजेंट स्ट्रिंग को बदल दें.
नेटवर्क के अनुरोधों को ब्लॉक करके अपनी साइट की जांच करें.

मीडिया

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

सेटिंग रेफ़रंस