Chrome DevTools की टीम, फ़ॉर्म से जुड़ी समस्याओं का पता लगाने और ऑटोमैटिक भरने की सुविधा को डीबग करने में आपकी मदद करने के लिए, नई सुविधाएं बना रही है.
हम Chrome Canary में, DevTools में नई सुविधाओं की जांच कर रहे हैं. इनसे डेवलपर को यह समझने में मदद मिलेगी कि फ़ॉर्म में जानकारी अपने-आप भरने की सुविधा कैसे काम करती है और कभी-कभी यह काम क्यों नहीं करती:
- ब्राउज़र की ऑटोमैटिक भरने की सुविधा, फ़ील्ड बनाने के लिए सेव की गई वैल्यू को कैसे मैप करती है?
- फ़ॉर्म फ़ील्ड भरने के लिए, ऑटोमैटिक भरने की सुविधा किन शर्तों का इस्तेमाल करती है?
- अपने-आप भरने की सुविधा से कौनसे फ़ील्ड नहीं भरे गए?
- अपने-आप भरने की सुविधा से, फ़ॉर्म फ़ील्ड क्यों नहीं भरता?
इस लेख में, Chrome DevTools की नई सुविधाओं के बारे में बताया गया है. साथ ही, इन सुविधाओं को टेस्ट करने और उनसे जुड़ा सुझाव/राय देने का तरीका भी बताया गया है.
ऑटोमैटिक भरने की सुविधा क्या है?
Chrome, उपयोगकर्ताओं को पते, पेमेंट, और लॉगिन की जानकारी मैनेज करने में मदद करता है. इसके लिए, यह डेटा के सेट को सुरक्षित तरीके से सेव करता है और उपयोगकर्ता को टेक्स्ट डाले बिना फ़ॉर्म फ़ील्ड भरने का विकल्प देता है. इसे ऑटोमैटिक भरना कहते हैं.
फ़ॉर्म सबमिट करने पर, Chrome आपको ऑटोमैटिक भरी जाने वाली जानकारी को सेव करने का विकल्प देता है. मोबाइल पर:
इसके बाद, Chrome सेव किए गए डेटा की मदद से फ़ॉर्म को ऑटोमैटिक भरने का विकल्प देता है.
मोबाइल पर:
डेस्कटॉप पर:
Chrome की सेटिंग में जाकर, ऑटोमैटिक भरने की सुविधा से जुड़ा डेटा मैनेज किया जा सकता है.
मोबाइल पर:
डेस्कटॉप पर:
आपको यह भी दिख सकता है कि Chrome, इनपुट फ़ील्ड के लिए ऐसे सुझाव दिखाता है जो पते, क्रेडिट कार्ड या लॉगिन डेटा से जुड़े नहीं हैं. Chrome, स्ट्रक्चर्ड डेटा के सेट के लिए ऑटोमैटिक भरने की सुविधा देता है. जैसे, पता और पेमेंट की जानकारी. साथ ही, Chrome उन एक फ़ॉर्म फ़ील्ड के लिए डेटा फिर से डालने से उपयोगकर्ताओं को बचाता है जिन्हें ऑटोमैटिक भरने की सुविधा से मैनेज नहीं किया जा सकता. जब किसी फ़ॉर्म में ऐसा फ़ील्ड होता है जिसमें name एट्रिब्यूट की वैल्यू पहले से मौजूद होती है, तो Chrome आपको वैल्यू का सुझाव दे सकता है. इससे, आपको डेटा फिर से डालने की ज़रूरत नहीं पड़ती.
इसका एक आसान सा उदाहरण देखें :
Chrome DevTools से पता चलता है कि यहां मौजूद फ़ॉर्म फ़ील्ड में ऐसे एट्रिब्यूट नहीं हैं जो ब्राउज़र के लिए काम के हों. इसके बजाय, यह n300 का सिर्फ़ name एट्रिब्यूट है.
यह फ़ील्ड, स्ट्रक्चर्ड डेटा के सेट में मौजूद किसी ऐसी वैल्यू से मेल नहीं खाता जिससे यह Chrome की ऑटोमैटिक भरने की सुविधा के लिए सही हो. हालांकि, अगर आने वाले समय में Chrome को इस नाम वाला कोई फ़ील्ड मिलता है, तो वह उपयोगकर्ता की मदद कर सकता है.
Chrome DevTools में ऑटोमैटिक भरने की नई सुविधाओं को टेस्ट करना
Chrome, DevTools के समस्याएं पैनल के लिए नई सुविधाओं की जांच कर रहा है. इससे, ऑटोमैटिक भरने की सुविधा से जुड़ी गड़बड़ियों को डीबग करने में मदद मिलेगी.
Chrome Canary में इन नई सुविधाओं को आज़माया जा सकता है. DevTools में 
सेटिंग > प्रयोग > 
एलिमेंट पैनल के डीओएम ट्री में, उल्लंघन करने वाले नोड या एट्रिब्यूट को हाइलाइट करता है को चुनें और जब कहा जाए, तब DevTools को रीफ़्रेश करें.
इसके अलावा, कमांड लाइन से AutofillEnableDevtoolsIssues फ़्लैग के साथ Chrome Canary को चलाया जा सकता है:
- Windows:
shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues - Mac:
shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
समस्याओं का पता लगाने के लिए, फ़ॉर्म वाले पेज पर DevTools का समस्याएं पैनल खोलें. सबसे पहले, form-problems.glitch.me पर जाएं.
जैसा कि आप देख सकते हैं, यह फ़ॉर्म गड़बड़ है! ये हैं:
idयाnameएट्रिब्यूट के बिना इनपुट फ़ील्ड.- डुप्लीकेट आईडी वाले एलिमेंट.
forएट्रिब्यूट वाला<label>, जो किसी एलिमेंट आईडी से मैच नहीं करता.- ऐसा फ़ील्ड जिसमें
autocompleteएट्रिब्यूट की वैल्यू खाली है.
ज़्यादा जानने के लिए, डीओएम ट्री में हाइलाइट किए गए एलिमेंट पर कर्सर घुमाएं और समस्या देखें पर क्लिक करें.
हर समस्या के लिए, जिन संसाधनों पर असर पड़ा है उन्हें देखने के लिए, उल्लंघन करने वाला नोड पर क्लिक करें. इस फ़ॉर्म में आठ लेबल हैं, जिनमें for एट्रिब्यूट है. यह एट्रिब्यूट, फ़ॉर्म फ़ील्ड के id एट्रिब्यूट से मेल नहीं खाता.
फ़ॉर्म को सुलभ बनाने के लिए, DevTools का इस्तेमाल करना
DevTools, ऑटोमैटिक भरने की सुविधा के ऐक्सेस से जुड़ी समस्याओं को भी हाइलाइट कर सकता है. जैसे, ऐसा फ़ॉर्म फ़ील्ड जिसमें aria-labelledby एट्रिब्यूट या उससे जुड़ा <label> एट्रिब्यूट न हो.
इस उदाहरण में, <input> एलिमेंट में मैच करने वाला लेबल है. इसका मतलब है कि सहायता करने वाले डिवाइस, एलिमेंट के मकसद के बारे में बता सकते हैं. हालांकि, यहां दिए गए उदाहरण में, कोई मिलता-जुलता लेबल या
aria-labelledby एट्रिब्यूट नहीं मिला.
DevTools में ऑटोमैटिक भरने की नई सुविधाओं के बारे में सुझाव, शिकायत या राय देना
पोस्ट में दी गई नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी चीज़ के बारे में चर्चा करने के लिए, इन विकल्पों का इस्तेमाल करें:
- crbug.com पर मौजूद अंब्रेला बग की मदद से, हमें सुझाव या राय सबमिट करें.
- DevTools से किसी समस्या की शिकायत करने के लिए: ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें पर जाएं.
- @ChromeDevTools पर ट्वीट करें.
ज़्यादा जानें
- फ़ॉर्म के बारे में जानें: एचटीएमएल फ़ॉर्म के बारे में एक कोर्स, ताकि आपको वेब डेवलपर के तौर पर अपनी विशेषज्ञता को बेहतर बनाने में मदद मिल सके. यह उन लोगों के लिए सही है जो फ़ॉर्म और ऑटोमैटिक भरने की सुविधा का इस्तेमाल पहली बार कर रहे हैं.
- web.dev/tags/forms: पेमेंट, लॉगिन, और पते के फ़ॉर्म के लिए दिशा-निर्देश, सबसे सही तरीके, और कोडलैब.