← بازگشت به ویژگی‌ها
Free

CSS Inspector

ابزار CSS Inspector یک ابزار قدرتمند توسعه‌دهنده است که به شما امکان می‌دهد ویژگی‌های کامل CSS هر عنصری را تنها با حرکت دادن ماوس روی آن مشاهده کنید. برای قفل کردن سبک‌ها کلیک کنید، آن‌ها را مستقیماً ویرایش کنید و ببینید که تغییرات شما فوراً در صفحه اعمال می‌شود.

چه در حال رفع یک مشکل چیدمان باشید و چه در حال مطالعه وب‌سایتی که دوست دارید، CSS Inspector تمام آنچه را که نیاز دارید در یک پنل شناور تمیز در اختیار شما قرار می‌دهد. بدون باز کردن ابزارهای توسعه مرورگر، به راحتی بررسی کنید.

پیش‌نمایش زنده
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

مقادیر حاشیه، لبه و فاصله داخلی را به صورت بصری مشاهده کنید.

ابعاد و موقعیت عنصر

عرض، ارتفاع و موقعیت عنصر را در صفحه مشاهده کنید.

آنچه می‌توانید بررسی کنید

CSS Inspector بیش از ۴۰ ویژگی را نمایش می‌دهد:

تایپوگرافی

  • 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

از نوار ابزار DevSuite Pro روی آیکون CSS Inspector کلیک کنید.

2

حرکت ماوس برای بررسی

نشانگر را روی هر عنصری نگه دارید تا ویژگی‌های آن را ببینید.

3

کلیک برای قفل کردن

روی عنصر کلیک کنید تا پنل ثابت شود.

4

ویرایش سبک‌ها

روی مقادیر دوبار کلیک کنید تا آن‌ها را تنظیم کنید.

5

کپی و استفاده

کد اصلاح شده را کپی کرده و در پروژه خود استفاده کنید.

آماده برای امتحان کردن هستید؟ CSS Inspector?

DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.

افزودن به Chrome افزودن به Edge افزودن به FireFox