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