ज़्यादातर वेब डेवलपर आख़िर में जिन Chrome एक्सटेंशन को रखते हैं, वे पाँच ग्रुप में आते हैं: फ़्रेमवर्क devtools (React, Vue, Angular, Redux), एक्सेसिबिलिटी चेकर (axe DevTools, WAVE), पेज इंस्पेक्टर (Web Developer, WhatFont, ColorZilla, Wappalyzer), एक मोबाइल व्यू टूल और कुछ छोटी यूटिलिटी। सिर्फ़ वही इंस्टॉल करें जिन्हें आप हर हफ़्ते इस्तेमाल करते हैं, क्योंकि हर एक्सटेंशन नई परमिशन जोड़ता है और ब्राउज़र को धीमा कर सकता है। नीचे बताया गया है कि हर एक्सटेंशन ऐसा क्या करता है जो Chrome DevTools पहले से नहीं करता।
एक बात साफ़ कर दें: Mobile View Extension हमारा बनाया हुआ है और वह मोबाइल वाले सेक्शन में है। बाक़ी एक्सटेंशन दूसरे डेवलपर्स के हैं और इस लिस्ट में इसलिए हैं क्योंकि वे एक साफ़ कमी पूरी करते हैं।
पहले देखें कि Chrome DevTools में क्या पहले से है
कुछ भी जोड़ने से पहले यह जानना अच्छा है कि ब्राउज़र में क्या बिल्ट-इन है। Chrome DevTools में एलिमेंट और CSS इंस्पेक्शन, JavaScript डीबगर, नेटवर्क और परफ़ॉर्मेंस रिकॉर्डिंग, मोबाइल के लिए डिवाइस एमुलेशन (गाइड), user agent बदलने की सुविधा (गाइड), Lighthouse ऑडिट (गाइड), Styles पैनल में कलर पिकर और कॉन्ट्रास्ट चेकर, और CSS Overview शामिल हैं। कई पुराने “web developer” एक्सटेंशन यही फ़ीचर दोहराते हैं। बिल्ट-इन पैनलों की पूरी जानकारी हमारी Chrome DevTools गाइड में है।
फ़्रेमवर्क devtools
| एक्सटेंशन | किसने बनाया | क्या जोड़ता है |
|---|---|---|
| React Developer Tools | Meta (React टीम) | Components और Profiler पैनल: props, state और hooks देखें, धीमे render पकड़ें |
| Vue.js devtools | Vue टीम | Vue ऐप के लिए कंपोनेंट ट्री, Pinia state, router और timeline |
| Angular DevTools | Angular टीम | कंपोनेंट एक्सप्लोरर और change detection प्रोफ़ाइलर |
| Redux DevTools | Redux मेंटेनर | Redux और उससे मिलते-जुलते store के लिए action लॉग, state diff और time-travel डीबगिंग |
जिस फ़्रेमवर्क पर आप काम करते हैं, उसी का devtools इंस्टॉल करें। ये सिर्फ़ उन्हीं पेजों पर एक्टिव होते हैं जो वह फ़्रेमवर्क इस्तेमाल करते हैं।
एक्सेसिबिलिटी चेकर
axe DevTools (Deque की ओर से) DevTools में एक पैनल जोड़ता है जो पेज को WCAG से जुड़ी गड़बड़ियों के लिए स्कैन करता है, जैसे गायब लेबल, कम कॉन्ट्रास्ट और ARIA की ग़लतियाँ। हर समस्या के साथ समझाने वाला टेक्स्ट और नियम का लिंक मिलता है। इसका फ़्री वर्शन ऑटोमैटिक स्कैन के लिए काफ़ी है।
WAVE (WebAIM की ओर से) सीधे पेज पर आइकन दिखाता है, ताकि पता चले कि हर error, alert और स्ट्रक्चर वाला एलिमेंट कहाँ है। डिज़ाइनरों और कंटेंट एडिटरों को समस्या समझाने के लिए यह ख़ास तौर पर अच्छा है।
ऑटोमैटिक चेकर एक्सेसिबिलिटी की सिर्फ़ कुछ ही समस्याएँ पकड़ पाते हैं। इनके साथ कीबोर्ड से टेस्टिंग और स्क्रीन रीडर का इस्तेमाल भी करें।
पेज इंस्पेक्टर
Web Developer (Chris Pederick का बनाया) एक पुराना और भरोसेमंद टूलबार है जिसमें सैकड़ों छोटे टूल हैं: CSS या JavaScript बंद करना, एलिमेंट की आउटलाइन दिखाना, इमेज का alt टेक्स्ट दिखाना, फ़ॉर्म की डिटेल देखना और भी बहुत कुछ। इनमें से कई फ़ीचर DevTools में कहीं न कहीं मौजूद हैं, लेकिन टूलबार उन्हें एक क्लिक की दूरी पर ले आता है।
WhatFont उस टेक्स्ट का फ़ॉन्ट बताता है जिस पर आप माउस ले जाते हैं, और यह भी कि असल में कौन-सा fallback फ़ॉन्ट इस्तेमाल हो रहा है।
ColorZilla एक आईड्रॉपर जोड़ता है जिससे पेज पर कहीं से भी रंग उठा सकते हैं। साथ में रंगों की हिस्ट्री और ग्रेडिएंट जनरेटर भी मिलता है।
Wappalyzer बताता है कि कोई साइट कौन-सी टेक्नोलॉजी इस्तेमाल करती है: CMS, फ़्रेमवर्क, एनालिटिक्स और होस्टिंग। कॉम्पिटिटर रिसर्च के लिए और प्रोजेक्ट शुरू करने से पहले क्लाइंट का स्टैक समझने के लिए यह काम आता है।
मोबाइल व्यू और रिस्पॉन्सिव टेस्टिंग
DevTools का device mode ताक़तवर है, लेकिन हर टैब में इसके लिए कई स्टेप लगते हैं और यह स्क्रीन का बड़ा हिस्सा घेर लेता है। अगर आप दिन में कई बार मोबाइल लेआउट जाँचते हैं, तो एक अलग एक्सटेंशन से समय बचता है।
Mobile View Extension मौजूदा टैब को फ़ोन या टैबलेट के फ़्रेम में दोबारा लोड करता है, और साथ में डिवाइस के हिसाब से user agent, client hints, स्क्रीन साइज़ और pixel ratio सेट करता है। आप Apple और Android के नाम वाले प्रीसेट चुन सकते हैं या अपना रेज़ोल्यूशन डाल सकते हैं, स्क्रीन को landscape में घुमा सकते हैं और फ़्रेम वाले व्यू का PNG स्क्रीनशॉट सेव कर सकते हैं। यह localhost पर काम करता है, दूसरे पेज पर जाने पर भी चालू रहता है और ब्राउज़िंग डेटा इकट्ठा नहीं करता। इसकी सीमाएँ वही हैं जो ब्राउज़र के अंदर चलने वाले ज़्यादातर प्रीव्यू की होती हैं: इंटरैक्शन माउस से होता है, touch events नहीं होते, और hover व pointer जैसी कुछ media queries पूरी तरह एमुलेट नहीं होतीं। विस्तार से तुलना मोबाइल सिम्युलेटर एक्सटेंशन बनाम DevTools में पढ़ें।
यूटिलिटी
JSON viewer एक्सटेंशन API का URL खोलने पर कच्चे JSON को खुलने-बंद होने वाले ट्री के रूप में दिखाता है। Chrome डिफ़ॉल्ट रूप से इसे सादा टेक्स्ट दिखाता है।
User agent switcher तब काम आता है जब आप अक्सर डिवाइस डिटेक्शन या किसी ख़ास ब्राउज़र के लिए लिखा कोड टेस्ट करते हैं। पहले पढ़ लें कि user agent switcher असल में क्या करता है। मोबाइल लेआउट के लिए मोबाइल व्यू टूल बेहतर रहता है।
कैसे पता करें कि एक्सटेंशन सुरक्षित है
डेवलपर्स के एक्सटेंशन अक्सर सभी साइटों का एक्सेस माँगते हैं। इसका मतलब है कि वे आपके खोले हर पेज को पढ़ और बदल सकते हैं, एडमिन पैनल और ईमेल समेत। इंस्टॉल करने से पहले:
- देखें कि इसे कौन पब्लिश करता है। फ़्रेमवर्क devtools उसी फ़्रेमवर्क की अपनी टीम से आने चाहिए।
- Chrome Web Store पेज पर परमिशन पढ़ें। फ़ॉन्ट पहचानने वाले टूल को आपके डाउनलोड का एक्सेस नहीं चाहिए।
- प्राइवेसी पॉलिसी पढ़ें। उसमें लिखा होना चाहिए कि क्या इकट्ठा किया जाता है। ज़्यादातर डेवलपर टूल के लिए “कुछ नहीं” सबसे अच्छा जवाब है।
- आख़िरी अपडेट की तारीख़ देखें। जिन एक्सटेंशन का रखरखाव नहीं होता, वे Chrome अपडेट के साथ टूट जाते हैं और उनमें सिक्योरिटी फ़िक्स नहीं आते।
- मालिक बदलने पर नज़र रखें। लोकप्रिय एक्सटेंशन कभी-कभी बेच दिए जाते हैं और फिर उनमें विज्ञापन आने लगते हैं। अगर किसी एक्सटेंशन का व्यवहार अचानक बदल जाए, तो उसे हटा दें।
अगर आप डेवलपर एक्सटेंशन को अपनी निजी ब्राउज़िंग से अलग रखना चाहते हैं, तो डेवलपमेंट के लिए अलग Chrome प्रोफ़ाइल बनाएँ।
शुरुआत के लिए छोटा सेट
नई मशीन सेट कर रहे हैं, तो इनसे शुरू करें:
- आपके फ़्रेमवर्क का devtools
- axe DevTools या WAVE
- एक मोबाइल व्यू एक्सटेंशन
- WhatFont या ColorZilla, अगर आप डिज़ाइन के साथ क़रीब से काम करते हैं
बाक़ी तभी जोड़ें जब आप देखें कि कोई काम बार-बार दोहरा रहे हैं और कोई एक्सटेंशन उसे आसान कर सकता है।
अक्सर पूछे जाने वाले सवाल
वेब डेवलपर्स के लिए सबसे काम का Chrome एक्सटेंशन कौन-सा है?
जिस फ़्रेमवर्क से आप बनाते हैं, उसका devtools, क्योंकि Chrome में उसका कोई विकल्प नहीं है। उसके बाद ज़्यादातर फ़्रंट-एंड डेवलपर्स के लिए एक्सेसिबिलिटी चेकर और मोबाइल व्यू टूल सबसे ज़्यादा फ़ायदा देते हैं।
क्या Chrome एक्सटेंशन ब्राउज़र को धीमा करते हैं?
हर एक्सटेंशन मेमोरी लेता है और हर पेज पर स्क्रिप्ट चला सकता है। कुछ अच्छे बने एक्सटेंशन से ख़ास फ़र्क़ नहीं पड़ता, लेकिन दर्जनों एक्सटेंशन पेज लोड और DevTools को धीमा कर सकते हैं। जिन्हें इस्तेमाल नहीं कर रहे, उन्हें बंद कर दें।
क्या Lighthouse एक एक्सटेंशन है?
Lighthouse Chrome DevTools में एक पैनल के रूप में बिल्ट-इन है। इसका अलग एक्सटेंशन भी मौजूद है, लेकिन आम तौर पर इसे DevTools पैनल से ही चलाया जाता है।