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

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

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

पैनल

हर DevTools पैनल की खासियत जानें.
Chrome DevTools का इस्तेमाल करके किसी पेज के DOM को देखने और उसे बदलने का तरीका जानें.
Chrome DevTools का इस्तेमाल करके, किसी पेज के सीएसएस को देखने और बदलने का तरीका जानें.
मैसेज लॉग करें और JavaScript चलाएं.
फ़ाइलें देखें और उनमें बदलाव करें, स्निपेट बनाएं, JavaScript डीबग करें, और फ़ाइल फ़ोल्डर सेट अप करें.
नेटवर्क के अनुरोधों को लॉग करें.
DevTools की मदद से, साइट की परफ़ॉर्मेंस की जांच करें.
मेमोरी से जुड़ी ऐसी समस्याओं का पता लगाएं जो पेज की परफ़ॉर्मेंस पर असर डालती हैं. इनमें मेमोरी लीक होना, मेमोरी में कमी होना, और बार-बार ट्रैश इकट्ठा होना शामिल है.
वेब ऐप्लिकेशन की जांच करें, उनमें बदलाव करें, और उन्हें डीबग करें, कैश मेमोरी की जांच करें, और स्टोरेज देखें.
यूज़र फ़्लो को रिकॉर्ड करना, उसे फिर से चलाना, मेज़र करना, और उसके कदमों में बदलाव करना.
ऐसे विकल्पों के कलेक्शन के बारे में जानें जो वेब कॉन्टेंट रेंडरिंग पर असर डालते हैं.
अपनी वेबसाइट की समस्याएं ढूंढें और उन्हें ठीक करें.
सुरक्षा पैनल का इस्तेमाल करके यह पक्का करें कि पेज को एचटीटीपीएस से पूरी तरह सुरक्षित किया गया हो.
JavaScript में arrayBuffer, Typedarray या DataView के साथ-साथ C++ Wasm ऐप्लिकेशन की WebAssembly और मेमोरी की जांच करें.
उपयोगकर्ता एजेंट स्ट्रिंग को बदलें. अपने-आप चुने जाने की सुविधा को बंद करें और सूची में से चुनें या कोई कस्टम स्ट्रिंग डालें.
हर ब्राउज़र टैब के हिसाब से जानकारी देखने और मीडिया प्लेयर को डीबग करने के लिए, मीडिया पैनल का इस्तेमाल करें.
ऐनिमेशन टैब की मदद से ऐनिमेशन की जांच करें और उनमें बदलाव करें.
एचटीएमएल, सीएसएस, और JavaScript में किए गए बदलावों को ट्रैक करें.
Chrome DevTools में इस्तेमाल न हुए JavaScript और सीएसएस कोड को ढूंढें और उनका विश्लेषण करें.
डेवलपर रिसॉर्स पैनल टैब का इस्तेमाल करके देखें कि सोर्स मैप लोड हो रहे हैं या नहीं. इसके बाद, उन्हें मैन्युअल तरीके से लोड करें.
सीएसएस की खास जानकारी वाले पैनल की मदद से, सीएसएस में किए जा सकने वाले सुधारों की पहचान करें.
लाइटहाउस पैनल की मदद से वेबसाइट की स्पीड ऑप्टिमाइज़ करें.
परफ़ॉर्मेंस की अहम जानकारी वाले पैनल की मदद से, अपनी वेबसाइट की परफ़ॉर्मेंस के बारे में अहम जानकारी पाएं.
डिवाइस के सेंसर को एम्युलेट करें.
पुष्टि करने वालों को एम्युलेट करें.