← العودة إلى الميزات
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)

شاهد قيم الهامش (margin) والحدود (border) والحشو (padding) بصرياً.

حجم العنصر وموقعه

يعرض عرض العنصر وارتفاعه وموقعه على الصفحة.

ما يمكنك فحصه

يعرض مفحص CSS أكثر من 40 خاصية:

الخطوط

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

نموذج الصندوق

  • 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