מפקח CSS מפורט בכל אתר עם CSSPeeper עבור Chrome

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

אתה יכול לעשות הרבה עם מפקח CSS DevTools. אבל זה לא צריך פאנל GUI ברור וזה דבר אחד כל מפתח יאהב.

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

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

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

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

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

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

אבל תוסף זה יכול גם לעזור למפתחים מדי! זה באמת כלי בדיקה רב עוצמה באתר עבור כל סוגי CSS.

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