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

الحذر ، تحت خفض الكثير من متحركة الثقيلة!

مفتش

بحث محدد CSS

انها مريحة جدا للاستخدام ل:

• العناصر ذات "z-index" التي لا يمكن النقر فوقها
• بصريا نفس العناصر التي تعرف محددها

مرشح النمط

يمكنك تصفية قواعد CSS بواسطة أي محدد أو خاصية.

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

منتقي الألوان والشافطة

انقر فوق أي نقطة ذات لون في المفتش لفتح أداة ملائمة.

تغيير تمثيلات اللون

يتيح لك Shift + النقر فوق نقطة لون تغيير تمثيل اللون (name / hex / hsl / rgb).

Shift + النقر على نقطة بالقرب من الزاوية تسمح لك بتغيير وحدات الزاوية.

تحرير منحنيات بيزير لوظائف الوقت

انقر فوق نقطة ذات خط منحني بجوار خاصية دالة الوقت لفتح محرر مناسب. ستكون هناك وظائف محددة مسبقًا والقدرة على تكوين نسختك يدويًا.

وحدة التحكم

تطبيق CSS

console.log(“#%c%s%c%s”, “color: #bada55”, “dev”, “color: #c55”, “tricks”) 

لا يتم دعم جميع الخصائص ، ولكن الكثير .

بحث التاريخ

اضغط CTRL + R على Mac (و F9 على Windows و Linux). ثم استخدم CTRL + R / CTRL + S ( F9 / SHIFT + F9 ) للتمرير للأمام / للخلف. على عكس الأسهم ، ستعمل اختصارات لوحة المفاتيح أعلاه بين الجلسات.

لقطة شاشة لصفحة أو عنصرها

 :screenshot — fullpage :screenshot — selector .css-selector 

يعد تحديد المحدد أكثر سهولة من محاولة تحديد المنطقة المرغوبة بدقة باستخدام الماوس.

تبديل سياق جافا سكريبت

 cd(iframe) 

يمكنك التبديل إلى سياق iframe بواسطة المحدد باستخدام cd () .

العلامات الموقت

 console.time(“#devtricks”) console.timeEnd(“#devtricks”) 

بدء الموقت - console.time ("التسمية") ،

وقفه - console.timeEnd ("التسمية") .

جافا سكريبت المصحح

نقاط التوقف الشرطية

لإنشاء نقطة ، انقر بزر الماوس الأيمن على رقم السطر. لن تكون النقطة نشطة إلا إذا تم استيفاء الشرط.

البحث حسب اسم الوظيفة أو رقم السطر

البحث عن اسم الملف هو CMD + P على Mac (و CTRL + P على Windows و Linux).

اكتب " @" في نفس الإدخال للبحث حسب إعلان الوظيفة في الملف.

اكتب ": " في نفس الإدخال للوصول بسرعة إلى السطر برقمه.

جميلة إخراج رمز minified

انقر على أيقونة {} لرؤية رمز جميل بدلاً من رمز مصغر.

نقاط توقف عنوان URL

ستصبح النقطة نشطة عند محاولة الوصول إلى عنوان url وإظهار الكود المسؤول عن الوصول إليه.

تعطيل نقاط التوقف

ستبقى النقاط المعطلة متاحة للتضمين والاستخدام في المستقبل.

شبكة

تحرير وإعادة توجيه طلبات HTTP

تحرير الطلبات المقدمة وإعادة إرسالها.

مرشح الاستعلام

عامل تصفية المجال هو CMD + F على Mac (أو CTRL + F على Windows و Linux).

إذا كنت بحاجة إلى العثور على جميع الاستعلامات بدون مجال ، فأضف شرطة ( - ) أمام الفلتر.

الحد الأقصى للسرعة

تحقق من كيفية تحميل الموقع عندما يكون الإنترنت بطيئًا.

الساخنة / الباردة التنميط

انقر على أيقونة المؤقت لمعرفة أداء الاستعلام الذي يقدمه الموقع. سيتم تحميل الصفحة مرتين - بدون ذاكرة تخزين مؤقت (محاكاة الحمل الأول) ومع ذاكرة تخزين مؤقت (محاكاة مكالمة متكررة).

حفظ / تحميل HAR

نحن نحفظ الطلبات المثالية في تنسيق الأرشيف . مريحة للمشاركة مع زملائه المطورين.

تصميم استجابة

جهاز مخصص

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

الحد الأقصى للسرعة

نحن نشاهد تنزيل نسخة الجوال على سرعة الإنترنت عبر الهاتف المحمول.

مضاهاة tachi

أيقونة صغيرة مع "اليد" هي المسؤولة عن هذا. مضاهاة ، بما في ذلك tapas طويلة.

تغيير وكيل المستخدم

لا تنس تمكين الخيار "إعادة تحميل الصفحة عند تغيير UA" في الإعدادات - توفير الوقت.

اليسار محاذاة إطار العرض

مريحة إذا كنت ترغب في وضع لوحات على اليمين (على سبيل المثال ، لتصحيح).

مفتش مستودع

تحرير ملفات تعريف الارتباط

انقر نقرًا مزدوجًا فوق الخلية التي تريد تغيير قيمتها.

إزالة ملفات تعريف الارتباط

أسهل طريقة لحذف ملفات تعريف الارتباط هي عن طريق تحديدها والنقر فوق Backsapce.

إيلاء الاهتمام لخيارات قائمة السياق. يعد خيار "حذف كل شيء لأحد النطاقات" مناسبًا للغاية ، ولكن ضع في اعتبارك أن المجال يجب أن يكون دقيقًا (مثل حذف ملفات تعريف الارتباط لـ .medium.com لن يحذفها على medium.com )

في الوقت الحقيقي تغيير ملفات تعريف الارتباط

ملفات تعريف الارتباط التي تم تغييرها توخت باللون البرتقالي.

لقطات ثابتة لـ IndexedDB

لن تتمكن من رؤية التغييرات في سجلات IndexedDB في الوقت الفعلي ، لذلك استخدم زر التحديث للحصول على أحدث نسخة من قاعدة البيانات.

تغيير أعمدة الجدول المعروضة

سيساعد النقر بزر الماوس الأيمن فوق عنوان الجدول في إخفاء أعمدة غير مفيدة.

هذا كل شيء. آمل أن تكون النصائح مفيدة!