इस गाइड का मकसद उन लोगों की मदद करना है जो मुख्य रूप से स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी पर भरोसा करते हैं. ये लोग, Chrome DevTools का इस्तेमाल करते हैं. Chrome DevTools, Google Chrome ब्राउज़र में पहले से मौजूद वेब डेवलपर टूल का एक सुइट है. अगर आपको किसी वेब पेज की सुलभता को बेहतर बनाने से जुड़ी DevTools की सुविधाएं चाहिए, तो सुलभता रेफ़रंस देखें.
DevTools की सुलभता पर काम किया जा रहा है. कुछ पैनल और टैब दूसरे पैनल और टैब के मुकाबले सहायक टेक्नोलॉजी के साथ बेहतर काम करते हैं. इस गाइड से आपको ऐसे पैनलों के बारे में जानकारी मिलेगी जो सबसे ज़्यादा ऐक्सेस किए जा सकते हैं. साथ ही, उन पैनलों में मौजूद खास समस्याओं को हाइलाइट किया गया है जिनका सामना करना पड़ सकता है.
खास जानकारी
शुरू करने से पहले, DevTools यूज़र इंटरफ़ेस (यूआई) की बनावट के बारे में समझने के लिए, इसे बेहतर तरीके से समझने में मदद मिलती है. DevTools को पैनल की सीरीज़ में बांट दिया गया है. इन्हें ARIA tablist में व्यवस्थित किया गया है. उदाहरण के लिए:
- एलिमेंट पैनल की मदद से, DOM नोड या सीएसएस को देखा और बदला जा सकता है.
- कंसोल पैनल में, JavaScript लॉग और लाइव एडिट ऑब्जेक्ट पढ़ने की सुविधा मिलती है.
हर पैनल के कॉन्टेंट एरिया में, कई अलग-अलग टूल होते हैं. इन्हें दस्तावेज़ों में अक्सर टैब या पैनल कहा जाता है. उदाहरण के लिए, एलिमेंट पैनल में इवेंट लिसनर, सुलभता ट्री वगैरह की जांच करने के लिए अतिरिक्त टैब होते हैं. टैब और पैनल के बीच का अंतर कुछ हद तक अलग होता है. आपको सिर्फ़ एक शब्द या दूसरे शब्द दिखने की वजह यह है कि बाकी आधिकारिक DevTools दस्तावेज़ों में आपको एक जैसा अनुभव मिले.
कीबोर्ड शॉर्टकट
DevTools कीबोर्ड शॉर्टकट रेफ़रंस काम की चीटशीट है. इसे बुकमार्क करना न भूलें. साथ ही, अलग-अलग पैनल को एक्सप्लोर करते समय, इस पर वापस आएं.
DevTools खोलें
शुरू करने के लिए, Chrome DevTools खोलें पढ़ें. कीबोर्ड शॉर्टकट या मेन्यू आइटम की मदद से DevTools खोलने के कई तरीके हैं.
पैनल के बीच नेविगेट करना
कीबोर्ड से नेविगेट करें
- DevTools खुले होने पर, अगले पैनल पर फ़ोकस करने के लिए Control+] या Command+] (Mac) दबाएं.
- पिछले पैनल पर फ़ोकस करने के लिए, Control+[ या Command+[ (Mac) दबाएं.
- फ़ोकस को पैनल के
tablistपर ले जाने के लिए, Shift+Tab का इस्तेमाल भी किया जा सकता है और पैनल बदलने के लिए ऐरो बटन का इस्तेमाल किया जा सकता है. हालांकि, पहले बताए गए शॉर्टकट इस्तेमाल करना ज़्यादा तेज़ हो सकता है.
आम तौर पर होने वाली समस्याएं
- कंसोल और परफ़ॉर्मेंस पैनल जैसे कुछ पैनल चालू होते ही, आपका फ़ोकस कॉन्टेंट एरिया पर ले जाते हैं. इससे, ऐरो बटन का इस्तेमाल करके नेविगेट करना मुश्किल हो सकता है.
- चुने गए पैनल का नाम बताया जाता है, लेकिन ऐसा तब ही किया जाता है, जब पैनल में फ़ोकस किए गए कॉन्टेंट को पढ़ लिया जाता है. इसकी वजह से, आपकी नज़रें आसानी से छूट सकती हैं.
निर्देश मेन्यू के हिसाब से नेविगेट करें
किसी खास पैनल पर फ़ोकस करने के लिए, निर्देश मेन्यू का इस्तेमाल करें:
- DevTools खोलने के बाद, Command मेन्यू खोलने के लिए, Control+Shift+P या Command+Shift+P (Mac) दबाएं. कमांड मेन्यू एक फ़ज़ी सर्च ऑटोकंप्लीट कॉम्बोबॉक्स है.
- उस पैनल का नाम लिखें जिसे आपको खोलना है. इसके बाद, सही विकल्प पर जाने के लिए, डाउन ऐरो कीबोर्ड का इस्तेमाल करें.
- कोई निर्देश देने के लिए, Enter दबाएं.
उदाहरण के लिए, एलिमेंट पैनल खोलने के लिए:
- निर्देश मेन्यू खोलें.
- E टाइप करें, फिर L टाइप करें. पैनल > एलिमेंट दिखाएं विकल्प चुना गया.
- पैनल खोलने वाला निर्देश चलाने के लिए, Enter दबाएं.
किसी पैनल को इस तरह से खोलने से, फ़ोकस को पैनल के कॉन्टेंट पर ले जाता है. एलिमेंट पैनल के मामले में, फ़ोकस DOM ट्री में चला जाता है.
एलिमेंट पैनल
पेज पर किसी एलिमेंट की जांच करना
- स्क्रीन रीडर के कर्सर का इस्तेमाल करके, उस एलिमेंट पर जाएं जिसकी आपको जांच करनी है.
- संदर्भ मेन्यू खोलने के लिए, एलिमेंट पर राइट माउस क्लिक करने की प्रोसेस को सिम्युलेट करें.
- जांच करें विकल्प चुनें. इससे एलिमेंट पैनल खुलता है और एलिमेंट को DOM ट्री में फ़ोकस किया जाता है.
DOM ट्री को ARIA tree के तौर पर बनाया गया है. उदाहरण के लिए, डीओएम ट्री पर
कीबोर्ड से नेविगेट करना देखें.
DOM ट्री में किसी एलिमेंट का कोड कॉपी करना
- DOM ट्री में किसी नोड पर फ़ोकस करते हुए, दायां क्लिक वाला संदर्भ मेन्यू खोलें.
- कॉपी करें विकल्प को बड़ा करें.
- outerHTML कॉपी करें चुनें.
आम तौर पर होने वाली समस्याएं
- कॉपी करने पर आउटरHTML अक्सर मौजूदा नोड को नहीं चुनता है, बल्कि इसके बजाय पैरंट नोड को चुनता है. हालांकि, एलिमेंट का कॉन्टेंट अब भी कॉपी किए गए outerHTML में होना चाहिए.
DOM ट्री में किसी एलिमेंट के एट्रिब्यूट में बदलाव करना
- DOM ट्री में किसी नोड पर फ़ोकस करते हुए, उसमें बदलाव करने के लिए Enter दबाएं.
- एट्रिब्यूट की वैल्यू के बीच स्विच करने के लिए, Tab दबाएं. "स्पेस" सुनाई देने पर आप एक खाली टेक्स्ट इनपुट के अंदर हो जाते हैं और एक नई विशेषता का मान टाइप कर सकते हैं.
- बदलाव स्वीकार करने और एलिमेंट का पूरा कॉन्टेंट सुनने के लिए, Control+Enter या Command+Enter (Mac) दबाएं.
आम तौर पर होने वाली समस्याएं
- टेक्स्ट इनपुट में टाइप करने पर, आपको कोई सुझाव या राय नहीं मिलती. अगर कोई टाइपिंग की जाती है और इनपुट को एक्सप्लोर करने के लिए ऐरो बटन का इस्तेमाल किया जाता है, तो आपको कोई सुझाव या राय नहीं मिलेगी. अपने काम की जांच करने का सबसे आसान तरीका है, बदलाव को स्वीकार करना और फिर पूरे एलिमेंट का एलान करना.
DOM ट्री में किसी एलिमेंट के एचटीएमएल में बदलाव करना
- DOM ट्री में किसी नोड पर फ़ोकस करते हुए, उसमें बदलाव करने के लिए Enter दबाएं.
- एट्रिब्यूट की वैल्यू के बीच स्विच करने के लिए, Tab दबाएं. इंस्टेंस "h2" के लिए एलिमेंट का नाम सुनाई देने पर, आप टेक्स्ट इनपुट में होते हैं और एलिमेंट का टाइप बदल सकता है.
- बदलाव को स्वीकार करने के लिए, Control+Enter या Command+Enter (Mac) दबाएं.
उदाहरण के लिए, h3 टाइप करने और Control+Enter या
Command+Enter (Mac) दबाने पर एलिमेंट के स्टार्ट और एंड टैग बदलकर h3 हो जाते हैं.
एलिमेंट पैनल के टैब
एलिमेंट पैनल में चीज़ों की जांच करने के लिए अतिरिक्त टैब होते हैं. जैसे, किसी एलिमेंट पर लागू किया गया सीएसएस या सुलभता ट्री में उसकी जगह.
- DOM ट्री में किसी नोड पर फ़ोकस करते हुए, Tab को तब तक दबाकर रखें, जब तक आपको यह न सुनाई दे कि स्टाइल पैनल चुना गया है.
- अन्य उपलब्ध टैब एक्सप्लोर करने के लिए, राइट ऐरो का इस्तेमाल करें.
DOM ट्री href एट्रिब्यूट वाले एलिमेंट को फ़ोकस करने लायक लिंक में बदल देता है. इसलिए, हो सकता है कि आपको स्टाइल पैनल पर पहुंचने के लिए, Tab को एक से ज़्यादा बार दबाना पड़े.
आम तौर पर होने वाली समस्याएं
DOM ब्रेकपॉइंट और प्रॉपर्टी टैब से, कीबोर्ड को ऐक्सेस नहीं किया जा सकता.
स्टाइल पैनल
स्टाइल पैनल में, आपको स्टाइल को फ़िल्टर करने, एलिमेंट की स्थितियों (जैसे कि :active और :focus) को टॉगल करने, क्लास को टॉगल करने, और नई क्लास जोड़ने के कंट्रोल मिलेंगे. DOM ट्री में जिस एलिमेंट पर फ़ोकस किया गया है उस पर लागू की गई स्टाइल को एक्सप्लोर करने और उनमें बदलाव करने के लिए, एक असरदार स्टाइल जांचने वाला टूल भी है.
स्टाइल पैनल के बारे में समझने का मुख्य सिद्धांत यह है कि यह सिर्फ़ DOM ट्री में चुने गए मौजूदा नोड के लिए स्टाइल दिखाता है. उदाहरण के लिए, मान लें कि आपने किसी <header> नोड की स्टाइल की जांच कर ली है और अब आपको <footer> नोड की स्टाइल देखनी है. ऐसा करने के लिए, पहले आपको
DOM ट्री में <footer> नोड चुनना होगा. जांच करें वर्कफ़्लो का इस्तेमाल करके, footer नोड के सामान्य आस-पास के नोड (जैसे कि फ़ुटर में मौजूद लिंक) की जांच की जा सकती है. यह DOM ट्री पर फ़ोकस करता है. इसके बाद, कीबोर्ड का इस्तेमाल करके उस नोड पर जाएं जिसमें आपकी दिलचस्पी हो.
स्टाइल पैनल में नेविगेट करना
स्टाइल पैनल से सभी स्टाइल टूल एक ही तरीके से या किसी दूसरे तरीके से कनेक्ट हो जाते हैं. इसलिए, सबसे पहले इस टूल का विशेषज्ञ बनने में मदद मिलती है.
- स्टाइल पैनल पर फ़ोकस करते हुए, Tab को दबाकर, फ़ोकस को अंदर ले जाएं और उसकी सामग्री को एक्सप्लोर करें.
- Tab को तब तक दबाएं, जब तक कि पहली स्टाइल चालू न हो जाए. अगर स्क्रीन रीडर का इस्तेमाल किया जा रहा है, तो इस पहली स्टाइल को "element.style {}" के तौर पर बोला जाएगा.
- खासियत के हिसाब से स्टाइल की सूची में नेविगेट करने के लिए, डाउन ऐरो दबाएं. स्क्रीन रीडर हर स्टाइल के बारे में सीएसएस फ़ाइल का नाम, जिस लाइन नंबर पर स्टाइल दिखता है, और स्टाइल के नाम के साथ शुरू होता है. उदाहरण के लिए: "main.css:233 .card__img {}"
- किसी स्टाइल की ज़्यादा बारीकी से जांच करने के लिए, Enter दबाएं. फ़ोकस, स्टाइल के नाम के बदलाव करने लायक वर्शन पर शुरू होता है.
- हर सीएसएस प्रॉपर्टी के बदलाव किए जा सकने वाले वर्शन और उनसे जुड़ी वैल्यू के बीच जाने के लिए, Tab दबाएं. हर स्टाइल ब्लॉक के आखिर में, बदलाव करने लायक खाली टेक्स्ट फ़ील्ड होता है. इसे और सीएसएस प्रॉपर्टी जोड़ने के लिए इस्तेमाल किया जा सकता है.
- स्टाइल की सूची में ऊपर-नीचे जाने के लिए, Tab को दबाकर रखें. इसके अलावा, Escape दबाकर इस मोड से बाहर निकलकर, वापस जाने के लिए ऐरो बटन का इस्तेमाल भी किया जा सकता है.
अतिरिक्त शॉर्टकट के लिए, स्टाइल पैनल कीबोर्ड रेफ़रंस ज़रूर पढ़ें.
समस्याएं जिनके बारे में जानकारी है
- अगर बदलाव किए जा सकने वाले फ़िल्टर फ़ील्ड का इस्तेमाल किया जाता है, तो स्टाइल की सूची में नेविगेट नहीं किया जा सकेगा.
एलिमेंट की स्थिति को टॉगल करें
किसी एलिमेंट की स्थिति, जैसे कि :active या :focus को टॉगल करने के लिए:
- स्टाइल पैनल पर जाएं और Tab को तब तक दबाकर रखें, जब तक टॉगल एलिमेंट स्टेट बटन पर फ़ोकस न आ जाए.
- एलिमेंट की स्थितियों के कलेक्शन को बड़ा करने के लिए, Enter दबाएं. एलिमेंट की स्थितियों को चेकबॉक्स के ग्रुप के तौर पर दिखाया जाता है.
- Tab को तब तक दबाकर रखें, जब तक कि पहली स्थिति,
:activeपर फ़ोकस न आ जाए. - इसे चालू करने के लिए, Space दबाएं. अगर DOM ट्री में चुने गए मौजूदा एलिमेंट में
:activeस्टाइल है, तो अब उसे लागू कर दिया गया है. - सभी उपलब्ध स्थितियों को एक्सप्लोर करने के लिए, Tab को दबाकर रखें.
कोई एग्ज़िट क्लास जोड़ें
टॉगल एलिमेंट स्टेट बटन के बगल में एलिमेंट क्लास बटन है. फ़ोकस को Tab और फिर Enter दबाकर उस पर ले जाएं. फ़ोकस, नई क्लास जोड़ें लेबल वाले बदलाव करने वाले टेक्स्ट फ़ील्ड में चला जाएगा.
एलिमेंट क्लास बटन का इस्तेमाल, मुख्य रूप से किसी एलिमेंट में मौजूदा क्लास को जोड़ने के लिए किया जाता है. उदाहरण
के लिए, अगर आपकी स्टाइलशीट में .clearfix नाम का हेल्पर क्लास है, तो क्लास के सुझावों की सूची देखने के लिए, बदलाव करने वाले टेक्स्ट फ़ील्ड में . दबाएं. साथ ही, .clearfix सुझाव पाने के लिए, डाउन ऐरो का इस्तेमाल करें. इसके अलावा, कक्षा का नाम खुद टाइप करें और इसे लागू करने के लिए, Enter दबाएं.
नया स्टाइल नियम जोड़ें
एलिमेंट क्लास बटन के बगल में नया स्टाइल नियम बटन है. फ़ोकस को Tab दबाकर और Enter दबाकर उस पर ले जाएं. फ़ोकस, स्टाइल इंस्पेक्टर के अंदर बदलाव करने लायक टेक्स्ट फ़ील्ड में चला जाता है. फ़ील्ड का शुरुआती टेक्स्ट कॉन्टेंट, DOM ट्री में चुने गए एलिमेंट का टैग नाम होता है. इस फ़ील्ड में किसी भी क्लास का नाम टाइप करें. इसके बाद, सीएसएस प्रॉपर्टी असाइन करने के लिए, Tab दबाएं.
कंप्यूटेड टैब
कंप्यूटेड टैब पर फ़ोकस करते हुए, Tab को दबाकर, फ़ोकस को इसके कॉन्टेंट पर ले जाएं और उसके कॉन्टेंट को एक्सप्लोर करें. कंप्यूट किए गए टैब में यह कंट्रोल करने की सुविधा मिलती है कि किसी एलिमेंट पर, तय किए गए क्रम के हिसाब से कौनसी सीएसएस प्रॉपर्टी लागू की गई हैं.
कंप्यूट किए गए सभी स्टाइल एक्सप्लोर करें
Tab को तब तक दबाकर रखें, जब तक कि आप कंप्यूट की गई स्टाइल के कलेक्शन तक नहीं पहुंच जाते. इन्हें ARIA tree के तौर पर दिखाया जाता है. सूची बॉक्स को बड़ा करने पर, यह पता चलता है कि कौनसे सीएसएस सिलेक्टर ने कंप्यूट की गई स्टाइल का इस्तेमाल किया है. ये
चुनने वाले लोगों को उनकी खासियत के आधार पर व्यवस्थित किया जाता है. स्क्रीन रीडर, कंप्यूट किए गए उस वैल्यू के बारे में बताता है जो सीएसएस सिलेक्टर से फ़िलहाल मैच हो रही है. यह जानकारी उस स्टाइलशीट के फ़ाइल नाम के साथ-साथ, सिलेक्टर के लिए लाइन नंबर की जानकारी भी देती है.
आम तौर पर होने वाली समस्याएं
- फ़िल्टर टेक्स्ट फ़ील्ड का इस्तेमाल करने पर, स्टाइल की जांच नहीं की जा सकेगी.
इवेंट लिसनर टैब
एलिमेंट पैनल में, इवेंट लिसनर टैब का इस्तेमाल करके, किसी एलिमेंट पर लागू किए गए इवेंट लिसनर की जांच की जा सकती है. स्टाइल पैनल पर फ़ोकस करते हुए, इवेंट की पहचान करने वाले टैब पर जाने के लिए राइट ऐरो दबाएं.
इवेंट लिसनर एक्सप्लोर करें
इवेंट लिसनर को ARIA tree के तौर पर दिखाया जाता है. उन पर जाने के लिए, ऐरो बटन का इस्तेमाल किया जा सकता है. स्क्रीन रीडर उस DOM ऑब्जेक्ट के नाम के बारे में बताता है जिससे इवेंट लिसनर जुड़ा है. साथ ही, उस फ़ाइल के नाम के बारे में भी बताता है जहां इवेंट लिसनर को तय किया गया है. साथ ही, यह बताता है कि उसका लाइन नंबर क्या है.
सुलभता पैनल
सुलभता पैनल पर फ़ोकस करते हुए, Tab को दबाकर, फ़ोकस को अंदर ले जाएं और इसके कॉन्टेंट को एक्सप्लोर करें. सुलभता पैनल में, सुलभता ट्री, किसी एलिमेंट पर लागू किए गए ARIA एट्रिब्यूट, और उसकी कंप्यूट की गई सुलभता प्रॉपर्टी को एक्सप्लोर करने के कंट्रोल होते हैं.
सुलभता ट्री
सुलभता ट्री को ARIA tree के रूप में दिखाया जाता है. इसमें हर treeitem, DOM में किसी एलिमेंट से जुड़ा होता है. ट्री, चुने गए नोड के लिए कंप्यूट की गई भूमिका के बारे में बताता है. div और span जैसे सामान्य एलिमेंट को ट्री में "सामान्य कंटेनर" के तौर पर बताया जाता है. ट्री को एक्सप्लोर करने और पैरंट-चाइल्ड रिलेशनशिप
के बारे में जानने के लिए, ऐरो बटन का इस्तेमाल करें.
आम तौर पर होने वाली समस्याएं
- ऐसा हो सकता है कि सुलभता पैनल में जिस तरह का ARIA ट्री इस्तेमाल किया जाता है, वह VoiceOver जैसे macOS स्क्रीन रीडर के लिए, Chrome में ठीक से न दिखे. इस समस्या पर प्रगति के बारे में सूचना पाने के लिए, Chromium समस्या #868480 की सदस्यता लें.
- ARIA एट्रिब्यूट और कंप्यूटेड प्रॉपर्टी सेक्शन को ARIA ट्री के तौर पर मार्क किया जाता है. हालांकि, अभी इनमें फ़ोकस मैनेजमेंट नहीं है, इसलिए वे कीबोर्ड इस्तेमाल करने लायक नहीं हैं.
ऑडिट पैनल
ऑडिट पैनल की मदद से, किसी साइट पर कई तरह के टेस्ट किए जा सकते हैं, ताकि परफ़ॉर्मेंस, सुलभता, एसईओ, और कई अन्य कैटगरी से जुड़ी सामान्य समस्याओं का पता लगाया जा सके.
ऑडिट कॉन्फ़िगर करना और चलाना
- जब ऑडिट पैनल पहली बार खोला जाता है, तो फ़ोकस फ़ॉर्म के आखिर में ऑडिट चलाएं बटन पर होता है. डिफ़ॉल्ट रूप से, फ़ॉर्म को सिम्युलेटेड 3G कनेक्शन पर मोबाइल एम्युलेशन का इस्तेमाल करके हर कैटगरी का ऑडिट चलाने के लिए कॉन्फ़िगर किया जाता है.
- ऑडिट सेटिंग बदलने के लिए, Shift+Tab का इस्तेमाल करें या ब्राउज़ मोड में वापस नेविगेट करें.
- जब आप ऑडिट करने के लिए तैयार हों, तब ऑडिट चलाएं बटन पर वापस जाएं और Enter दबाएं.
- फ़ोकस, रद्द करें बटन के साथ मोडल विंडो में चला जाता है. इसकी मदद से, ऑडिट से बाहर निकला जा सकता है. ऑडिट चलने पर आपको ईयरकॉन की आवाज़ सुनाई दे सकती है और पेज को कई बार रीफ़्रेश किया जा सकता है.
आम तौर पर होने वाली समस्याएं
- कॉन्फ़िगरेशन फ़ॉर्म के अलग-अलग सेक्शन को फ़िलहाल
fieldsetएलिमेंट से मार्क नहीं किया गया है. हर सेक्शन से कौन से कंट्रोल जुड़े हुए हैं, यह पता लगाने के लिए उन्हें ब्राउज़ मोड में नेविगेट करना आसान हो सकता है. - ऑडिट पूरा होने के बाद, कोई ईयरकॉन या लाइव क्षेत्र की सूचना नहीं होती है. आम तौर पर, इसमें करीब 30 सेकंड लगते हैं. इसके बाद, नतीजों पर जाया जा सकता है. ब्राउज़ करें मोड का इस्तेमाल करना, नतीजों तक पहुंचने का सबसे आसान तरीका हो सकता है.
ऑडिट रिपोर्ट पर जाना
ऑडिट रिपोर्ट को ऐसे सेक्शन में व्यवस्थित किया जाता है जो हर ऑडिट कैटगरी से जुड़े होते हैं. रिपोर्ट में हर कैटगरी के स्कोर की सूची होती है. ये स्कोर भी ऐसे लिंक हैं
जिनका इस्तेमाल सीधे सेक्शन पर जाने के लिए किया जा सकता है. हर सेक्शन में, बड़े किए जा सकने वाले details एलिमेंट होते हैं.
इनमें पास या फ़ेल हुए ऑडिट की जानकारी होती है. डिफ़ॉल्ट रूप से, सिर्फ़ काम न करने वाले ऑडिट दिखाए जाते हैं.
हर सेक्शन एक फ़ाइनल details एलिमेंट के साथ खत्म होता है, जिसमें पास किए गए सभी ऑडिट शामिल होते हैं.
नया ऑडिट शुरू करने के लिए, Shift+Tab का इस्तेमाल करके, रिपोर्ट से बाहर निकलें और ऑडिट करें बटन खोजें.