בחלונית כיסוי בכלי הפיתוח ל-Chrome אפשר למצוא תוכן JavaScript שלא נמצא בשימוש קוד CSS. הסרת קוד שלא בשימוש יכולה להאיץ את טעינת הדף ולחסוך בשימוש בחבילת הגלישה של המשתמשים.
סקירה כללית
משלוח של JavaScript או CSS שאינם בשימוש היא בעיה נפוצה בפיתוח אתרים. לדוגמה, נניח שאתם רוצים להשתמש ברכיב הלחצן של Botstrap. בדף. כדי להשתמש ברכיב הלחצן, צריך להוסיף קישור אליו גיליון הסגנונות של 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 של כל רכיבי Batstrap. אבל אתם לא משתמשים כל רכיב אחר של אתחול אתחול. הדף מוריד לשירות ה-CSS שהוא לא זקוק לו. שירות ה-CSS הנוסף הזה מהווה בעיה עבור הפריטים הבאים סיבות:
- הקוד הנוסף מאט את טעינת הדף. ראו חסימת עיבוד CSS.
- אם משתמש ניגש לדף ממכשיר נייד, הקוד הנוסף משתמש בחבילת הגלישה שלהם.
פתיחה של חלונית הכיסוי
- פותחים את תפריט הפקודה.
מתחילים להקליד
coverage, בוחרים בפקודה הצגת כיסוי ואז מקישים על Enter כדי להריץ את הפקודה. החלונית כיסוי תיפתח בעוד חלונית ההזזה.
הקלטת הכיסוי של הקוד
כדי לתעד את הכיסוי של הקוד:
כדי להגדיר את היקף הכיסוי, בסרגל הפעולות שבחלק העליון של החלונית כיסוי, בוחרים באפשרות לכל פונקציה או לכל חסימה מהרשימה הנפתחת.
כדי להתחיל את ההקלטה, לוחצים על רענון התחלת האינסטרומנטציה וטעינה מחדש של הדף החלונית כיסוי טוענת מחדש את הדף, מתעדת את הקוד שנדרש לטעינת הדף וממשיכה את ההקלטה במהלך האינטראקציה עם הדף.
כדי להפסיק את ההקלטה של הכיסוי של הקוד, לוחצים על stop_circle הפסקת האינסטרומנטציה והצגת תוצאות.
ניתוח של כיסוי הקוד
בטבלה שבחלונית כיסוי אפשר לראות אילו משאבים נבדקו וכמה קוד נמצא בשימוש בכל משאב.
בחלונית מקורות ניתן ללחוץ על שורה כדי לפתוח את המשאב הזה ולראות פירוט של הקוד שנעשה בו שימוש וקוד שלא נמצא בשימוש, שורה אחרי שורה. שורות קוד שלא בשימוש מסומנות בקווים אדומים ליד עמודה עם מספרי שורות בצד שמאל.
- בעמודה URL מוצגת כתובת ה-URL של המשאב שבוצע לה ניתוח.
- בעמודה סוג כתוב אם המשאב מכיל CSS, JavaScript, או לשניהם.
- בעמודה סה"כ בייטים מוצג הגודל הכולל של המשאב בבייטים.
- בעמודה בייטים שלא בשימוש מוצג מספר הבייטים שלא נעשה בהם שימוש.
- העמודה האחרונה ללא שם היא תצוגה חזותית של סך כל הבייטים עמודות עם בייטים שלא בשימוש. הקטע האדום בסרגל הוא בייטים שלא נמצאים בשימוש. החלק האפור בשימוש בייטים.
כדי לסנן את הדוח לפי כתובת URL, מציינים אותה במסנן בסרגל הפעולות.
בשורת הסטטוס שבתחתית החלונית כיסוי מוצג אחוז הקוד שנעשה בו שימוש. שורת הסטטוס לוקחת בחשבון את הסינון.
לצד סרגל הסינון, מהרשימה הנפתחת, אפשר לבחור באפשרות הכול, או לבחור רק CSS או JavaScript כדי להציג אותם בדוח.
כדי לכלול קוד תוסף בדוח, מפעילים את האפשרות סקריפטים של תוכן check_box.
כדי לייצא את הדוח, לוחצים על הורדה ייצוא הכיסוי.