Chrome DevTools कैसे इस्तेमाल करें: Inspect Element से Network तक

Chrome DevTools वेब डेवलपर टूल्स का वह सेट है जो Google Chrome में पहले से मौजूद है। इसे F12, Windows और Linux पर Ctrl + Shift + I, या Mac पर Cmd + Option + I से खोलें। इससे आप पेज के HTML और CSS को लाइव देख और बदल सकते हैं, JavaScript चला सकते हैं, हर नेटवर्क रिक्वेस्ट देख सकते हैं, परफ़ॉर्मेंस माप सकते हैं, फ़ोन एमुलेट कर सकते हैं और पेज का ऑडिट कर सकते हैं। यह गाइड उन पैनलों के बारे में है जो सबसे ज़्यादा काम आते हैं, उसी क्रम में जिसमें ज़्यादातर लोगों को उनकी ज़रूरत पड़ती है, और साथ में वे शॉर्टकट जो सबसे ज़्यादा समय बचाते हैं।

DevTools खोलना और उसमें रास्ता ढूँढना

कीबोर्ड शॉर्टकट के अलावा, किसी भी एलिमेंट पर राइट-क्लिक करके Inspect चुन सकते हैं। इससे DevTools उसी एलिमेंट को चुनकर खुलता है। Chrome के मेन्यू में भी More tools > Developer tools है।

शुरुआत से ही तीन चीज़ें काम की हैं:

• ऊपर पैनलों के टैब (Elements, Console, Sources, Network वग़ैरह)। कम इस्तेमाल होने वाले पैनल >> तीर के पीछे छिपे रहते हैं।
• Dock की जगह, तीन बिंदु वाले मेन्यू में: दाएँ, नीचे, बाएँ या अलग विंडो में। दो स्क्रीन हों तो अलग विंडो काम की है।
• Command Menu: Ctrl + Shift + P (Mac पर Cmd + Shift + P)। किसी भी फ़ीचर का नाम टाइप करें (“screenshot”, “disable JavaScript”, “dark mode”) और वह मिल जाएगा। DevTools क्या-क्या कर सकता है, यह सीखने का सबसे तेज़ तरीका यही है।

Elements: HTML और CSS देखें और बदलें

Elements पैनल ओरिजिनल सोर्स नहीं, बल्कि लाइव DOM दिखाता है, इसलिए इसमें वह सब भी होता है जो JavaScript ने बाद में जोड़ा। कोई node चुनें, और दाईं ओर Styles पैन हर लागू होने वाला CSS नियम दिखाता है: कौन-सा नियम जीत रहा है और कौन-से कटे हुए हैं।

ये आज़माकर देखें:

• Styles में किसी भी वैल्यू पर क्लिक करके उसे बदलें और नतीजा तुरंत देखें। रीलोड करने पर बदलाव चले जाते हैं, जब तक आप local overrides सेट न करें।
• :hov बटन से :hover और :focus जैसी स्टेट चालू करें, ताकि माउस को एक जगह रोके बिना इंटरैक्टिव स्टेट की स्टाइलिंग कर सकें।
• किसी रंग के बगल वाले छोटे स्वॉच पर क्लिक करके कलर पिकर खोलें। टेक्स्ट के लिए यह कॉन्ट्रास्ट रेशियो भी दिखाता है।
• Computed टैब खोलकर हर प्रॉपर्टी की आख़िरी वैल्यू और box model देखें।
• एलिमेंट के बगल में flex और grid बैज देखें; उन पर क्लिक करने से पेज पर लेआउट की लाइनें दिखने लगती हैं।

Console: JavaScript चलाएँ और errors पढ़ें

Console में पेज के errors, warnings और console.log का आउटपुट दिखता है, और आप पेज के context में JavaScript चला सकते हैं। काम के हेल्पर:

• $0 वह एलिमेंट है जो इस समय Elements पैनल में चुना हुआ है।
• $$('a') किसी selector से मेल खाने वाले सभी एलिमेंट array के रूप में देता है।
• copy(obj) किसी वैल्यू को क्लिपबोर्ड पर कॉपी करता है।
• लेवल (errors, warnings) और टेक्स्ट से फ़िल्टर करके शोर कम करें।

Sources: JavaScript डीबग करें

Sources पैनल पेज की फ़ाइलें दिखाता है, और breakpoints यहीं लगाए जाते हैं। किसी लाइन नंबर पर क्लिक करें ताकि कोड वहाँ रुक जाए, फिर कोड को स्टेप-बाय-स्टेप चलाएँ और variables देखें। Conditional breakpoints (लाइन नंबर पर राइट-क्लिक) तभी रोकते हैं जब कोई expression true हो। Event listener breakpoints किसी भी क्लिक, की-प्रेस या दूसरे event पर रोक देते हैं, जो तब काम आता है जब आपको पता न हो कि कौन-सा कोड चल रहा है।

Network: हर रिक्वेस्ट देखें

Network पैनल में पेज की हर रिक्वेस्ट की लिस्ट होती है: डॉक्यूमेंट, स्क्रिप्ट, इमेज, फ़ॉन्ट और API कॉल, साथ में स्टेटस, साइज़ और टाइमिंग। किसी रिक्वेस्ट पर क्लिक करके उसके headers, payload, response और टाइमिंग का ब्योरा देखें।

रोज़ के काम में:

• DevTools खुला रहते हुए हमेशा ताज़ा फ़ाइलें लोड करने के लिए Disable cache पर टिक करें।
• Throttling ड्रॉपडाउन से धीमा मोबाइल कनेक्शन सिम्युलेट करें।
• टाइप (Fetch/XHR, JS, Img) से फ़िल्टर करके अपनी ज़रूरत वाली रिक्वेस्ट ढूँढें।
• किसी रिक्वेस्ट पर राइट-क्लिक करके उसे fetch या cURL के रूप में कॉपी करें और कहीं और दोबारा चलाएँ।

Performance: पता करें कि पेज धीमा क्यों है

पेज लोड या किसी इंटरैक्शन को रिकॉर्ड करें, और Performance पैनल टाइमलाइन पर दिखाता है कि ब्राउज़र ने क्या-क्या किया: scripting, rendering, painting और network। लंबे टास्क लाल रंग में दिखते हैं। यह पैनल आपके अपने इंटरैक्शन के लिए लाइव Core Web Vitals (LCP, CLS और INP) भी दिखाता है, साथ में insights जो संभावित वजहों की ओर इशारा करते हैं। मोबाइल जैसे नतीजों के लिए रिकॉर्ड करने से पहले CPU throttling को 4x या 6x पर रखें। ज़्यादा जानकारी मोबाइल पेज स्पीड टेस्ट गाइड में है।

Application: storage, cookies और service workers

Application पैनल दिखाता है कि पेज क्या-क्या सेव करता है: cookies, local और session storage, IndexedDB, cache storage और रजिस्टर हुए service workers। आप एंट्री बदल या मिटा सकते हैं। लॉगिन रीसेट करने या पहली बार आने वाले यूज़र का अनुभव टेस्ट करने का यह सबसे तेज़ तरीका है। Clear site data मौजूदा origin का सब कुछ साफ़ कर देता है।

Lighthouse: पेज का ऑडिट करें

Lighthouse पैनल मोबाइल या डेस्कटॉप मोड में परफ़ॉर्मेंस, एक्सेसिबिलिटी, best practices और SEO के ऑटोमैटिक ऑडिट चलाता है। स्टेप-बाय-स्टेप तरीका: Lighthouse से मोबाइल ऑडिट कैसे करें।

Device mode: फ़ोन और टैबलेट एमुलेट करें

device toolbar (DevTools पर फ़ोकस रहते हुए Ctrl + Shift + M या Cmd + Shift + M) पेज को फ़ोन या टैबलेट व्यू में बदल देता है, सही viewport, pixel ratio, user agent और touch events के साथ। इसकी पूरी जानकारी Chrome मोबाइल एमुलेटर गाइड में है। DevTools खोले बिना जल्दी से देखने के लिए मोबाइल व्यू एक्सटेंशन टूलबार के एक बटन से वैसा ही डिवाइस प्रीव्यू देता है।

याद रखने लायक़ शॉर्टकट

DevTools को बढ़ाना

Chrome एक्सटेंशन DevTools में अपने पैनल जोड़ सकते हैं: React, Vue, Angular और Redux के devtools, और axe DevTools जैसे एक्सेसिबिलिटी चेकर। छोटी लिस्ट वेब डेवलपर्स के लिए Chrome एक्सटेंशन में है।

अक्सर पूछे जाने वाले सवाल

Chrome में डेवलपर टूल्स कैसे खोलें?

Windows और Linux पर F12 या Ctrl + Shift + I दबाएँ, Mac पर Cmd + Option + I, या पेज पर राइट-क्लिक करके Inspect चुनें।

क्या Chrome DevTools से किसी वेबसाइट को एडिट कर सकते हैं?

आप बदलाव आज़माने के लिए अपने ब्राउज़र में पेज का HTML और CSS एडिट कर सकते हैं। ये बदलाव सिर्फ़ आपके कंप्यूटर पर होते हैं और रीलोड करने पर चले जाते हैं; असली वेबसाइट नहीं बदलती।

क्या Chrome DevTools फ़्री है?

हाँ। DevTools Chrome और Edge, Brave, Opera जैसे हर Chromium-आधारित ब्राउज़र का हिस्सा है, अलग से कुछ डाउनलोड नहीं करना पड़ता।