המדריך הזה נועד לעזור למשתמשים שמסתמכים בעיקר על טכנולוגיות מסייעות כמו קוראי מסך לגשת ל-כלי הפיתוח ל-Chrome ולהשתמש בו. כלי הפיתוח של Chrome הם חבילה של כלים למפתחי אתרים שמובְנים בדפדפן Google Chrome. אם אתם מחפשים תכונות של DevTools שקשורות לשיפור הנגישות של דף אינטרנט, תוכלו לעיין בחומר העזר בנושא נגישות.
אנחנו עובדים על שיפור הנגישות של כלי הפיתוח. יש כרטיסיות ולוחות שפועלים טוב יותר עם טכנולוגיה מסייעת מאחרים. המדריך הזה כולל הסבר על הלוחות הנגישים ביותר, ומדגיש בעיות ספציפיות שעשויות לצוץ לאורך הדרך.
סקירה כללית
לפני שמתחילים, כדאי להבין איך הממשק של DevTools מחולק. כלי הפיתוח מחולקים לסדרה של חלוניות שמאורגנות בARIA tablist. לדוגמה:
- בחלונית רכיבים אפשר להציג ולשנות צומתי DOM או CSS.
- בלוח Console אפשר לקרוא יומני JavaScript ולערוך אובייקטים בזמן אמת.
באזור התוכן של כל חלונית יש מספר כלים שונים, שנקראים לרוב כרטיסיות או חלוניות במסמכי העזרה. לדוגמה, החלונית Elements מכילה כרטיסיות נוספות לבדיקה של פונקציות event listener, של עץ הנגישות ועוד. ההבחנה בין כרטיסיות לבין חלוניות היא שרירותית במידה מסוימת. הסיבה היחידה שבגללה תראו את המונח הזה או את זה היא כדי לשמור על עקביות עם שאר המסמכים הרשמיים של DevTools.
מקשי קיצור
המדריך למקשי הקיצור של DevTools הוא מדריך עזר שימושי. כדאי להוסיף את הדף לסימניות ולהיעזר בו כשאתם בודקים את החלוניות השונות.
פתיחת כלי הפיתוח
כדי להתחיל, כדאי לקרוא את המאמר פתיחת כלי הפיתוח ל-Chrome. יש כמה דרכים לפתוח את DevTools, באמצעות מקשי קיצור או פריטים בתפריט.
ניווט בין החלוניות
ניווט באמצעות המקלדת
- כשכלי הפיתוח פתוחים, מקישים על Control+] או על Command+] (ב-Mac) כדי להעביר את המיקוד לחלונית הבאה.
- מקישים על Control+[ או על Command+[ (ב-Mac) כדי להעביר את המיקוד ללוח הקודם.
- אפשר גם להשתמש ב-Shift + Tab כדי להעביר את המיקוד ל-
tablistשל חלונית כלשהי, ולהשתמש במקשי החיצים כדי לעבור בין חלוניות. עם זאת, יכול להיות שיהיה מהיר יותר להשתמש במקשי הקיצור שצוינו למעלה.
בעיות מוכרות
- יכול להיות שבחלוניות מסוימות, כמו מסוף וביצועים, המיקוד יועבר לאזור התוכן שלהן ברגע שהן יופעלו. לכן, יכול להיות שיהיה קשה לנווט באמצעות מקשי החיצים.
- שם הלוח שנבחר יוכרז, אבל רק אחרי שהמערכת תקריא את התוכן שבמרכז הלוח. לכן קל מאוד לפספס אותם.
ניווט באמצעות תפריט הפקודות
כדי להתמקד בחלונית ספציפית, משתמשים בתפריט הפקודות:
- כשחלון DevTools פתוח, מקישים על Control+Shift+P או על Command+Shift+P (ב-Mac) כדי לפתוח את תפריט הפקודות. תפריט הפקודות הוא תיבת דו-שיח עם השלמה אוטומטית לחיפוש לא מדויק.
- מקלידים את שם החלונית שרוצים לפתוח, ואז משתמשים בחץ למטה במקלדת כדי לנווט לאפשרות הנכונה.
- מקישים על Enter כדי להריץ פקודה.
לדוגמה, כדי לפתוח את החלונית רכיבים:
- פותחים את תפריט הפקודות.
- מקלידים E ואז L. האפשרות לוח > הצגת רכיבים מסומנת.
- מקישים על Enter כדי להריץ את הפקודה שפותחת את החלונית.
פתיחת חלונית באופן הזה מאפשרת להתמקד בתוכן של החלונית עצמה. במקרה של החלונית רכיבים, המיקוד עובר אל עץ ה-DOM.
חלונית הרכיבים
בדיקת רכיב בדף
- מנווטים לרכיב שרוצים לבדוק באמצעות הסמן של קורא המסך.
- כדי לפתוח את תפריט ההקשר, מקיימים לחיצה ימנית על הרכיב.
- בוחרים באפשרות בדיקה. הפעולה הזו תפתח את החלונית Elements ותתמקד ברכיב בעץ ה-DOM.
עץ ה-DOM מתואר כ-ARIA tree. דוגמה לכך מופיעה במאמר ניווט בעץ DOM באמצעות מקלדת.
העתקת הקוד של רכיב בעץ ה-DOM
- כשהמיקוד הוא על צומת בעץ DOM, פותחים את תפריט ההקשר בלחיצה ימנית.
- מרחיבים את האפשרות העתקה.
- בוחרים באפשרות העתקת outerHTML.
בעיות מוכרות
- לרוב, הפונקציה Copy outerHTML לא בוחרת את הצומת הנוכחי, אלא בוחרת את צומת ההורה שלו. עם זאת, תוכן הרכיב עדיין אמור להיות ב-outerHTML שהועתק.
שינוי המאפיינים של רכיב בעץ ה-DOM
- כשהמיקוד נמצא בצומת בעץ ה-DOM, מקישים על Enter כדי לאפשר עריכה שלו.
- מקישים על Tab כדי לעבור בין ערכי המאפיינים. כששומעים את המילה 'רווח', סימן שאתם נמצאים בשדה קלט טקסט ריק ואפשר להקליד ערך מאפיין חדש.
- מקישים על Control+Enter או על Command+Enter (ב-Mac) כדי לאשר את השינוי ולשמוע את כל התוכן של הרכיב.
בעיות מוכרות
- כשמקלידים בתיבת הטקסט, לא מקבלים משוב. גם אם תעשו שגיאת הקלדה ותשתמשו במקשי החיצים כדי לבדוק את הקלט, לא תקבלו משוב. הדרך הקלה ביותר לבדוק את העבודה היא לאשר את השינוי ולהקשיב להכרזה על כל הרכיב.
עריכת ה-HTML של אלמנט בעץ ה-DOM
- כשהמיקוד נמצא בצומת בעץ ה-DOM, מקישים על Enter כדי לאפשר עריכה שלו.
- מקישים על Tab כדי לעבור בין ערכי המאפיינים. כששומעים את שם הרכיב, למשל 'h2', נמצאים בתוך קלט טקסט ואפשר לשנות את סוג הרכיב.
- מקישים על Control+Enter או על Command+Enter (ב-Mac) כדי לאשר את השינוי.
לדוגמה, הקלדה של h3 והקשה על Control+Enter או על Command+Enter (ב-Mac) משנה את תגי ההתחלה והסיום של הרכיב ל-h3.
הכרטיסיות בחלונית הרכיבים
בחלונית Elements יש כרטיסיות נוספות לבדיקה של דברים כמו רכיבי ה-CSS שחלים על אלמנט או המיקום שלו בעץ הנגישות.
- כשהמיקוד הוא בצומת בעץ ה-DOM, מקישים על Tab עד שנשמעת ההודעה על בחירת החלונית Styles.
- מקישים על החץ ימינה כדי לעבור לכרטיסיות אחרות שזמינות.
עץ ה-DOM הופך רכיבים עם מאפייני href לקישורים שניתן להתמקד בהם, כך שייתכן שתצטרכו ללחוץ על Tab יותר מפעם אחת כדי להגיע לחלונית הסגנונות.
בעיות מוכרות
לא ניתן לגשת לכרטיסיות נקודות עצירה (breakpoints) ב-DOM ומאפיינים באמצעות המקלדת.
חלונית הסגנונות
בחלונית Styles יש אמצעי בקרה לסינון סגנונות, להפעלה או להשבתה של מצבי רכיבים (כמו :active ו-:focus), להפעלה או להשבתה של כיתות ולהוספת כיתות חדשות. יש גם כלי חזק לבדיקת סגנונות, שמאפשר לבחון ולשנות את הסגנונות שחלים כרגע על הרכיב שבמרכז עץ ה-DOM.
חשוב להבין שהחלונית Styles מציגה רק את הסגנונות של הצומת שנבחר כרגע בעץ ה-DOM. לדוגמה, נניח שסיימתם לבדוק את הסגנונות של צומת <header>, ועכשיו אתם רוצים לבדוק את הסגנונות של צומת <footer>. לשם כך, קודם צריך לבחור את הצומת <footer> בעץ ה-DOM. יכול להיות שיהיה לכם מהיר יותר להשתמש בתהליך העבודה של בדיקה כדי לבדוק צומת שנמצא בסביבה הכללית של הצומת footer (למשל קישור בכותרת התחתונה), וכך להתמקד בעץ ה-DOM, ואז להשתמש במקלדת כדי לנווט לצומת המדויק שעניין אתכם.
ניווט בחלונית 'סגנונות'
כל הכלים ליצירת סגנונות מתחברים בדרך כזו או אחרת לחלונית סגנונות, לכן מומלץ להכיר את הכלי הזה לעומק לפני שמתחילים להשתמש בכלים האחרים.
- כשהמיקוד נמצא בחלונית Styles, מקישים על Tab כדי להעביר את המיקוד פנימה ולעיין בתוכן שלה.
- מקישים על Tab עד שהסגנון הראשון הופך לפעיל. אם אתם משתמשים בקורא מסך, הסגנון הראשון יוכרז בתור "element.style {}".
- מקישים על החץ למטה כדי לנווט ברשימת הסגנונות לפי רמת הספציפיות. קורא המסך מקריא כל סגנון, החל משם קובץ ה-CSS, מספר השורה שבה מופיע הסגנון ושם הסגנון עצמו. לדוגמה: "main.css:233 .card__img {}"
- כדי לבדוק את הסגנון בפירוט רב יותר, מקישים על Enter. המיקוד מתחיל בגרסה שניתן לערוך של שם הסגנון.
- מקישים על Tab כדי לעבור בין הגרסאות שניתנות לעריכה של כל מאפיין CSS לבין הערכים התואמים שלהם. בסוף כל בלוק סגנונות יש שדה טקסט ריק שניתן לעריכה, שבו אפשר להוסיף מאפייני CSS נוספים.
- אפשר להמשיך ללחוץ על Tab כדי לעבור ברשימת הסגנונות, או ללחוץ על Escape כדי לצאת מהמצב הזה ולחזור לנווט באמצעות מקשי החצים.
מומלץ לקרוא את חומר העזר בנושא מקשי קיצור בחלונית הסגנונות כדי לקבל מידע על מקשי קיצור נוספים.
בעיות מוכרות
- אם משתמשים בשדה הטקסט הניתן לעריכה מסנן, לא ניתן יותר לנווט ברשימת הסגנונות.
החלפת מצב הרכיב
כדי להחליף את המצב של רכיב, כמו :active או :focus:
- עוברים לחלונית Styles ומקישים על Tab עד שהמיקוד עובר ללחצן Toggle Element State.
- מקישים על Enter כדי להרחיב את האוסף של מצבי הרכיבים. מצבי הרכיב מוצגים כקבוצה של תיבות סימון.
- מקישים על Tab עד שהמצב הראשון,
:active, מקבל את המיקוד. - מקישים על מקש הרווח כדי להפעיל אותו. אם לרכיב שנבחר כרגע בעץ ה-DOM יש סגנון
:active, הוא יוחל עכשיו. - ממשיכים להקיש על Tab כדי לראות את כל המצבים הזמינים.
הוספת כיתה קיימת
לצד הלחצן החלפת מצב הרכיב נמצא הלחצן כיתות רכיבים. כדי להעביר את המיקוד אליו, מקישים על Tab ואז על Enter. המיקוד עובר לשדה טקסט לעריכה עם הכיתוב הוספת כיתה חדשה.
הלחצן Element Classes משמש בעיקר להוספת כיתות קיימות לאלמנט. לדוגמה, אם גיליתם שגיליון הסגנונות מכיל סיווג עזר בשם .clearfix, תוכלו להקיש על . בשדה הטקסט של העריכה כדי להציג רשימה של הצעות לסיווגים, ולהשתמש בחץ למטה כדי למצוא את ההצעה .clearfix. לחלופין, מקלידים את שם הכיתה בעצמכם ומקישים על Enter כדי להחיל אותו.
הוספת כלל סגנון חדש
לצד הלחצן Element Classes (סוגים של רכיבים) מופיע הלחצן New Style Rule (כלל סגנון חדש). כדי להעביר את המיקוד אליו, מקישים על Tab ואז על Enter. המיקוד עובר לשדה טקסט שניתן לעריכה בתוך בודק הסגנונות. תוכן הטקסט הראשוני בשדה הוא שם התג של הרכיב שנבחר בעץ ה-DOM. אפשר להקליד בשדה הזה כל שם של כיתה שרוצים, ואז ללחוץ על Tab כדי להקצות לו מאפייני CSS.
הכרטיסייה 'מחושבים'
כשהמיקוד נמצא בכרטיסייה Computed, מקישים על Tab כדי להעביר את המיקוד פנימה ולעיין בתוכן שלה. בכרטיסייה Computed יש אמצעי בקרה שמאפשרים לבדוק אילו מאפייני CSS חלים בפועל על רכיב, לפי סדר הספציפיות שלהם.
הצגת כל הסגנונות המחושבים
מקישים על Tab עד שמגיעים לאוסף הסגנונות המחושבים. הם מוצגים בתור ARIA tree. אם תרחיבו את תיבת הרשימה, תוכלו לראות אילו סלקטורים של CSS מחילים את הסגנון המחושב. הבוררים האלה מסודרים לפי רמת הספציפיות. קורא המסך מכריז על הערך המחושב, על הבורר של CSS שמתאים כרגע, על שם הקובץ של גיליון הסגנונות שמכיל את הבורר ועל מספר השורה של הבורר.
בעיות מוכרות
- אם משתמשים בשדה הטקסט מסנן, לא ניתן יותר לבדוק סגנונות.
הכרטיסייה 'פונקציות מסוג Event Listener'
אפשר לבדוק את מעבדי האירועים שחלים על רכיב מסוים באמצעות הכרטיסייה מעבדי אירועים בחלונית רכיבים. כשהמיקוד בחלונית Styles, מקישים על חץ שמאלה כדי לנווט לכרטיסייה Event Listeners.
הסבר על פונקציות event listener
פונקציות event listener מוצגות כ-ARIA tree. אפשר להשתמש במקשי החיצים כדי לנווט ביניהן. קורא המסך מכריז על שם אובייקט ה-DOM שאליו מחובר מאזין האירועים, וגם על שם הקובץ שבו מוגדר מאזין האירועים ומספר השורה שלו.
חלונית הנגישות
כשהמיקוד נמצא בחלונית נגישות, מקישים על Tab כדי להעביר את המיקוד לתוכן שלה ולעיין בו. בחלונית Accessibility יש אמצעי בקרה לבדיקה של עץ הנגישות, מאפייני ה-ARIA שחלים על רכיב ומאפייני הנגישות המחושבים שלו.
עץ נגישות
עץ הנגישות מוצג כ-ARIA tree, שבו כל treeitem תואם לאלמנט ב-DOM. העץ מכריז על התפקיד המחושב של הצומת שנבחר. אלמנטים כלליים כמו div ו-span מפורסמים בעץ בתור 'GenericContainer'. משתמשים במקשי החיצים כדי לעבור בעץ ולעיין בקשרי הורה-צאצא.
בעיות מוכרות
- יכול להיות שסוג עץ ה-ARIA שבו נעשה שימוש בחלונית נגישות לא יוצג כראוי ב-Chrome עבור קוראי מסך של macOS כמו VoiceOver. כדי לקבל עדכונים על ההתקדמות בטיפול בבעיה, אפשר להירשם לדיווח על בעיה מספר 868480 ב-Chromium.
- הקטעים מאפייני ARIA ונכסים מחושבים מסומנים בתווית בתור עצים של ARIA, אבל כרגע אין בהם ניהול של המיקוד, ולכן אי אפשר להשתמש בהם באמצעות מקלדת.
חלונית הביקורות
בחלונית בדיקות אפשר להריץ סדרה של בדיקות באתר כדי לבדוק אם יש בו בעיות נפוצות שקשורות לביצועים, לנגישות, לבדיקת האופטימיזציה למנועי חיפוש ולמספר קטגוריות אחרות.
הגדרה והפעלה של ביקורת
- כשפותחים את החלונית בדיקות בפעם הראשונה, המיקוד הוא בלחצן הפעלת בדיקה שבסוף הטופס. כברירת מחדל, הטופס מוגדר להריץ ביקורות בכל קטגוריה באמצעות הדמיה של מכשיר נייד בחיבור 3G מדומה.
- כדי לשנות את הגדרות הביקורת, מקישים על Shift + Tab או חוזרים למצב 'עיון'.
- כשהכול מוכן להרצת הביקורת, חוזרים ללחצן Run Audit ומקישים על Enter.
- המיקוד עובר לחלון מודלי עם הלחצן ביטול, שמאפשר לצאת מהבדיקה. יכול להיות שתישמעו סדרה של צלילים בזמן שהבדיקה פועלת והדף יתעדכן מספר פעמים.
בעיות מוכרות
- בשלב זה, הקטעים השונים של טופס התצורה לא מסומנים באמצעות רכיב
fieldset. יכול להיות שיהיה קל יותר לנווט בהם במצב 'עיון' כדי להבין אילו אמצעי בקרה משויכים לכל קטע. - בסיום הבדיקה לא תופיע הודעה או צליל אזהרה על אזור פעיל. בדרך כלל התהליך נמשך כ-30 שניות, ואז אמורה להיות לך אפשרות לנווט לתוצאות. שימוש במצב 'עיון' הוא אולי הדרך הקלה ביותר להגיע לתוצאות.
ניווט בדוח הביקורת
דוח הביקורת מחולק לקטעים שתואמים לכל אחת מקטגוריות הביקורת. הדוח נפתח עם רשימה של ציונים לכל קטגוריה. הציונים האלה הם גם קישורים שאפשר להשתמש בהם כדי לדלג לקטעים הרלוונטיים. בכל קטע יש רכיבי details שניתן להרחיב, שמכילים מידע לגבי ביקורות שעברו או נכשלו. כברירת מחדל, מוצגות רק ביקורות שנכשלו.
כל קטע מסתיים ברכיב details סופי שמכיל את כל הבדיקות שעברו.
כדי להריץ ביקורת חדשה, מקישים על Shift + Tab כדי לצאת מהדוח ומחפשים את הלחצן ביצוע ביקורת.