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 आपकी उत्पादकता को कैसे बेहतर बना सकता है:
- डीओएम देखना और बदलना
- सीएसएस देखना और बदलना
- JavaScript को डीबग करना
- मैसेज देखना और कंसोल में JavaScript चलाना
- वेबसाइट की स्पीड ऑप्टिमाइज़ करना
- नेटवर्क गतिविधि की जांच करें
DevTools के बारे में जानें
DevTools यूज़र इंटरफ़ेस (यूआई) थोड़ा मुश्किल हो सकता है... इसमें बहुत सारे टैब हैं! हालांकि, अगर आपको हर टैब के बारे में जानने में कुछ समय लग रहा है, तो आप देख सकते हैं कि DevTools आपकी उत्पादकता को बहुत ज़्यादा बढ़ा सकता है.
डिवाइस मोड
मोबाइल डिवाइसों को सिम्युलेट करें.
एलिमेंट पैनल
डीओएम और सीएसएस को देखें और उसमें बदलाव करें.
- डीओएम को देखने और उसमें बदलाव करने का तरीका
- सीएसएस देखने और उसमें बदलाव करने का तरीका
- सीएसएस में बदलाव करना
- डीओएम में बदलाव करना
- अमान्य, बदली गई, इनऐक्टिव, और अन्य सीएसएस को ढूंढना
- सीएसएस में किए जा सकने वाले सुधारों का पता लगाना
- हल्के/गहरे रंग वाली थीम, कंट्रास्ट, और दूसरी सीएसएस मीडिया सुविधाओं को एम्युलेट करना
- इस्तेमाल नहीं किए गए सीएसएस ढूंढना
- ऐनिमेशन की जांच करना
कंसोल पैनल
मैसेज देखें और कंसोल से JavaScript चलाएं.
सोर्स पैनल
JavaScript को डीबग करें, पेज फिर से लोड होने वाले सभी पेज पर DevTools में किए गए बदलाव लागू करें, JavaScript के स्निपेट को सेव करें और चलाएं, और DevTools में किए गए बदलावों को स्थानीय सोर्स में सेव करें.
- JavaScript को डीबग करने का तरीका
- ब्रेकपॉइंट की मदद से अपने कोड को रोकना
- फ़ाइल फ़ोल्डर में फ़ाइलों में बदलाव करना और उन्हें सेव करना
- JavaScript के स्निपेट चलाना
- JavaScript डीबग करने का रेफ़रंस
- वेब कॉन्टेंट और एचटीटीपी रिस्पॉन्स हेडर को स्थानीय तौर पर बदलना
नेटवर्क पैनल
नेटवर्क की गतिविधि देखना और उसे डीबग करना.
रिकॉर्डर पैनल
यूज़र फ़्लो को रिकॉर्ड करना, उसे फिर से चलाना, और मेज़र करना.
- यूज़र फ़्लो को रिकॉर्ड करना, उसे फिर से चलाना, और मेज़र करना
- एक्सटेंशन की मदद से, Recorder को पसंद के मुताबिक बनाना
- Recorder की सुविधाओं के बारे में जानकारी
परफ़ॉर्मेंस पैनल
ऐप्लिकेशन की लोडिंग और रनटाइम की परफ़ॉर्मेंस को बेहतर बनाने के तरीके जानें.
- वेबसाइट की स्पीड ऑप्टिमाइज़ करना
- रनटाइम की परफ़ॉर्मेंस का विश्लेषण करना
- परफ़ॉर्मेंस की सुविधाओं के बारे में जानकारी
मेमोरी पैनल
पेज की परफ़ॉर्मेंस पर असर डालने वाली मेमोरी से जुड़ी समस्याओं का पता लगाकर उन्हें ठीक करें. जैसे, मेमोरी लीक होना.
ऐप्लिकेशन पैनल
IndexedDB या वेब SQL डेटाबेस, लोकल और सेशन स्टोरेज, कुकी, ऐप्लिकेशन कैश, इमेज, फ़ॉन्ट, और स्टाइलशीट सहित, लोड होने वाले सभी संसाधनों की जांच करें.
- प्रोग्रेसिव वेब ऐप्लिकेशन डीबग करना
- लोकल स्टोरेज देखना और उसमें बदलाव करना
- कुकी देखना, जोड़ना, उनमें बदलाव करना, और उन्हें मिटाना
- ऑरिजिन ट्रायल की जानकारी देखना
सिक्योरिटी पैनल
मिले-जुले कॉन्टेंट की समस्याएं, सर्टिफ़िकेट से जुड़ी समस्याएं वगैरह डीबग करें.
कम्यूनिटी
Crbug में बग रिपोर्ट और सुविधा के अनुरोध दर्ज करें, जो इंजीनियरिंग टीम का बग ट्रैकर है.
अगर आपको किसी गड़बड़ी या सुविधा के अनुरोध के बारे में हमें सूचना देनी है, लेकिन आपके पास ज़्यादा समय नहीं है, तो @ChromeDevTools पर ट्वीट करके उसे भेजें. हम नियमित रूप से खाते से सूचनाओं के जवाब देते हैं और उन्हें भेजते हैं.
DevTools का इस्तेमाल करने में मदद पाने के लिए, Stack Overflow सबसे अच्छा चैनल है.
DevTools दस्तावेज़ों पर बग या सुविधा का अनुरोध करने के लिए, GitHub से जुड़ी कोई समस्या खोलें.
DevTools में Slack चैनल भी है, लेकिन टीम इस पर लगातार नज़र नहीं रखती है.