فايرفوكس المطور الإصدار 6 أروع أدوات لمحاولة

يعد إصدار مطور Firefox هو المتصفح الوحيد الذي تم إعداده خصيصًا للمطورين. تظهر أدوات المطور في الإصدار القياسي أولاً في إصدار المطور وهناك أدوات في إصدار المطور ليست متوفرة ولن تكون متوفرة في الإصدار القياسي. اليوم سوف نلقي نظرة على بعض الأدوات التي في الوقت الراهن يمكن العثور عليها فقط في طبعة المطور.

إذا كنت شخصًا لم يستخدم أبدًا أو لم يكن على دراية بأدوات المطورين حتى تلك الموجودة في الإصدار القياسي ، فتحقق من "DevTools Challenger" الرائع بواسطة Mozilla أولاً. هنا يمكنك التدرب على بعض الأدوات المذكورة أدناه في متصفح إصدار مطور Firefox. الأمثلة ممتعة وسهلة المتابعة ، والتعليمات واضحة ، وإذا كنت لا تستطيع اللحاق بالركب ، فقط اتبع الفيديو التعليمي بدلاً من ذلك.

1. أداة مفتش الرسوم المتحركة

أصبحت الرسوم المتحركة لـ CSS أكثر شيوعًا ، كما أن أدوات الرسوم المتحركة لـ CSS التي توفرها إصدار مطور Firefox تجعل من السهل متابعة وفحص كل خطوة من خطوات الرسوم المتحركة التي تم إنشاؤها. يمكنك التوقف واللعب وعكس أي رسوم متحركة. يمكنك أيضا مشاهدته يحدث الإطار بالإطار عن طريق التنظيف.

للوصول إلى الأداة ، افتح مفتش أداة بالنقر بزر الماوس الأيمن على العنصر المتحرك واختيار "فحص العنصر" ، ثم على الجانب الأيمن من نافذة أداة dev ، انقر فوق "الرسوم المتحركة".

2. الرسوم المتحركة توقيت وظيفة محرر

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

إذا لم تكن معتادًا بالفعل على وظيفة Bezier للرسوم المتحركة المكعبة ، فإنني أوصي بهذا المنشور لمعرفة المزيد عنها.

3. منتقي الألوان لخصائص CSS

يوجد بالفعل منتقي ألوان متوفر في الإصدار القياسي من Firefox (اقرأ المزيد عنه في هذا المنشور) ، والذي يختار اللون من الصفحة وينسخه إلى الحافظة. منتقي الألوان الذي أذكره الآن هو محددة لقيم اللون CSS للخصائص.

بجانب كل قيمة اللون المغلق في قواعد قسم من مفتش أداة ، هناك أيقونة التي ستفتح عجلة الألوان المنبثقة عند النقر عليها. يمكنك اختيار اللون الذي تريده من العجلة.

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

4. أداة القياس

تتيح لك هذه الأداة رؤية موضع XY للمؤشر ، والارتفاع والعرض والقياس المائل بالبكسل للجزء المحدد. لاستخدام الأداة ، سيكون عليك أولاً تمكينها في المطور خيارات الأدوات, عن طريق تحديد مربع الاختيار المسمى "قياس جزء من الصفحة" ضمن "أزرار مربع الأدوات المتوفرة".

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

5. محرر مرشح CSS

إذا قمت بتطبيق مرشح CSS على عنصر في الصفحة ، فسترى أيقونة بجانبه في قواعد قسم من مفتش الأداة التي تفتح محرر مرشح CSS عند النقر.

لإزالة عامل تصفية ، انقر فوق علامة × في الطرف الأيمن من اسم المرشح. لإضافة عامل تصفية ، انقر فوق مربع التصفية في الأسفل وحدد المرشح الذي ترغب في إضافته وانقر فوق + إشارة. يمكنك أيضًا إعادة ترتيب المرشحات في أي ترتيب عن طريق سحب كل عنصر.

6. أداة الذاكرة

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

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

لاستخدام الأداة ، انقر فوق "التقاط لقطة" أو زر الكاميرا. سترى قائمة بالعناصر ، مثل الكائنات والبرامج النصية التي تشغل الذاكرة .