תוכלו למצוא אפקטים שימושיים שתוכלו ליישם בדף בעזרת ההסבר על האפשרויות בכרטיסייה רינדור.
הדגשת מסגרות של מודעות
כדי לבדוק אם המסגרות מתויגות כמודעות:
- פותחים את הכרטיסייה Rendering בהדגמה הזו ומסמנים את התיבה Highlight ad frames.
- בודקים שמסגרת המודעה מודגשת באדום.
יצירת אמולציה של דף במיקוד
אם מעבירים את המיקוד מהדף ל-DevTools, חלק מרכיבי שכבת-העל מוסתרים באופן אוטומטי אם הם מופעלים על ידי המיקוד. לדוגמה, רשימות נפתחות, תפריטים או בוררי תאריכים. האפשרות Emulate a focused page מאפשרת לנפות באגים ברכיב כזה כאילו הוא נמצא במוקד.
כדי ליצור אמולציה של דף במיקוד:
- פותחים דף עם הרכיב לניפוי באגים, לדוגמה: אתר YouTube שמכיל את סרגל החיפוש.
בדף, פותחים את הכרטיסייה עיבוד, מסמנים את התיבה הדמיה של דף ממוקד ומוחקים אותה.
ניתן גם למצוא את אותה האפשרות מתחת ללחצן :hov בסרגל הפעולות בקטע רכיבים > סגנונות.
למידע על דרכים נוספות להקפאת רכיב, אפשר לעיין במאמר הקפאת המסך ובדיקת רכיבים שנעלמים.
השבתת גופנים מקומיים
כדי לבדוק אם כתובות הגופנים החלופיות פועלות כמו שצריך, צריך להשבית local() מקורות ב-@font-face כללים.
לעיתים קרובות, מפתחים ומעצבים משתמשים בשני עותקים שונים של אותו גופן במהלך הפיתוח:
- גופן מקומי לכלים שלכם לעיצוב,
- גופן אינטרנט עבור הקוד שלך
השבתת הגופנים המקומיים מאפשרת לכם:
- ניפוי באגים ומדידה של ביצועים ואופטימיזציה של גופני אינטרנט
- אימות תקינות הכללים של
@font-faceב-CSS - מה ההבדל בין גופנים לאינטרנט לבין הגרסאות המקומיות שלהם
יצירת אמולציה של מקורות local() חסרים בכללים של @font-face:
בודקים את המשפט שלמעלה, פותחים את Elements > Computed, גוללים עד למטה, ובקטע Rendered Fonts רואים ש-Chrome מצא את הגופן Courier New בקבצים המקומיים.
פותחים את הכרטיסייה עיבוד, מסמנים את האפשרות השבתת גופנים מקומיים ו- טוענים מחדש את הדף.
בודקים את המשפט ב-Roboto שנמצא באינטרנט.
הפעלה אוטומטית של מצב כהה
תוכלו לראות איך האתר שלכם יכול להיראות במצב כהה, גם אם לא הטמעתם אותו.
ב-Chrome 96 נוספה גרסת מקור לניסיון לעיצוב כהה אוטומטי ב-Android. באמצעות התכונה הזו, הדפדפן מחיל עיצוב כהה שנוצר באופן אוטומטי על אתרים בעיצוב בהיר, אם המשתמש בחר להשתמש בעיצובים כהים במערכת ההפעלה.
כדי להפעיל מצב כהה אוטומטי:
- בדף הזה, פותחים את הכרטיסייה רינדור ומסמנים את התיבה הפעלת מצב כהה אוטומטי.
- צפייה בדף הזה במצב כהה.
אמולציה של לקויות ראייה
כולם צריכים להיות מסוגלים לגשת לאינטרנט וליהנות ממנו. Google מחויבת להפוך את זה למציאות.
בעזרת כלי הפיתוח ל-Chrome, אתם יכולים לראות איך אנשים עם לקויי ראייה רואים את האתר שלכם כדי שתוכלו לשפר אותו עבורם. מידע נוסף זמין במאמר הדמיה של ליקויי בראיית צבעים.
כדי לבצע אמולציה של ליקויי ראייה:
- פותחים את הכרטיסייה רינדור.
בקטע הדמיה של ליקויים בראייה, בוחרים אחת מהאפשרויות הבאות מהתפריט הנפתח:
- ללא אמולציה.
- ראייה מטושטשת.
- ירידה ברגישות לניגודיות.
- פרוטנופיה (ללא אדום). תפיסה נמוכה של אדום, בלבול בין ירוקים, אדומים וצהובים.
- דוטרנופיה (ללא ירוק). ראייה נמוכה של ירוק, בלבול בין ירוקים, אדומים וצהובים.
- Tritanopia (ללא כחול). קליטה נמוכה של כחול; בלבול בין ירוקים ובלוז.
- Achromatopsia (ללא צבע). חוסר חלקי או מלא בראיית צבעים.
השבתת פורמטים של תמונות AVIF ו-WebP
האמולציות האלה מאפשרות למפתחים לבדוק בקלות תרחישים שונים של טעינת תמונות בלי לעבור לדפדפן אחר.
נניח שקוד ה-HTML הבא משמש אתכם להצגת תמונה בפורמטים AVIF ו-WebP בדפדפנים חדשים יותר, עם תמונת PNG חלופית בדפדפנים ישנים יותר.
<picture>
<source srcset="test.avif" type="image/avif">
<source srcset="test.webp" type="image/webp">
<img src="test.png" alt="A test image">
</picture>
כדי להשבית את כל התמונות בפורמט AVIF בדף (או, באופן דומה, תמונות בפורמט WebP):
- פותחים את הכרטיסייה עיבוד, ומסמנים את האפשרות השבתת פורמט התמונה AVIF.
- טוענים מחדש את הדף ומעבירים את העכבר מעל
img src. ערך ה-src הנוכחי של התמונה (currentSrc) הוא עכשיו התמונה החלופית בפורמט WebP.
באופן דומה, אפשר להשבית תמונות WebP.