'סקירת CSS' בכלי DevTools של Chromium

כיצד לנתח את ה-CSS שלך עם DevTools

ניתוח ה-CSS שלך ב-DevTools

Chrome הציג לאחרונה תכונה ניסיונית חדשה, הנקראת "סקירה כללית של CSS", המספקת לך סיכום של בעיות סגנון פוטנציאליות במסמך שלך על ידי הצגת חלונית אנליטיקה של ה-CSS שלך. נכון לכתיבת שורות אלו, התכונה החדשה עדיין ניסיונית, אך עבדה ללא רבב בשימוש שלי. "סקירת CSS" זמינה גם בדפדפני Chromium אחרים, כגון Microsoft Edge.

כיצד לפתוח את סקירת ה-CSS

  • פתח את החלונית DevTools
  • השתמש בלוח הפקודות (Shift + Command + P ב-macOS או Shift + Ctrl + P ב-Windows)
  • הזן את מונח החיפוש "סקירת css"
  • לחץ על התוצאה הנכונה או לחץ על Enter במקלדת שלך

עכשיו אתה מוכן לקיים אינטראקציה עם חלונית "סקירת CSS".

מה "סקירת CSS" מאפשרת לך לנתח

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

Image 83fef5d6e84e

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

Image 7c5c362ac9eb

Image 1a31f1f049d5

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

Image 7fa31df08102

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

אם אתה משתמש ב-Tailwind.css (כפי שאני עושה כמעט בכל אפליקציית אינטרנט), הדוח לגבי סגנונות שאינם בשימוש אינו מספק הרבה תובנות, שכן PostCSS מסיר את כל הגדרות ה-CSS שאינן בשימוש בתהליך מקדים.

Outlook עבור "סקירת CSS"

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