CSS Inspector הוא כלי פיתוח רב עוצמה המאפשר לך לצפות במאפייני ה-CSS המלאים של כל אלמנט פשוט על ידי העברת העכבר מעליו. לחץ כדי לנעול סגנונות, ערוך אותם ישירות, וראה את השינויים שלך מוחלים באופן מיידי על הדף.
בין אם אתה מנפה תקלה בפריסה, מהנדס לאחור עיצוב שאתה מעריך, או פשוט בודק ערכי ריווח וטיפוגרפיה במהירות, CSS Inspector נותן לך את כל מה שאתה צריך בפאנל צף ונקי. בניגוד ל-DevTools של הדפדפן, הוא לא מפריע לך - בלי פאנלים מעוגנים, בלי שינוי גודל של אזור התצוגה. פשוט מרחפים, לוחצים ובודקים. הכלי מציג את הסגנונות המחושבים (computed styles) - כלומר מה שהדפדפן בפועל מרנדר - ולא רק את ה-CSS שנכתב במקור. המשמעות היא שאתה רואה את הערכים האמיתיים אחרי שהירושה, הספציפיות (specificity) והקסקדה נפתרו - אותם ערכים בדיוק שמשפיעים על מה שהמשתמשים רואים על המסך.
בדיקת אלמנט לעולם לא גורמת ל-reflow או repaint של הדף עצמו, כך שאתה יכול לחקור בחופשיות בלי לדאוג לפגוע במיקום הגלילה, באנימציות או במצב ה-JavaScript. גם פסאודו-אלמנטים כמו ::before ו-::after נתמכים - תרחף מעל האלמנט האב והפאנל יציג את הסגנונות של התוכן שנוצר (generated content) בנפרד מהסגנונות של האלמנט עצמו. משתני CSS (custom properties) נפתרים לערך המחושב הסופי שלהם, אבל הפאנל גם מציג לך את שם המשתנה שהפיק אותו, כך שתוכל לעקוב אחורה מצבע או ערך ריווח אל מקור ה-design token שלו, במקום לראות רק מספר פיקסלים גולמי.
בשימוש יומיומי, רוב המפתחים פותחים את CSS Inspector עשרות פעמים בכל סשן - כדי לבדוק למה margin קרס, לאמת קוד הקס לפני שמעתיקים אותו לגיליון סגנונות, או לוודא ש-breakpoint של media query אכן החיל את הסגנונות שהיה אמור להחיל. מכיוון שמדובר בפאנל צף ולא במצב שתופס את כל הדפדפן, אתה יכול להשאיר אותו פתוח בזמן שאתה עובר בין לשוניות כדי לבדוק את עורך הקוד שלך או קובץ עיצוב, ולחזור ישירות לאותו אלמנט בלי לאבד את המיקום.
ראה באופן מיידי גופנים, גדלים, צבעים, ריווח ועוד תוך כדי ריחוף מעל כל אלמנט.
לחץ על האלמנט כדי לנעול את הפאנל ולמנוע ממנו להיעלם, מה שמאפשר בדיקה מפורטת.
לחץ פעמיים על ערכים כדי לשנות אותם ישירות. העריכות שלך משתקפות מיד בדף.
העתק מאפיינים בודדים או את בלוק הסגנון המלא ללוח שלך בלחיצה אחת.
צפה בערכי margin, border ו-padding באופן ויזואלי.
צפה ברוחב, גובה ומיקום האלמנט בדף.
CSS Inspector מציג למעלה מ-40 מאפיינים:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorבדוק אלמנטים שאינם מיושרים כראוי בדיוק רב.
חקור את הסגנונות של האתרים המועדפים עליך.
בדוק שינויים לפני כתיבת קוד.
הצג שינויים בזמן אמת במהלך פגישות.
קבל בקלות קוד CSS עבור אלמנטים חדשים.
לחץ על סמל ה-CSS Inspector מסרגל הכלים של DevSuite Pro.
העבר את הסמן מעל כל אלמנט כדי לראות את המאפיינים שלו.
לחץ על האלמנט כדי להצמיד את הפאנל.
לחץ פעמיים על ערכים כדי להתאים אותם.
העתק את הקוד המעודכן והשתמש בו בפרויקט שלך.
התקן את DevSuite Pro בחינם ופתח 64+ כלי פיתוח לדפדפן שלך.