खास जानकारी

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

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

DevTools खोलें

DevTools खोलने के कई तरीके हैं, क्योंकि अलग-अलग उपयोगकर्ता, DevTools यूज़र इंटरफ़ेस (यूआई) के अलग-अलग हिस्सों को तुरंत ऐक्सेस करना चाहते हैं.

  • डीओएम या सीएसएस के साथ काम करने के लिए, पेज पर मौजूद किसी एलिमेंट पर राइट क्लिक करें और एलिमेंट पैनल में जाने के लिए, जांच करें चुनें. इसके अलावा, Command+Option+C (Mac) या Control+Shift+C (Windows, Linux, ChromeOS) दबाएं.
  • लॉग किए गए मैसेज देखने या JavaScript चलाने के लिए, Command+Option+J (Mac) या Control+Shift+J (Windows, Linux, ChromeOS) दबाएं और सीधे कंसोल पैनल पर जाएं.

ज़्यादा जानकारी और वर्कफ़्लो के लिए, Chrome DevTools खोलें देखें.

शुरू करें

अगर आप ज़्यादा अनुभवी वेब डेवलपर हैं, तो यहां कुछ सुझाव दिए गए हैं. इनकी मदद से, यह पता लगाया जा सकता है कि DevTools आपकी उत्पादकता को कैसे बेहतर बना सकता है:

DevTools के बारे में जानें

DevTools यूज़र इंटरफ़ेस (यूआई) थोड़ा मुश्किल हो सकता है... इसमें बहुत सारे टैब हैं! हालांकि, अगर आपको हर टैब के बारे में जानने में कुछ समय लग रहा है, तो आप देख सकते हैं कि DevTools आपकी उत्पादकता को बहुत ज़्यादा बढ़ा सकता है.

डिवाइस मोड

व्यूपोर्ट में डिवाइस मोड चालू किया गया.

मोबाइल डिवाइसों को सिम्युलेट करें.

एलिमेंट पैनल

एलिमेंट पैनल.

डीओएम और सीएसएस को देखें और उसमें बदलाव करें.

कंसोल पैनल

कंसोल पैनल.

मैसेज देखें और कंसोल से JavaScript चलाएं.

सोर्स पैनल

सोर्स पैनल.

JavaScript को डीबग करें, पेज फिर से लोड होने वाले सभी पेज पर DevTools में किए गए बदलाव लागू करें, JavaScript के स्निपेट को सेव करें और चलाएं, और DevTools में किए गए बदलावों को स्थानीय सोर्स में सेव करें.

नेटवर्क पैनल

नेटवर्क पैनल.

नेटवर्क की गतिविधि देखना और उसे डीबग करना.

रिकॉर्डर पैनल

रिकॉर्डर पैनल.

यूज़र फ़्लो को रिकॉर्ड करना, उसे फिर से चलाना, और मेज़र करना.

परफ़ॉर्मेंस पैनल

परफ़ॉर्मेंस पैनल.

ऐप्लिकेशन की लोडिंग और रनटाइम क��� परफ़ॉर्मेंस को बेहतर बनाने के तरीके जानें.

मेमोरी पैनल

मेमोरी पैनल.

पेज की परफ़ॉर्मेंस पर असर डालने वाली मेमोरी से जुड़ी समस्याओं का पता लगाकर उन्हें ठीक करें. जैसे, मेमोरी लीक होना.

ऐप्लिकेशन पैनल

सर्विस वर्कर सेक्शन वाला ऐप्लिकेशन पैनल खुला हुआ है.

IndexedDB या वेब SQL डेटाबेस, लोकल और सेशन स्टोरेज, कुकी, ऐप्लिकेशन कैश, इमेज, फ़ॉन्ट, और स्टाइलशीट सहित, लोड होने वाले सभी संसाधनों की जांच करें.

सिक्योरिटी पैनल

सुरक्षा पैनल.

मिले-जुले कॉन्टेंट की समस्याएं, सर्टिफ़िकेट से जुड़ी समस्याएं वगैरह डीबग करें.

कम्यूनिटी

Crbug में बग रिपोर्ट और सुविधा के अनुरोध दर्ज करें, जो इंजीनियरिंग टीम का बग ट्रैकर है.

क्रबग

अगर आपको किसी गड़बड़ी या सुविधा के अनुरोध के बारे में हमें सूचना देनी है, लेकिन आपके पास ज़्यादा समय नहीं है, ��ो @ChromeDevTools पर ट्वीट करके उसे भेजें. हम नियमित रूप से खाते से सूचनाओं के जवाब देते हैं और उन्हें भेजते हैं.

Twitter

DevTools का इस्तेमाल करने में मदद पाने के लिए, Stack Overflow सबसे अच्छा चैनल है.

स्टैक ओवरफ़्लो

DevTools दस्तावेज़ों पर बग या सुविधा का अनुरोध करने के लिए, GitHub से जुड़ी कोई समस्या खोलें.

Docs से जुड़ी समस्याएं

DevTools में Slack चैनल भी है, लेकिन टीम इस पर लगातार नज़र नहीं रखती है.

Slack