← חזרה לתכונות
Free

CSS Inspector

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

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

תצוגה מקדימה חיה
example.com/landing-page CSS Inspector: ON
Hover any element to inspect its CSS
Sign Up Now
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS Properties Locked
<button> .cta-primary
BOX MODEL
margin: 0
padding: 12 24
180 × 48
Typography
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Layout & Spacing
displayinline-flex
padding12px 24px
border-radius8px
Appearance
background#7c3aed
cursorpointer
transitionall 0.2s ease
Copy All CSS Edit
תכונות מפתח

תצוגת מאפיינים בזמן אמת

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

לחץ כדי לנעול

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

עריכת סגנונות חיה

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

העתקה בלחיצה אחת

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

ויזואליזציה של Box Model

צפה בערכי margin, border ו-padding באופן ויזואלי.

מידות ומיקום אלמנטים

צפה ברוחב, גובה ומיקום האלמנט בדף.

מה ניתן לבדוק

CSS Inspector מציג למעלה מ-40 מאפיינים:

טיפוגרפיה

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-transform
  • color

Box Model

  • width
  • height
  • padding
  • margin
  • border
  • border-radius
  • box-sizing

פריסה

  • display
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  • float
  • overflow

רקע

  • background-color
  • background-image
  • background-size
  • background-position

אפקטים

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
מקרי שימוש נפוצים

פתרון בעיות פריסה

בדוק אלמנטים שאינם מיושרים כראוי בדיוק רב.

למידה מעיצובים קיימים

חקור את הסגנונות של האתרים המועדפים עליך.

ניסויי עיצוב מהירים

בדוק שינויים לפני כתיבת קוד.

ביקורות לקוחות

הצג שינויים בזמן אמת במהלך פגישות.

חילוץ סגנון

קבל בקלות קוד CSS עבור אלמנטים חדשים.

איך להשתמש
1

הפעל את ה-CSS Inspector

לחץ על סמל ה-CSS Inspector מסרגל הכלים של DevSuite Pro.

2

רחף כדי לבדוק

העבר את הסמן מעל כל אלמנט כדי לראות את המאפיינים שלו.

3

לחץ כדי לנעול

לחץ על האלמנט כדי להצמיד את הפאנל.

4

ערוך סגנונות

לחץ פעמיים על ערכים כדי להתאים אותם.

5

העתק והשתמש

העתק את הקוד המעודכן והשתמש בו בפרויקט שלך.

מוכנים לנסות? CSS Inspector?

התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.

הוסף ל-Chrome הוסף ל-Edge הוסף ל-FireFox