לנתח כל קודי האתר עם CSS לחפור הרחבת Chrome

יש הרבה דברים שאפשר לעשות אתם Chrome DevTools מעריכת אתרי אינטרנט חיים ללימוד בקשות HTTP מפורטות. אבל ה היכולת לנתח תבניות CSS הוא לא אפוי לתוך המסוף.

עם Dig dig, אתה יכול לנתח את כל בוררי CSS, הספציפיות, ו מאפיינים ייחודיים של כל דף אינטרנט ישירות מ- Chrome. תוסף זה הוא לגמרי בחינם ומציע הרבה כוח מפתחי frontend.

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

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

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

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

כנראה מקרה השימוש הנפוץ ביותר עבור CSS Dig הוא ברור לשכפל צבעים מתוך לוח הצבעים שלך. כמה גוונים ייחודיים של ירוק אתה באמת צריך? או, כמה גופנים sans-serif שונים נחוצים עבור דף אחד?

CSS Dig הוא פשוט מאוד, אז אל תצפו עשרות תכונות כמו עם DevTools. במקום זאת, תוסף זה הוא די מיועד מפתחי Frontend אתרי ביקורת עבור בוררים חוזרים או מאפיינים כפולים.

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