نظرة على أدوات فايرفوكس الأساسية لمطوري الويب

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

بادئ ذي بدء ، نحن بحاجة إلى تثبيت Firebug.

الحرائق

Firebug هي وظيفة إضافية يجب تثبيتها لتطوير الويب. على افتراض أنك لا تعرف مكان الحصول على Firebug ، يمكنك تثبيته هنا. ربما ، تحتاج إلى إعادة تشغيل Firefox قبل تنشيطه.

بعد ذلك ، يمكنك عرض Firebug من خلال إحدى الطرق التالية: اتبع هذه القائمة أدوات> مطورو الويب> Firebug, انقر بزر الماوس الأيمن على صفحة الويب واختر “فحص العنصر مع Firebug”.

بدلاً من ذلك ، يمكنك العثور على رمز Firebug في Firefox والنقر فوقه ، وسيُظهر لك نافذة firebug ؛

Firebug مطابق تماما ل أدوات مطوري Chrome. لديه لوحة لرؤية بنية HTML والأنماط ، وكذلك لوحة Console لرؤية الأخطاء والتحذيرات والسجلات. لكن لدي بعض النصائح الإضافية التي نأمل أن تجدها مفيدة.

ضبط مربع التحجيم

يتكون عنصر HTML من نموذج مربع CSS الذي يتكون من الهامش والحشو والبعد الكائن (العرض / الارتفاع). هناك أوقات قد نحتاج فيها إلى تعديل هذه الخصائص. في هذه الحالة ، يمكنك تحديد أحد العناصر التي تريد تغييرها ، ثم انتقل إلى نسق فريق.

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

الأساليب المحسوبة

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

فحص عائلة الخطوط (الطريق السهل)

غالبًا ما تجد شيئًا كهذا في خط العائلة الملكية في CSS مع عائلات الخط المختلفة. لسوء الحظ ، لن يخبرنا هذا بالتحديد عن الخط الذي يتخذه المتصفح. لتسهيل عملية تحديد الهوية ، يمكننا تثبيت ملحق Firebug هذا FireFontFamily.

بعد الانتهاء من التثبيت ، قم بتحميل صفحة الويب الخاصة بك ، والآن يمكننا أن نرى بوضوح عائلة الخط المطبقة. في حالتنا هو في الواقع هلفتيكا نوي (انظر النار).

تحليل الأداء

قد يكون هذا موقفًا سهلاً ، لكن سرعة الموقع هي الآن إحدى معلمات Google (الخوارزمية) في تحديد جودة موقع الويب ؛ يعتبر موقع الويب الذي يتم تحميله بشكل أسرع مطورًا جيدًا ويحتل أعلى مرتبة من حيث المحتوى. لذا السرعة ليست شيئًا يجب تجاهله.

لوحة صافي

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

يمكنك بعد ذلك فرز طلب HTTP حسب نوعه مثل HTML و CSS والصور.

Yslow!

وعلاوة على ذلك ، يمكنك أيضا تثبيت YSlow, امتداد ل Firebug من Yahoo !. بعد تنشيطه ، ستجد لوحة إضافية تسمى Yslow صراحة!.

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

سرعة الصفحة

بدلاً من ذلك ، يمكنك أيضًا تثبيت سرعة الصفحة من Google. مشابه ل Yslow!, يختبر أداء سرعة الموقع ، وإن كانت نتيجة الاختبار مختلفة قليلاً. هذا المثال يوضح أن نفس صفحة الويب سجل 82 وفقا لسرعة الصفحة.

أدوات مطور الويب

من الواضح أن أدوات مطوري الويب مخصصة لمطوري الويب ولديها مجموعة من الميزات المعبأة في شريط الأدوات هذا. ولكن هذا واحد أدناه هو واحد من المفضلة.

فحص الصور

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

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

ويوضح هذا المثال كيف نظهر بعد الصورة وحجم ملف الصورة في وقت واحد:

فايرفوكس المدمج في أدوات

في الإصدارات الأخيرة ، عزز Firefox بشكل كبير ميزاته المضمنة لمطوري الويب ، بعضها:

فحص العنصر الأصلي

هذه الأم تدقيق العنصر من Firefox قد يشبه “فحص العنصر في Firebug”, لكنه في الواقع يعمل بطرق مختلفة.

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

عن طريق عرض ثلاثي الأبعاد يمكنك عرض بنية صفحة الويب بعمق. لتنشيط هذا العرض ، يمكنك العثور على الزر في أسفل يمين “فايرفوكس الأصلي فحص العنصر”. هذه هي الطريقة عرض ثلاثي الأبعاد يشبه.

لا أستخدمها كثيرًا مثل الميزات الأخرى ، لكنها ميزة مبتكرة من Mozilla I ، وهي مفيدة للغاية بالتأكيد في بعض المواقف.

عرض تصميم الويب

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

هذا العرض متاح من هذه القائمة: أدوات> مطور ويب> عرض تصميم الويب. و هكذا يبدو المنظر.

محرر النمط

أخيرًا ، إذا كنت تعمل مع CSS بشكل متكرر ، فمن المحتمل أن تقع في حب هذه الميزة. منذ إصدار 11 ، أضافت Firefox محرر النمط في أدوات المطور الأصلي.

هذه الميزة هي باردة مثل عرض تصميم الويب, يسمح لك بتحرير CSS ورؤية التأثير فورًا على المستعرض وحفظ التغييرات التي تؤثر مباشرة على ملف مصدر CSS.

يتوفر محرر الأنماط من القائمة التالية: أدوات> مطور ويب> محرر الأنماط.

الفكر النهائي

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

ما هي الميزات التي تستخدمها بشكل متكرر؟ يمكنك مشاركة أفكارك في مربع التعليقات أدناه.