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

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

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

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

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

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

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

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

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

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

בנייד:

במחשב:

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

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

בנייד:

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

במחשב:

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

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

הנה דוגמה פשוטה:

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

ב-Chrome DevTools מוצג ששדה הטופס הזה לא מכיל מאפיינים שמשמעותיים לדפדפן. במקום זאת, הוא רק מאפיין name של n300.

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

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

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

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

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

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

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

כדי לבדוק אם יש בעיות, פותחים את החלונית בעיות ב-DevTools בדף שיש בו טופס. form-problems.glitch.me הוא מקום טוב להתחיל בו.

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

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

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

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

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

לוחצים על Violating node (צומת שמפר את המדיניות) כדי להציג את המשאבים המושפעים מכל בעיה. בטופס הזה יש שמונה תוויות עם מאפיין for שלא תואם ל-id של שדה טופס.

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

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

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

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

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

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

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

למידע נוסף

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