החלונית Coverage עוזרת לכם למצוא קוד JavaScript ו-CSS שלא נמצא בשימוש. הסרת קוד שלא נמצא בשימוש יכולה להאיץ את טעינת הדף ולחסוך בחבילת הגלישה של המשתמשים בנייד.
סקירה כללית
שליחת JavaScript או CSS שלא נמצאים בשימוש היא בעיה נפוצה בפיתוח אתרים. לדוגמה, נניח שאתם רוצים להשתמש ברכיב הלחצן של Bootstrap בדף שלכם. כדי להשתמש ברכיב הלחצן, צריך להוסיף קישור לגיליון הסגנונות של Bootstrap בקוד ה-HTML, כך:
...
<head>
...
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
...
</head>
...
גיליון הסגנונות הזה לא כולל רק את הקוד של רכיב הלחצן. הוא מכיל את ה-CSS של כל הרכיבים של Bootstrap. אבל אתם לא משתמשים באף אחד מהרכיבים האחרים של Bootstrap. לכן, הדף מוריד הרבה קובצי CSS שהוא לא צריך. ה-CSS הנוסף הזה יוצר בעיות מהסיבות הבאות:
- הקוד הנוסף מאט את טעינת הדף. ראו CSS שחוסם עיבוד.
- אם משתמש ניגש לדף במכשיר נייד, הקוד הנוסף צורך את חבילת הגלישה שלו.
בחלונית Coverage אפשר להקליט את הדף ולראות דוח של סך הבייטים של משאבי CSS ו-JavaScript שבשימוש ושלא בשימוש, ולעקוב אחרי הקוד בחלונית Sources.
פתיחת החלונית Coverage
- פותחים את כלי הפיתוח.
- פותחים את תפריט הפקודות.
מתחילים להקליד
coverage, בוחרים בפקודה Show Coverage (הצגת הכיסוי) ואז מקישים על Enter כדי להריץ את הפקודה. החלונית Coverage נפתחת בDrawer.
לחלופין, בפינה השמאלית העליונה, לוחצים על סמל האפשרויות הנוספות more_vert אפשרויות נוספות > כלים נוספים > כיסוי.
תיעוד רמת הכיסוי של הקוד
כדי לתעד את רמת הכיסוי של הקוד:
כדי להגדיר את היקף הכיסוי, בסרגל הפעולות בחלק העליון של החלונית כיסוי, בוחרים באפשרות לכל פונקציה או לכל בלוק מהתפריט הנפתח.
כדי להתחיל את ההקלטה, לוחצים על לחצן טעינה מחדש במרכז החלונית. החלונית Coverage טוענת מחדש את הדף, מתעדת את הקוד שנדרש לטעינת הדף וממשיכה את ההקלטה בזמן שאתם יוצרים אינטראקציה עם הדף.
כדי להפסיק את ההקלטה של רמת הכיסוי של הקוד, לוחצים על הפסקת האינסטרומנטציה של הכיסוי והצגת תוצאות בסרגל הפעולות של החלונית.
ניתוח של רמת הכיסוי של הקוד
בטבלה שבחלונית Coverage (כיסוי) מוצגים המשאבים שנותחו וכמות הקוד שנעשה בה שימוש בכל משאב.
לוחצים על שורה כדי לפתוח את המשאב הזה בחלונית מקורות ולראות פירוט של הקוד בשימוש ושל הקוד שלא בשימוש. שורות קוד שלא נעשה בהן שימוש מסומנות בקווים אפורים אנכיים ליד העמודה עם מספרי השורות בצד שמאל.
- בעמודה URL מופיעה כתובת ה-URL של המשאב שנותח.
- בעמודה סוג מצוין אם המשאב מכיל CSS, JavaScript או את שניהם.
- העמודה Total Bytes (בייטים כוללים) מציגה את הגודל הכולל של המשאב בבייטים.
- בעמודה Unused Bytes (בייטים שלא נעשה בהם שימוש) מופיע מספר הבייטים שלא נעשה בהם שימוש.
- העמודה Usage Visualization היא תצוגה חזותית של העמודות Total Bytes ו-Unused Bytes. החלק האפור בסרגל מייצג בייטים שלא נעשה בהם שימוש. החלק הירוק מייצג את נפח האחסון בשימוש.
כדי לסנן את הדוח לפי כתובת URL, מציינים אותה במסנן בסרגל הפעולות.
בשורת הסטטוס בתחתית החלונית Coverage מוצג אחוז הקוד שנעשה בו שימוש. שורת הסטטוס מביאה בחשבון את הסינון.
לצד סרגל המסננים, בתפריט הנפתח, אפשר לבחור באפשרות הכול, או רק באפשרות CSS או JavaScript כדי להציג בדוח.
כדי לכלול את קוד התוסף בדוח, מפעילים את האפשרות Content scripts (סקריפטים של תוכן).
כדי לייצא את הדוח, לוחצים על ייצוא של נתוני הכיסוי.