 |
| أفضل متصفح سريع للهواتف والكمبيوتر |
أفضل إضافات Firefox لمطوري الويب
تابع الصور ✅
مقدمة
على الرغم من أن فايرفوكس يقدم أدوات مناسبة للمطورين افتراضيًا مع ميزات مبتكرة مثل inspector CSS Grid الخاص به ، فإنه لا يزال من الممكن إضافة ميزات أكثر إثارة للمتصفح من خلال النظام الإيكولوجي للاضافات.
1 - اضافة Compat Report
يساعدك Compat Report على تحديد مشكلات توافق مستعرض الويب المحتملة عند تطوير مواقع الويب أو تطبيقات الويب. هذا يعمل فقط لـ CSS في الوقت الحالي.
بمجرد تثبيت الإضافة ، ستتم إضافة لوحة “توافق” جديدة إلى أدوات المطور. من هناك ، ستتمكن من رؤية كيفية أداء أي موقع محدد في كل من المتصفحات الرئيسية
يتم تلوين إصدارات المستعرضات التي لا توجد بها مشكلات توافقية باللون الأخضر ، مع إصدارات قليلة باللون الأصفر ، وتلك التي تحتوي على عدة إصدارات باللون الأحمر. يمكنك البحث في إصدارات معينة من المتصفح لمعرفة قواعد CSS الدقيقة التي تسبب المشكلات.
2 - اضافة JSON Lite
إذا كنت تعمل مع واجهات برمجة تطبيقات JSON بشكل متكرر ، فقد تجدها مملة لعرض بيانات JSON في المتصفح. وذلك لأن المتصفح لا يقوم بتنسيقه بشكل صحيح بشكل افتراضي مما يجعل من الصعب قراءته.
يعمل JSON Lite على إصلاح هذه المشكلة عن طريق تنسيق استجابات JSON و JSONP مع تمييز ملائم للبنية وميزة عرض الأخطاء التي تكون مفيدة عند فحص بيانات JSON الضخمة.
3 - React Devtools
React هي واحدة من المكتبات الأكثر شعبية اليوم في النظام البيئي لتطوير الويب. إذا قمت بتطوير تطبيقات الويب باستخدام React ، فسوف ترى الكثير من القيمة في استخدام إضافة المستعرض الخاص به لتصحيح التعليمة البرمجية الخاصة بك.
بعد تثبيته ، ستتمكن من فحص كود React على أي موقع ويب يستخدمه. سيظهر رمز الإضافة في شريط أدوات المتصفح ، وستحصل أيضًا على علامة تبويب “التفاعل” جنبًا إلى جنب مع لوحات DevTools الأخرى. ستسمح لوحة React بفحص شجرة React ، بما في ذلك التسلسل الهرمي للمكونات ، والدعامات ، والحالة ، والمزيد.
4 - اضافة Fontanello
يوفر Fontanello طريقة سريعة حقا لتحديد الخطوط على أي موقع. مع هذه الإضافة ، لم تعد بحاجة إلى فتح devtools فقط لمعرفة الخط الذي يستخدمه موقع الويب. يعرض Fontanello أنماط الطباعة الأساسية للنص في قائمة السياقات بزر الماوس الأيمن في Firefox.
5 - اضافة Wappalyzer
هل تساءلت يومًا عن التقنيات المستخدمة لإنشاء مواقع الويب المفضلة لديك؟ يمكن أن يوفر لك Wappalyzer هذه المعلومات بنقرة واحدة. ويمكنه اكتشاف أنظمة إدارة المحتوى المختلفة ، ومنصات التجارة الإلكترونية ، وخوادم الويب ، وأطر عمل جافا سكريبت ، وبرامج قواعد البيانات ، وأدوات التحليلات وغيرها الكثير.
7 - اضافة ColorZilla
ColorZilla ، أحد إضافات مطوري متصفح Firefox الأكثر شيوعًا مع أكثر من 5 ملايين تنزيل متوفر أخيرًا لمتصفح كروم Chrome
مع ColorZilla ، يمكنك الحصول على قراءة ملونة من أي نقطة في متصفحك ، وسرعة ضبط هذا اللون ولصقه في برنامج آخر. ويمكن أن تفعل أكثر من ذلك بكثير ...
8 - اضافة Page Ruler
يتيح لك سحب مسطرة لأي صفحة ويعرض عرضها وارتفاعها وموضعها في أي صفحة ويب.
9 - إضافة Web Developer
تضيف إضافة Web Developer شريط أدوات إلى متصفح جوجل كروم يضم العديد من خيارات وظائف تطوير الويب المفيدة، مثل: تنشيط البرامج النصية أو إلغاء تنشيطها، ووظائف التحكم في ملفات تعريف الارتباط، أو البحث عن طرق لإنشاء النماذج والصور والأنماط وغيرها.
10 - اضافة Mobile View Tester
وهي تسمح لمصممي ومطوري الويب باختبار صفحات الويب على الهواتف والأجهزة اللوحية لاختبار تجاوب الشاشة واختبار أجهزة محمولة في نفس الوقت
مفيدة جدا خاصة اذا كان موقعك قيد التطوير والانشاء لرؤية مدي تجاوبه على شاشات الموبايل والتابلت واللاب توب وغيرهم من الأجهزة اللوحية والمكتبية.
11 - اضافة What Font
يتيح لك معرفة الخط المستخدم في أي موقع ويب
وكذلك معرفة اسم الخط وعائلته ولونه ونمطه وحجمه.
12 - اضافة StyleBot
StyleBot هو امتداد CSS لمطوري الويب.وهذه الاضافة سوف تساعدك في تخصيص مظهر لأي موقع من خلال اختيار العناصر وتغيير نمطها عن طريق المحرر.
هناك أيضا علامة تبويب CSS متقدمة مفيدة لكتابة القواعد الخاصة بك بشكل مباشر خاصة بالنسبة للأشخاص المبتدئين في تعلم CSS.
– CSS هي لغة تصميم تهتم بالخطوط و الالوان و صورة الموقع و اشياء اخرى كثيرة كما انها تضاف لل HTML من اجل تنسيق عرض المحتوى و هي اختصار لكلمة Cascading Style Sheets-
13 - اضافة BuiltWith Technology Profiler
تستخدم ملفات التعريق BuiltWith للتحقق من نوع التكنولوجا التي بني بها موقع على شبكة الانترنت.
بمجرد النقر على الأيقونة في شريط كروم، سوف تنبثق نافذة ستمكنك من رؤية كل التقنيات المختلفة التي يستخدمها الموقع على شبكة الانترنت مثل خادم الويب، شبكة توصيل المحتوى، نظام إدارة المحتوى، مكتبات جافا سكريبت و وظائفها و غيرها الكثير.
14 - إضافة Windows Resizer
تتيح لك إضافة Windows Resizer تغيير حجم شاشتك، إنه أمر بسيط ولكنه مفيد للغاية إذا كنت بحاجة إلى التحقق من توافق الموقع مع جميع أنواع الشاشات، وتقدم لك الإضافة مجموعة محددة سابقًا من الخيارات، ولكن يمكنك تعديلها لتناسب احتياجاتك.
15 - Full Page Screen Capture
التقط لقطة شاشة لصفحتك الحالية بالكامل وبشكل موثوق - دون طلب أي أذونات إضافية
أبسط طريقة لالتقاط لقطة شاشة كاملة للصفحة من نافذة المتصفح الحالية.
#خنقتونا
#إضافات_متصفح_firefox_الجديدة