איתור בעיות בטופס בעזרת כלי הפיתוח ל-Chrome

צוות כלי הפיתוח ל-Chrome מפתח תכונות חדשות נוספות שיעזרו לכם לאתר בעיות בטפסים ולנפות באגים במילוי האוטומטי.

Sam Dutton

ב-Chrome Canary אנחנו בודקים תכונות חדשות בכלי פיתוח שמטרתן לעזור למפתחים להבין איך המילוי האוטומטי של טפסים פועל, ולמה התכונה הזו נכשלת לפעמים:

  • איך המילוי האוטומטי של הדפדפן ממפה ערכים שמורים לשדות בטופס?
  • באילו קריטריונים התכונה 'מילוי אוטומטי' משתמשת כדי למלא שדה בטופס?
  • אילו שדות לא מולאו באמצעות המילוי האוטומטי?
  • למה מילוי אוטומטי לא ממלא שדה בטופס?

במאמר הזה אנחנו מפרטים את התכונות החדשות בכלי הפיתוח ל-Chrome, ומוסבר איך אפשר לבדוק אותן ולשלוח משוב.

מה זה מילוי אוטומטי?

Chrome עוזר למשתמשים לנהל את פרטי הכתובת, התשלום ופרטי ההתחברות, על ידי אחסון מאובטח של קבוצות נתונים והצעה למלא שדות בטופס בלי שהמשתמשים יצטרכו להזין טקסט. זה נקרא 'מילוי אוטומטי'.

Chrome מציע לשמור נתונים של מילוי אוטומטי כששולחים טופס. בנייד:

שלושה צילומי מסך של Android: טופס כתובת ב-Chrome, מילוי אוטומטי של Chrome שמציע לשמור את הכתובת ואז מוצגת תיבת דו-שיח לעריכת הרשומה החדשה של המילוי האוטומטי.

בעקבות זאת, Chrome מציע למלא טפסים באופן אוטומטי עם הנתונים שנשמרו.

בנייד:

במחשב:

דפדפן Chrome מציע למלא באופן אוטומטי טופס כתובת במחשב

אתם יכולים לנהל את נתוני המילוי האוטומטי בהגדרות Chrome.

בנייד:

הגדרות Chrome ב-Android: עריכת כתובת

במחשב:

הדף chrome://settings/addresses, מציג שתי כתובות לדוגמה

ייתכן גם שראית הצעות של Chrome לשדות להזנת קלט שאינם קשורים לכתובת, לנתוני כרטיס אשראי או לנתוני התחברות. בנוסף לאפשרות של מילוי אוטומטי לקבוצות של נתונים מובְנים, כמו כתובת ופרטי תשלום, Chrome עוזר למשתמשים להימנע מהזנה מחדש של נתונים בשדות יחידים בטופס שלא ניתן לטפל בהם באמצעות המילוי האוטומטי. כשטופס כולל שדה עם מאפיין שם ש-Chrome נתקל בו בעבר, Chrome יכול להציע ערכים כך שלא תצטרכו להזין מחדש נתונים.

דוגמה פשוטה:

Chrome מציע הצעות לנתונים לא מובְנים בשדה טופס אחד

כלי הפיתוח ל-Chrome מראים ששדה הטופס לא כולל מאפיינים שיש להם משמעות לדפדפן. זה פשוט מאפיין name של n300.

כלי הפיתוח ל-Chrome מציגים בטופס מידע על הנתונים הלא מובְנים, כמו בדוגמה הקודמת: קלט יחיד שמכיל רק את המאפיינים type=text ו-name=n300.

השדה לא תואם לערך בקבוצת נתונים מובְנים שיתאים למילוי האוטומטי של Chrome, אבל Chrome עדיין יכול לעזור למשתמש במקרה שבו הוא ייתקל בשדה עם שם זה בעתיד.

בדיקת התכונות החדשות של המילוי האוטומטי של כלי הפיתוח ל-Chrome

Chrome בודק יכולות חדשות בחלונית Issues של כלי הפיתוח, כדי לעזור בניפוי באגים של תקלות במילוי האוטומטי.

אתם יכולים לנסות את היכולות החדשות האלה ב-Chrome Canary. מסמנים את האפשרות הגדרות. 'הגדרות' > 'ניסויים' > תיבת סימון. מדגישים צומת או מאפיין שמפרים את עץ ה-DOM של חלונית הרכיבים ב-DevTools וטוענים מחדש את כלי הפיתוח כשמוצגת בקשה לעשות זאת.

דף ההגדרות של כלי הפיתוח ל-Chrome, שבו מוצג 'הדגשת הצומת שמפר את המדיניות ...'

לחלופין, אפשר להריץ את 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.

כלי הפיתוח ל-Chrome מציג בעיה במאפיין של של רכיב טופס.

כמו שאפשר לראות, הטופס הזה מבולגן! יש:

  • שדות להזנת קלט ללא המאפיין id או name.
  • רכיבים עם מזהים כפולים.
  • <label> עם מאפיין for שלא תואם למזהה רכיב.
  • שדה עם מאפיין autocomplete ריק.

מעבירים את העכבר מעל רכיב מודגש בעץ ה-DOM ולוחצים על הצגת הבעיה כדי לקבל מידע נוסף.

בעיה מורחבת בכלי הפיתוח ל-Chrome: שימוש שגוי בתווית במאפיין.

כדי להציג את המשאבים שהושפעו לכל בעיה, לוחצים על צומת עם הפרת המדיניות. הטופס הזה כולל שמונה תוויות עם מאפיין for שלא תואם לערך id של שדה בטופס.

שימוש בכלי הפיתוח לשיפור הנגישות של טפסים

כלי הפיתוח יכולים גם להדגיש בעיות נגישות של מילוי אוטומטי, כמו שדה בטופס שאין לו מאפיין aria-labelledby או מאפיין <label> שמשויך אליו.

כלי הפיתוח ל-Chrome חלונית נגישות, שמוצגת בה תווית של רכיב קלט בטופס.

בדוגמה הזו, לרכיב <input> יש תווית תואמת. כלומר, מכשירים מסייעים יכולים להודיע על מטרת הרכיב. עם זאת, בדוגמה הבאה לא נמצאה תווית תואמת או מאפיין aria-labelledby תואם.

כלי הפיתוח ל-Chrome חלונית נגישות, שבה רואים שלא נמצאה תווית תואמת או מאפיין aria-labelby, לרכיב קלט בטופס.

שליחת משוב על התכונות החדשות של המילוי האוטומטי בכלי הפיתוח

תוכלו להשתמש באפשרויות הבאות כדי לדון בתכונות החדשות ובשינויים בפוסט, או בכל דבר אחר שקשור לכלי הפיתוח:

  • שלחו לנו הצעה או משוב דרך הבאג במטרייה ב-crbug.com.
  • מדווחים על בעיה מכלי הפיתוח: אפשרויות נוספות > עזרה > דיווח על בעיה בכלי הפיתוח.
  • אפשר לשלוח ציוץ אל @ChromeDevTools.

מידע נוסף

  • לימוד טפסים: קורס על טופסי HTML שיעזור לכם לשפר את המומחיות של מפתחי אתרים. השיטה הזאת אידיאלית למשתמשים חדשים בטפסים ובמילוי האוטומטי.
  • web.dev/tags/forms: הדרכה, שיטות מומלצות ו-codelabs, למילוי טופסי תשלום, להתחברות ולכתובת.