אתם יכולים להשתמש במצב בדיקה כדי להתמקד ברכיבים ספציפיים בדף האינטרנט ולנתח אותם.
סקירה כללית
הפעלת מצב הבדיקה (בורר הבוררים) של DevTools מאפשרת להעביר את העכבר מעל רכיבים בדף ולהציג מידע על סגנון ונגישות. לחיצה על רכיב בזמן שמצב הבדיקה פעיל תדגיש את רכיב ה-DOM התואם בעץ ה-DOM בחלונית רכיבים, ותציג את הסגנונות הרלוונטיים בכרטיסייה סגנונות.
הפעלת מצב בדיקה
כדי להפעיל את מצב הבדיקה:
- פתיחת DevTools
- לוחצים על הלחצן מצב בדיקה בסרגל הפעולות.
בורר הבוררים פעיל כשהסמל של מצב בדיקה כחול.
אפשר גם להשתמש במקשי קיצור ב-Chrome כדי לפתוח את החלונית רכיבים במצב בדיקה. לוחצים על אחת מהאפשרויות הבאות:
- macOS: Cmd+Option+C
- Windows, Linux, ChromeOS: Ctrl+Shift+C
שימוש במצב בדיקה כדי להציג מידע על סגנון ונגישות
כשמצב בדיקה פעיל, מעבירים את העכבר מעל רכיבים בדף. הרכיב יודגש ותוצג שכבת-על של תיאור קצר. חלונית Elements תרחיב באופן אוטומטי את עץ ה-DOM כדי להדגיש את הרכיב שמעליו מעבירים את העכבר.
בהתאם לרכיב, הסבר קצר במצב בדיקה יציג את מאפייני הסגנון הבאים:
- הבוררים של הרכיב.
- המימדים של הרכיב, בפיקסלים.
- צבע הרקע של הרכיב.
- צבע הטקסט של הרכיב.
- מאפייני הגופן של האלמנט.
- הרווח מסביב לרכיב, בפיקסלים.
- השוליים של הרכיב, בפיקסלים.
בנוסף, לצד השם של רכיבים שמשתמשים ב-CSS grid או ב-CSS flexbox יופיע סמל שונה.
בקטע הנגישות של ההסבר הקצר יוצג המידע הבא:
- השם והתפקיד של הרכיב שדווח לטכנולוגיה מסייעת.
- האם אפשר להתמקד באלמנט באמצעות המקלדת.
כשמעבירים את העכבר מעל כותרות טקסט, מוצג יחס ניגודיות שמציג את ההבדל בין הבהירות של צבע החזית (צבע הטקסט) לבין צבעי הרקע.
יחס ניגודיות טוב חיוני לטקסט קריא. כך מתקנים טקסט עם ניגודיות נמוכה
שמירה והסתרה של ההסבר הקצר של מצב הבדיקה
כדי להציג את ההסבר של מצב בדיקה בלי להפסיק להזיז את סמן העכבר, לוחצים לחיצה ארוכה על:
- macOS: Ctrl+Option
- ב-Windows, ב-Linux וב-ChromeOS: Ctrl+Alt
כדי להסתיר באופן זמני את ההסבר הקצר בזמן שמזיזים את סמן העכבר, לוחצים לחיצה ארוכה על Ctrl.
בדיקה של רכיבים שלא נגישים
בשלב הראשון אי אפשר לטרגט רכיבים עם מאפיין ה-CSS pointer-events: none; באמצעות מצב בדיקה.
כדי לבדוק אלמנטים שלא נגישים, מקישים על Shift תוך כדי העברת העכבר מעל האלמנט.
