10 أدوات مطور فايرفوكس مفيدة يجب أن تعرفها
يشتمل فايرفوكس على أنه "متصفح للمطوّرين" يحتوي على العديد من الأدوات الرائعة للمساعدة في جعل عملنا أسهل. يمكنك العثور على المزيد من مجموعة أدواتها على صفحة الويب الخاصة بـ Firefox Developer Tools ، كما يمكنك تجربة متصفح Edition Developer الذي يحتوي على المزيد من الميزات والأدوات التي يتم اختبارها.
لهذا المنصب ، لقد المدرجة 10 أدوات يدوية قد ترغب من مجموعة أدوات المطور. لقد أوضحت أيضًا ما يمكن أن تفعله هذه الأدوات مع صور GIF بالإضافة إلى كيفية الوصول إليها كمرجع سريع.
1. عرض الحكام الأفقي والرأسي
فايرفوكس لديه أداة الحاكم يعرض كل من المساطر الأفقية والرأسية بوحدات البكسل على الصفحة. الأداة مفيدة لترتيب العناصر الخاصة بك عبر الصفحة.
للوصول إلى المساطر من خلال القائمة ، انتقل إلى: ☰> مطور > شريط أدوات المطور (اختصار: Shift + F2). بمجرد ظهور شريط الأدوات في أسفل الصفحة ، اكتب الحكام و اضغط أدخل.
لجعل هذا يظهر في نافذة أدوات المطور ، انتقل إلى "خيارات صندوق الأدوات". ضمن قسم "أزرار الأدوات المتاحة" ، تحقق من "تبديل المساطر للصفحة"مربع الاختيار.
2. أخذ لقطات باستخدام محددات CSS
على الرغم من أن شريط أدوات Firefox يتيح لك التقاط لقطات للصفحة الكاملة أو الأجزاء المرئية ، في رأيي ، فإن طريقة اختيار CSS تكون أكثر فائدة لالتقاط لقطات من العناصر الفردية وكذلك ل العناصر المرئية على مؤشر الماوس فقط (مثل القوائم).
لالتقاط لقطات شاشة من خلال القائمة ، انتقل إلى ☰> مطور > شريط أدوات المطور (اختصار SHIFT + F2). بمجرد ظهور شريط الأدوات في أسفل الصفحة ، اكتب لقطة شاشة - تحديد any_unique_css_selector و اضغط أدخل.
لجعل هذا يظهر في نافذة أدوات المطور: انقر فوق "خيارات صندوق الأدوات" وتحت قسم "أزرار أدوات الأدوات المتاحة" ، حدد "خذ لقطة شاشة كاملة للصفحة " مربع.
3. اختيار الألوان من صفحات الويب
يحتوي Firefox على أداة لاقط الألوان مدمجة باسم "Eyedropper". للوصول إلى أداة "Eyedropper" من خلال القائمة ، انتقل إلى ☰> مطور > القطارة.
لجعل هذا يظهر في نافذة أدوات المطور: انقر فوق "خيارات مربع الأدوات" وتحت قسم "أزرار أزرار الأدوات المتاحة" حدد "الحصول على لون من الصفحة"مربع الاختيار.
4. عرض تخطيط الصفحة في 3D
إن عرض صفحات الويب ثلاثية الأبعاد يساعد في مشاكل التصميم. ستتمكن من رؤية العناصر ذات الطبقات المختلفة بشكل أكثر وضوحًا في العرض ثلاثي الأبعاد. لعرض صفحة الويب ثلاثية الأبعاد ، انقر فوق زر الأداة "عرض ثلاثي الأبعاد".
لجعل هذا يظهر في نافذة أدوات المطور ، انقر فوق "خيارات مربع الأدوات" وتحت قسم "أزرار أزرار الأدوات المتاحة" ، حدد "عرض ثلاثي الأبعاد"مربع الاختيار.
5. عرض أسلوب المتصفح
تتكون أنماط المستعرض من نوعين: النمط الافتراضي الذي يعينه المستعرض لكل عنصر ، والأنماط الخاصة بالمستعرض (الأنماط التي لها بادئة المستعرض). من خلال إلقاء نظرة على أنماط المتصفح ، ستكون قادرًا على ذلك تشخيص أي مشاكل تجاوز في ورقة الأنماط الخاصة بك ونتعرف أيضًا على أي أنماط محددة خاصة بالمتصفح .
للوصول إلى "أنماط المتصفح" من خلال القائمة ، انتقل إلى ☰> مطور > مفتش. ثم انقر فوق علامة التبويب "حساب" في القسم الأيمن وتحقق من مربع الاختيار "أنماط المتصفح".
يمكنك أيضا فتح "مفتش"تبويب الاختصار Ctrl + Shift + C ثم الوصول إلى" أنماط المتصفح ".
6. تعطيل جافا سكريبت لجلسة الحالية
للحصول على أفضل الممارسات وتوافق قارئ الشاشة ، يُنصح دائمًا بترميز أي موقع ويب بطريقة لا تتعطل وظائفه في بيئة تم تعطيل جافا سكريبت. لاختبار مثل هذه البيئات ، يمكنك تعطيل جافا سكريبت لجلسة كنت تعمل فيها.
لتعطيل جافا سكريبت لجلسة العمل الحالية ، انقر فوق "خيارات مربع الأدوات" وتحت قسم "إعدادات متقدمة" ، تحقق من "ألغ تفعيل الجافا سكربت* "مربع الاختيار.
7. إخفاء نمط CSS من الصفحة
تمامًا مثل جافا سكريبت JavaScript ، نظرًا لوجود مخاوف تتعلق بإمكانية الوصول ، من الأفضل تصميم مواقع الويب بهذه الطريقة يجب أن تظل الصفحات قابلة للقراءة حتى بدون أي أنماط. لمعرفة كيف تبدو الصفحة دون أي نمط ، يمكنك تعطيلها في أدوات المطور.
لإزالة أي نمط CSS (مضمّن ، داخلي أو خارجي) مطبق على صفحة ويب ، فقط انقر فوق رمز العين الخاص بأوراق الأنماط المدرجة في علامة التبويب "محرر النمط". انقر فوقه مرة أخرى للعودة إلى العرض الأصلي.
للوصول إلى "محرر النمط" من خلال القائمة ، انتقل إلى ☰> مطور > محرر النمط (اختصار: Shift + F7.
8. قم بمعاينة استجابة محتوى HTML لطلب
أدوات مطور فايرفوكس لديها خيار ل معاينة الاستجابات نوع محتوى HTML. يساعد هذا المطور على معاينة أي 302 إعادة توجيه والتحقق مما إذا كانت قد تم تقديم أي معلومات حساسة أم لا في الاستجابة.
للوصول إلى "معاينة" من خلال القائمة ، انتقل إلى ☰> مطور > شبكة الاتصال (اختصار: Ctrl + Shift + Q. ثم افتح صفحة الويب التي تختارها أو أعد تحميل الصفحة الحالية ، انقر فوق الطلب المطلوب (مع استجابة HTML) من قائمة الطلبات وانقر فوق "معاينة"التبويب في القسم الأيمن.
9. معاينة صفحة الويب بأحجام مختلفة للشاشة
لاختبار صفحة ويب لاستجابتها ، استخدم "عرض التصميم المتجاوب" ، والذي يمكن الوصول إليه عن طريق ☰> مطور > عرض تصميم استجابة أو مع الاختصار: Ctrl + Shift + M.
لإظهار زر أداة "وضع التصميم المتجاوب" ، انقر فوق "خيارات مربع الأدوات" وضمن قسم "أزرار مربع الأدوات المتاحة" ، حدد مربع الاختيار "وضع التصميم المتجاوب".
10. قم بتشغيل JavaScript على الصفحات
لتنفيذ عمليات تنفيذ جافا سكريبت السريعة على أي صفحة ويب ، ما عليك سوى استخدام أداة "Scratchpad" في Firefox. للوصول إلى "Scratchpad" من خلال القائمة ، انتقل إلى ؛ ☰> مطور > تطبيق المسودة أو استخدم اختصار لوحة المفاتيح Shift + F4.
لجعل زر أداة "Scratchpad" يظهر في نافذة أدوات المطور للاستخدام السريع: انقر فوق "خيارات الأدوات"وتحت"أزرار الأدوات المتاحة"قسم التحقق من" Scratchpad " مربع.
