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