مفتش CSS مفصل في كل موقع باستخدام CSSPeeper لمتصفح Chrome

تعد لوحة Chrome DevTools العادية قوية جدًا. إنه يتيح لأي شخص الغوص عميقًا في أي صفحة لدراسة تخطيط موقع ، CSS ، وحتى رؤوس HTTP إذا لزم الأمر.

يمكنك فعل الكثير مع مفتش DevTools CSS. لكن لا يحتوي على لوحة واجهة المستخدم الرسومية الواضحة وهذا شيء سيحبه كل مطور.

راجع CSSPeeper ، امتداد Chrome مجاني يضيف مفتش واجهة المستخدم الرسومية هذا إلى متصفحك. يتيح لك دراسة خصائص CSS لأي عنصر في أي صفحة ، على الرغم من أنه مصمم فقط لمتصفح Chrome في الوقت الحالي.

بمجرد تثبيت لك فقط قم بزيارة صفحة ويب وانقر فوق الزر الرئيسي للملحق في شريط الوظائف الإضافية في Chrome. تظهر نافذة مفتش جديدة أعلى صفحة الويب مع تفاصيل حول كل عنصر رئيسي.

أثناء تصفحك للموقع ، يمكنك النقر فوق أي عنصر تراه بمخطط منقط. يمكن أن يشمل ذلك الأزرار ، أقسام الصفحة ، الرؤوس ، عناصر التنقل ، سمها ما شئت.

من هناك ستحصل على مفتش كامل مع تفاصيل حول الطباعة وخيارات الألوان وأنماط الخطوط. إنها طريقة رائعة ل سحب الأنماط مباشرة من صفحة ويب دون الخوض في كود CSS بنفسك.

CSSPeeper حتى يسمح لك اختيار الألوان ذات الصلة مع منتقي الألوان المدمج ومولد مخطط اللون. يمكنك تصدير الصور من الصفحات ، وبناء أنظمة الألوان الخاصة بك ، و تطبيق هذه في نماذج بالحجم الطبيعي الخاص بك مع فوتوشوب أو رسم.

أنا في المقام الأول يوصي هذا التمديد للمصممين بدلاً من المطورين ، حيث إنه مكون إضافي سهل الاستخدام والذي يسحب CSS الخام ويحول الشفرة إلى أجزاء سهلة القراءة من البيانات.

لكن هذا البرنامج المساعد يمكن أن يساعد المطورين أيضًا! انها حقا أداة تفتيش موقع قوية لجميع أنواع CSS.

ألق نظرة على الصفحة الرئيسية لـ CSSPeeper لمعرفة المزيد حول ما يمكن القيام به. تتضمن الصفحة الرئيسية أيضًا رابطًا لمتجر Chrome حتى تتمكن من تثبيت الإضافة مجانًا وإخراجها لإجراء اختبار.