כיסוי: איתור JavaScript ו-CSS שאינם בשימוש

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

בחלונית כיסוי אפשר לאתר קובצי 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.

פתיחה של חלונית הכיסוי

  1. פותחים את כלי הפיתוח.
  2. פותחים את תפריט הפקודה.

  3. מתחילים להקליד coverage, בוחרים בפקודה Show Coverage ומקישים על Enter כדי להריץ אותה. החלונית Coverage נפתחת בDrawer.

    חלונית הכיסוי.

לחלופין, בפינה השמאלית העליונה, בוחרים באפשרות more_vert אפשרויות נוספות > כלים נוספים > כיסוי.

הקלטת הכיסוי של הקוד

כדי לתעד את רמת הכיסוי של הקוד:

  1. כדי להגדיר את היקף הכיסוי, בסרגל הפעולות בחלק העליון של החלונית Coverage, בוחרים באפשרות Per function או Per block מהתפריט הנפתח.

  2. כדי להתחיל את ההקלטה, לוחצים על התחלת האינסטרומנטציה של הכיסוי וטעינה מחדש של הדף החלונית כיסוי טוענת מחדש את הדף, מתעדת את הקוד שנדרש לטעינת הדף וממשיכה את ההקלטה במהלך האינטראקציה עם הדף.

  3. כדי להפסיק את ההקלטה של כיסוי הקוד, לוחצים על Stop instrumenting coverage and show results.

ניתוח של רמת הכיסוי של הקוד

בטבלה שבחלונית כיסוי מוצגים המשאבים שנותחו וכמות הקוד שנעשה בו שימוש בכל משאב.

בחלונית מקורות ניתן ללחוץ על שורה כדי לפתוח את המשאב הזה ולראות פירוט של הקוד שנעשה בו שימוש וקוד שלא נמצא בשימוש, שורה אחרי שורה. שורות קוד שלא בשימוש מסומנות בקווים אדומים ליד עמודה עם מספרי שורות בצד שמאל.

דוח כיסוי של קוד.

  • העמודה כתובת URL היא כתובת ה-URL של המשאב שעבר ניתוח.
  • בעמודה Type מצוין אם המשאב מכיל CSS,‏ JavaScript או את שניהם.
  • העמודה Total Bytes (סה"כ בייטים) מציגה את הגודל הכולל של המשאב בבייטים.
  • העמודה Unused Bytes מציגה את מספר הבייטים שלא נוצלו.
  • העמודה האחרונה ללא שם היא תצוגה חזותית של סך כל הבייטים עמודות עם בייטים שלא בשימוש. הקטע האדום בסרגל הוא בייטים שלא נמצאים בשימוש. הקטע האפור מייצג בייטים בשימוש.

כדי לסנן את הדוח לפי כתובת URL, מציינים אותה במסנן בסרגל הפעולות.

אחוז הקוד שנעשה בו שימוש מוצג בשורת הסטטוס שבתחתית החלונית כיסוי. סרגל הסטטוס מתייחס לסינון.

לצד סרגל המסננים, בתפריט הנפתח, אפשר לבחור באפשרות הכול או רק באפשרות CSS או JavaScript כדי להציג בדוח.

כדי לכלול קוד תוסף בדוח, מפעילים את האפשרות סקריפטים של תוכן .

כדי לייצא את הדוח, לוחצים על ייצוא הכיסוי.