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