Code Coverage בודק כל בורר בכל גיליון סגנונות קריא מול העמוד החי, כך שתוכל לראות אילו כללי CSS לא תואמים כרגע כלום, כמה בתים כל קובץ מבזבז, ואילו סקריפטים מחזיקים את הצבע הראשון.
גיליונות הסגנונות רק גדלים. מגיע ערכת נושא עם כללים לדפים שאין לך, מסגרת מספקת רכיבים שאתה אף פעם לא משתמש בהם, ושלושה עיצובים מחדש מאוחר יותר אף אחד לא בטוח איזה חצי מהקובץ נושא עומס. התוצאה היא CSS שעולה לכל מבקר ברוחב פס וזמן להצגת כללים שהדף לא יכול להשתמש בהם.
כיסוי קוד מודד את זה ישירות. הוא עובר על כל כלל בכל גיליון סגנונות שהדפדפן יאפשר לו לקרוא - כולל כללים המקוננים בתוך שאילתות מדיה, @supports ו-@layer בלוקים - ובודק כל בורר מול ה-DOM החי. כלל שלא תואם כלום כרגע מדווח כלא בשימוש, לכל קובץ, עם אחוז, הבתים המבוזבזים ורשימת הבוררים המלאה שתוכלו להרחיב ולהעתיק.
זה מקפיד על המלכודות הברורות. פסאודו-אלמנטים ומחלקות פסאודו של מצבים מופשטים לפני ההתאמה, כך שכלל :hover או ::before נשפט לפי האם בורר הבסיס שלו קיים ולא נמחק בטעות. גיליונות סגנונות המוגשים במקור צולב ללא כותרות CORS אינם ניתנים לקריאה על ידי שום סקריפט, ולכן הם מסומנים כבלתי קריאים במקום להיספר כמושלמים בשקט. ומכיוון שהסריקה משקפת את העמוד כפי שהוא באותו הרגע, כללים לתפריטים, לשוניות ולמודלים שעדיין לא פתוחים ייראו לא בשימוש - אז פתחו אותם והקשו על סרוק מחדש לפני שתמחקו משהו.
לשונית JavaScript עונה על שאלה אחרת: משקל וחסימה. הוא אוסף כל סקריפט שהדף טוען עם גודל ההעברה שלו, זמן ההורדה שלו, והאם הוא אסינכרון, דחוי, מודול, נטען באופן דינמי או מחזיק את הצבע הראשון, ואז מסכם כמה בתים חוסמים. זה בכוונה לא נמכר ככיסוי ביצוע - לדעת אילו שורות JavaScript פועלות מצריך את ה-API של איתור באגים של Chrome, ש-DevSuite Pro לא מבקש, כך ששום דבר כאן לא מתיימר להיות דוח ברמת השורה.
כל כלל בכל גיליון סגנונות קריא נבדק מול ה-DOM החי, כולל כללים בתוך שאילתות מדיה, @supports ו-@layer בלוקים - לא מוערך לפי שמות קבצים או גדלים.
כל גיליון סגנונות מקבל אחוז לא בשימוש, ספירת כללים משומשים מול לא בשימוש ומספר בתים מבוזבזים, ממוינים כך שהעבריין הגרוע ביותר נמצא בראש.
הרחב כל קובץ כדי לקרוא את הבוררים שלא תואמים כלום, ואז העתק אותם כבלוק CSS כדי לעבוד עליו בעורך שלך או ביד לחבר לצוות.
פסאודו-אלמנטים ומחלקות פסאודו של מצבים כגון :hover ו-:focus-within מופשטים לפני ההתאמה, כך שחוקים אינטראקטיביים נשפטים בצורה הוגנת במקום להימחק.
כל סקריפט רשום עם הגודל שלו, זמן ההורדה והאם הוא אסינכרון, דחוי, מודול, נטען דינמית או חוסם צבע ראשון - בתוספת סך הבתים החוסמים.
גיליונות סגנונות צולבים בלתי קריאים מסומנים במקום עם ניקוד, והכרטיסייה JS אומרת בבירור שהיא מודדת משקל, לא אילו שורות מבוצעות. אין מספרים שהומצאו.
ערכת נושא שנרכשה שולחת CSS לעשרות פריסות הדגמה. ראה כמה ממנו האתר שלך לא משתמש לעולם וחתוך את הקובץ עם ראיות ולא ניחושים.
בדוק כמה מסגרת CSS שורדת על תבנית אמיתית, והאם תצורת הטיהור או הרעידה שלך עושה את מה שאתה חושב שהיא.
רשום את הסקריפטים שמחזיקים בעיבוד, עם הגדלים שלהם, והחליט מה לדחות, לפצל או לשחרר כדי להציג תוכן על המסך מוקדם יותר.
נכנסים עם מספרים: אילו קבצים מבזבזים הכי הרבה בתים, כמה JavaScript חוסם, ואיפה שעת העבודה הראשונה משתלמת ביותר.
השתלטות על אתר שלא בניתם, קבלו קריאה מהירה עד כמה מה-CSS וה-JavaScript שלו עדיין מרוויחים את מקומו.
לחץ על הסמל Code Coverage ברציף DevSuite Pro. הסריקה פועלת מיד ומדווחת כמה כללים היא בדקה ואיזה חלק מהם אינו בשימוש.
השורה העליונה נותנת לך את ספירת גיליונות הסגנונות, הכללים הכוללים, האחוז הלא בשימוש והביטים המבוזבזים. הקבצים למטה מסודרים לפי הכמות שהם מבזבזים.
לחץ על הצג בוררים שאינם בשימוש בכל קובץ כדי לקרוא בדיוק אילו כללים לא תואמים דבר בדף זה.
פתחו תפריטים, כרטיסיות, אקורדיונים ומודלים, ואז הקש על סריקה מחדש. כללים שהרכיבים שלהם קיימים רק באותן מדינות יעברו ממצב לא בשימוש - תמיד עשה זאת לפני המחיקה.
העתקת בוררים שאינם בשימוש נותן לך בלוק CSS לעבוד דרכו; ייצוא JSON מעתיק את הדוח המלא, כולל מלאי JavaScript, עבור כרטיס או מסמך ביקורת.
התקן את DevSuite Pro בחינם ופתח 71+ כלי פיתוח לדפדפן שלך.
