Chrome DevTools टीम नई सुविधाएं तैयार कर रही है. इनसे आपको फ़ॉर्म से जुड़ी समस्याओं का पता लगाने और ऑटोमैटिक भरने की सुविधा को डीबग करने में मदद मिलेगी.
Chrome कैनरी में हम DevTools में नई सुविधाएं आज़मा रहे हैं. इनका मकसद, यह समझने में डेवलपर की मदद करना है कि फ़ॉर्म के ऑटोमैटिक भरने की सुविधा कैसे काम करती है और कभी-कभी यह काम क्यों नहीं करती:
- ब्राउज़र ऑटोमैटिक भरने की सुविधा के ज़रिए, फ़ॉर्म फ़ील्ड में सेव की गई वैल्यू को कैसे मैप किया जाता है?
- फ़ॉर्म फ़ील्ड को भरने के लिए, ऑटोमैटिक भरने की सुविधा किन शर्तों का इस्तेमाल करती है?
- किन फ़ील्ड में, अपने-आप जानकारी भरने की सुविधा नहीं भरी है?
- ऑटोमैटिक भरने की सुविधा के ज़रिए फ़ॉर्म फ़ील्ड क्यों नहीं भरा जाता?
इस लेख में, Chrome DevTools की नई सुविधाओं के बारे में बताया गया है. साथ ही, यह भी बताया गया है कि उन्हें टेस्ट करने और सुझाव/राय देने या शिकायत करने का तरीका क्या है.
ऑटोमैटिक भरने की सुविधा क्या है?
Chrome, डेटा के सेट को सुरक्षित रूप से स्टोर करके, फ़ॉर्म फ़ील्ड में जानकारी भरने की सुविधा देकर, पता, पेमेंट, और लॉगिन की जानकारी मैनेज करने में उपयोगकर्ताओं की मदद करता है. ऐसा करने के लिए, उपयोगकर्ता को टेक्स्ट डालने की ज़रूरत नहीं पड़ती. उसे ऑटोमैटिक भरना कहा जाता है.
फ़ॉर्म सबमिट करते समय, Chrome अपने-आप जानकारी भरने की सुविधा का डेटा सेव करने की सुविधा देता है. मोबाइल पर:
इसके बाद, Chrome सेव किए गए डेटा के साथ फ़ॉर्म को ऑटोमैटिक भरने की सुविधा देता है.
मोबाइल पर:
डेस्कटॉप पर:
Chrome की सेटिंग में जाकर, अपने-आप जानकारी भरने की सुविधा के डेटा को मैनेज किया जा सकता है.
मोबाइल पर:
डेस्कटॉप पर:
आपने शायद Chrome की ओर से ऐसे इनपुट फ़ील्ड के सुझाव भी देखे होंगे जो पते, क्रेडिट कार्ड या लॉगिन डेटा से संबंधित नहीं हैं. Chrome पर स्ट्रक्चर्ड डेटा के सेट (जैसे कि पता और पेमेंट का ब्यौरा) के लिए, ऑटोमैटिक भरने की सुविधा उपलब्ध कराई जाती है. इसके अलावा, Chrome उन एक फ़ॉर्म फ़ील्ड के लिए फिर से डेटा डालने से बचने में मदद करता है जिन्हें ऑटोमैटिक भरने की सुविधा की मदद से मैनेज नहीं किया जा सकता. जब किसी फ़ॉर्म में नाम एट्रिब्यूट वाला कोई ऐसा फ़ील्ड होता है जिसका इस्तेमाल Chrome पहले कर चुका है, तो Chrome वैल्यू का सुझाव दे सकता है. इससे आपको फिर से डेटा डालने की ज़रूरत नहीं होगी.
इसका एक आसान सा उदाहरण देखें :
Chrome DevTools दिखाता है कि यहां दिए गए फ़ॉर्म फ़ील्ड में ऐसे एट्रिब्यूट नहीं हैं जो ब्राउज़र के लिए काम के हों. इसके बजाय, यह n300 का सिर्फ़ एक name एट्रिब्यूट है.
यह फ़ील्ड स्ट्रक्चर्ड डेटा के सेट में मौजूद उस वैल्यू से मेल नहीं खाता है जो Chrome के ऑटोमैटिक भरने की सुविधा के लिए सही बनाती है. हालांकि, अगर आने वाले समय में Chrome को इस नाम वाला फ़ील्ड मिलता है, तो वह उपयोगकर्ता की मदद कर सकता है.
Chrome DevTools की अपने-आप जानकारी भरने की नई सुविधाओं को आज़माएं
Chrome, DevTools समस्याएं पैनल के लिए नई सुविधाएं टेस्ट कर रहा है. इनसे, ऑटोमैटिक भरने की सुविधा से जुड़ी समस्याओं को डीबग करने में मदद मिलेगी.
आप Chrome कैनरी में इन नई सुविधाओं को आज़मा सकते हैं. DevTool में 
सेटिंग > एक्सपेरिमेंट > 
एलिमेंट पैनल के डीओएम ट्री में, नीति का उल्लंघन करने वाले नोड या एट्रिब्यूट को हाइलाइट करें और निर्देश मिलने पर DevTools को फिर से लोड करें.
इसके अलावा, आपके पास AutofillEnableDevtoolsIssues फ़्लैग की मदद से कमांड लाइन से Chrome कैनरी को चलाने का विकल्प है:
- 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 से जुड़ी समस्या की शिकायत करें.
- @ChromeDevTool पर ट्वीट करें.
ज़्यादा जानें
- फ़ॉर्म सीखें: अपनी वेब डेवलपर विशेषज्ञता को बेहतर बनाने में मदद करने के लिए, एचटीएमएल फ़ॉर्म के बारे में एक कोर्स. यह फ़ॉर्म और ऑटोमैटिक भरने की सुविधा के लिए, बिलकुल नया है.
- web.dev/tags/forms: इस सेक्शन में पेमेंट, लॉगिन, और पते से जुड़े फ़ॉर्म के लिए दिशा-निर्देश, सबसे सही तरीका, और कोडलैब शामिल होते हैं.