يعمل فريق "أدوات مطوري البرامج في Chrome" على إنشاء ميزات إضافية جديدة لمساعدتك في العثور على المشاكل في النموذج وتصحيح الأخطاء في ميزة "الملء التلقائي".
نختبر في Chrome Canary ميزات جديدة في "أدوات مطوري البرامج" تهدف إلى مساعدة المطورين في فهم طريقة عمل النموذج وسبب إخفاقه في بعض الأحيان:
- كيف يخزّن المتصفّح القيم في حقول النموذج؟
- ما هي المعايير التي تستخدمها ميزة "الملء التلقائي" لملء حقل نموذج؟
- ما هي الحقول التي لم تتم تعبئتها باستخدام ميزة "الملء التلقائي"؟
- لماذا لا يتم ملء حقل النموذج من خلال ميزة "الملء التلقائي"؟
توضّح هذه المقالة الميزات الجديدة في "أدوات مطوري البرامج في Chrome"، وتوضّح كيفية اختبارها وتقديم ملاحظات.
ما هي ميزة "الملء التلقائي"؟
يساعد Chrome المستخدمين في إدارة معلومات العنوان والدفع وتسجيل الدخول من خلال التخزين الآمن لمجموعات البيانات وعرض ملء حقول النماذج بدون حاجة المستخدم إلى إدخال نص. يُعرف ذلك باسم الملء التلقائي.
يعرض Chrome حفظ بيانات "الملء التلقائي" عند إرسال نموذج. على الجهاز الجوّال:
وبعد ذلك، يعرض Chrome الملء التلقائي للنماذج بالبيانات التي تم حفظها.
على الجهاز الجوّال:
على الكمبيوتر المكتبي:
يمكنك إدارة بيانات الملء التلقائي في إعدادات Chrome.
على الجهاز الجوّال:
على الكمبيوتر المكتبي:
ربما ظهرت لك أيضًا اقتراحات Chrome يقدّم اقتراحات لحقول الإدخال غير المرتبطة بالعنوان أو بطاقة الائتمان أو بيانات تسجيل الدخول. بالإضافة إلى توفير ميزة الملء التلقائي لمجموعات البيانات المنظَّمة، مثل العنوان وتفاصيل الدفع، يساعد Chrome المستخدمين على تجنُّب إعادة إدخال البيانات لحقول النموذج الفردي التي لا يمكن معالجتها من خلال ميزة "الملء التلقائي". عندما يحتوي نموذج على حقل يحتوي على سمة اسم واجهها Chrome من قبل، يمكن أن يقترح Chrome قيمًا بحيث لا تحتاج إلى إعادة إدخال البيانات.
فيما يلي مثال بسيط:
تُظهر "أدوات مطوري البرامج في Chrome" أنّ حقل النموذج هنا لا يحتوي على سمات مفيدة للمتصفّح. هي بدلاً من ذلك، إنها مجرد سمة name لـ n300.
لا يتوافق الحقل مع قيمة في مجموعة من البيانات المنظَّمة التي تجعله مناسبًا للملء التلقائي في Chrome، ولكن لا يزال بإمكان Chrome مساعدة المستخدم إذا صادف حقلاً بهذا الاسم في المستقبل.
اختبار ميزات الملء التلقائي الجديدة في "أدوات مطوري البرامج في Chrome"
يختبر Chrome إمكانات جديدة للوحة المشاكل في "أدوات مطوري البرامج" للمساعدة في تصحيح الأخطاء المتعلّقة بالملء التلقائي.
يمكنك تجربة هذه الإمكانات الجديدة في Chrome Canary. انتقِل إلى 
الإعدادات > التجارب > 
يتم تمييز عقدة أو سمة مخالفة في شجرة DOM بلوحة "العناصر" ضمن
أدوات مطوّري البرامج وإعادة تحميل "أدوات مطوري البرامج" عندما يُطلب منك ذلك.
بدلاً من ذلك، يمكنك تشغيل Chrome Canary من سطر الأوامر باستخدام العلامة AutofillEnableDevtoolsIssues:
- نظام التشغيل 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
للتحقّق من المشاكل، افتح لوحة المشاكل في "أدوات مطوري البرامج" في إحدى الصفحات التي تحتوي على نموذج. يمكنك البدء من خلال الرابط form-problems.glitch.me.
كما ترون، هذا النموذج عبارة عن فوضى! وهي:
- حقول الإدخال بدون السمة
idأوname - العناصر التي لها معرّفات مكرّرة
- تمثّل هذه السمة
<label>مع السمةforالتي لا تتطابق مع معرّف عنصر. - حقل يحتوي على سمة
autocompleteفارغة.
مرِّر مؤشّر الماوس فوق العنصر المميّز في شجرة نموذج العناصر في المستند وانقر على عرض المشكلة لمزيد من المعلومات.
انقر على عقدة غير متوافقة للاطّلاع على الموارد المتأثرة لكل مشكلة. يتضمّن هذا النموذج ثمانية تصنيفات تتضمن السمة for لا تتطابق مع السمة id في حقل النموذج.
استخدام "أدوات مطوري البرامج" لتحسين إمكانية الوصول إلى النموذج
يمكن أن تسلّط أدوات مطوّري البرامج أيضًا الضوء على مشاكل إمكانية الوصول إلى ميزة "الملء التلقائي"، مثل حقل نموذج لا يحتوي على
سمة aria-labelledby أو سمة <label> مرتبطة بها.
في هذا المثال، يحتوي عنصر <input> على تصنيف مطابق. هذا يعني أن الأجهزة المساعدة يمكنها
الإعلان عن الغرض من العنصر. ومع ذلك، لم يتم العثور على تصنيف مطابق أو سمة aria-labelledby في المثال التالي.
تقديم ملاحظات بشأن ميزات "الملء التلقائي" الجديدة في "أدوات مطوري البرامج"
يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر مرتبط بأدوات مطوري البرامج:
- أرسل اقتراحًا أو ملاحظات إلينا من خلال خطأ شامل على crbug.com.
- الإبلاغ عن مشكلة من خلال "أدوات مطوري البرامج": خيارات إضافية > مساعدة > الإبلاغ عن مشكلة في "أدوات مطوري البرامج"
- يمكنك نشر تغريدة على @ChromeDevTool.
التعرف على المزيد
- التعرّف على "نماذج Google": دورة تدريبية حول نماذج HTML لمساعدتك في تحسين خبرتك في المطوّرين على الويب وهو مثالي لأي مستخدم جديد في النماذج والملء التلقائي.
- web.dev/tags/forms: الإرشادات وأفضل الممارسات والدروس التطبيقية حول الترميز، ونماذج الدفع وتسجيل الدخول والعناوين.