كيفية تصحيح تطبيقات الويب باستخدام أدوات مطوري Firefox

ويجب أن الدراية لتطوير الشبكة المتقدمة

الصورة تشارلز  على Unsplash

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

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

أخيرًا ، في النهاية - سأخبرك بكيفية تثبيت إصدار مطور Firefox القوي.

فتح أدوات المطور

معظمنا يعرف كيفية فتح أدوات المطور إما عن طريق الخطأ أو عن طريق التجربة.

فيما يلي بعض الطرق لفتح مربع أدوات المطور:

  • اضغط المفتاح F12
  • انتقل إلى قائمة الهامبرغر الموجودة في أقصى يسار شريط عنوان URL وانقر فوقه. في الجزء السفلي ، ابحث عن الخيار أعلاه "Help" الذي يشير إلى "Web Developer". افتح أي تسعة خيارات.

لمحة موجزة عن واجهة المستخدم

في الجزء العلوي من صندوق الأدوات ، ستجد أن هناك العديد من "الأدوات" التي لها استخدامات مختلفة للغاية.

شريط الأدوات
  1. سيساعدك خيار المؤشر في العثور على عنصر DOM في صفحة الويب الخاصة بك عن طريق التمرير البسيط عليه في واجهة المستخدم.
  2. مفتش الصفحة: يسمح لك عارض الصفحة بعرض تعليمات HTML البرمجية لصفحة الويب الخاصة بك في وقت التشغيل. كما يسمح لك بمشاهدة خصائص CSS وتكوين الخطوط والرسوم المتحركة.
  3. وحدة التحكم في الويب: تعد وحدة التحكم في الويب الأداة الأكثر شهرة بين مطوري الواجهة الأمامية. هذا هو المكان console.log الخاص بك ("...") ؛ الحصول على طباعة البيانات.
  4. مصحح أخطاء جافا سكريبت: يمكنك استخدام أداة مصحح الأخطاء لعرض الأخطاء التي تحدث في تعليمات Javascript الخاصة بك. يمكنه أيضًا عكس هندسة وحدات Webpack الخاصة بك والسماح لك بتحديد الأخطاء في ملفات مصدر محددة من التعليمات البرمجية المترجمة.
  5. محرر الأنماط: يمكنك عرض وتحرير أوراق الأنماط الفردية المستخدمة في صفحة الويب الخاصة بك ، بما في ذلك CSS المضمن في علامات الأنماط. بالإضافة إلى ذلك ، يمكنك كتابة كود إضافة CSS أو استيراد ورقة أنماط أخرى من جهاز الكمبيوتر الخاص بك.
  6. أدوات الأداء: يسمح لك هذا بعرض المدة التي تستغرقها أحداث معينة وعدد FPS التي يمكن لصفحة الويب الخاصة بك القيام بها. (FPS ، أو الإطارات في الثانية ، هو عدد المرات التي يكون المستعرض فيها قادرًا على تحديث الشاشة. على النحو الأمثل ، يجب أن يكون 60 إطارًا في الثانية وفقًا لنظام التشغيل وجهاز العرض.) يجب أن تبدأ في مراقبة أدائك الذي يتم تحميلها في المخزن المؤقت في الذاكرة. يمكنك فقط عرض النتائج بعد إيقاف المراقبة ؛ خلاف ذلك ، سوف يتدهور الأداء بسبب تحميل عرض بيانات الأداء في الوقت الحقيقي نفسه.
  7. الذاكرة: تتيح لك أداة الذاكرة إنشاء لقطة لكومة Javascript. يمكنه أيضًا تحديد موقع تخصيص الأشياء الخاصة بك في التعليمات البرمجية المصدر.
  8. مراقب الشبكة: تتيح لك هذه الأداة عرض جميع طلبات الشبكة.
  9. التخزين: يمكنك عرض وتحرير ذاكرة التخزين المؤقت وملفات تعريف الارتباط وقاعدة البيانات المفهرسة والتخزين المحلي وتخزين الجلسة.
  10. أدوات إمكانية الوصول: يمكنك عرض كيفية تفسير ميزات إمكانية الوصول لصفحة الويب الخاصة بك. هذا أمر بالغ الأهمية إذا كنت تريد أن يحصل موقع الويب الخاص بك على أكبر عدد ممكن من الجمهور.
  11. وضع التصميم المتجاوب: يمكنك اختبار كيفية عمل موقع الويب الخاص بك على الأجهزة المحمولة والأجهزة اللوحية. إنه يعمل بشكل أفضل بكثير من تقليص حجم نافذة المتصفح على الكمبيوتر المحمول. بالإضافة إلى ذلك ، يمكنك اختبار استجابة موقع الويب لتدوير الجهاز ، واختناق الشبكة ، ونسب بكسل الجهاز ، ومحاكاة حدث اللمس.

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

الميزات الهامة التي يجب عليك الاستفادة منها

اختبار الخطوط الجديدة

في عارض الصفحات ، ابحث عن اللوحة الثالثة (قد تكون مخفية ، انقر فوق السهم الموجود أعلى الزاوية اليسرى للوحة الثانية). لديها علامة تبويب تسمى "الخطوط".

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

تحرير الخط

بالإضافة إلى تحرير الخطوط ، يمكنك تحرير الرسوم المتحركة. لا يزال يتعين علي اختبار هذه الميزة!

القطارة

هذه واحدة من تلك الميزات التي يتجاهلها الجميع لأنها صغيرة جدًا. إذا نظرت بعناية ، بجانب مربع النص "Search HTML" في محرر HTML ، فهناك رمز قطارة على اليمين.

يمكن استخدام قطارة العين لتحديد لون من صفحة الويب. لم أتمكن من لقطة الشاشة لأنه يأخذ التركيز تلقائيًا. سأشرحها بالكلمات - لا مشكلة!

يتبع القطارة المؤشر الخاص بك. سيتم توسيعه ليصبح 7 × 7 متر مربع من البكسل ويعرضها موسعة بشكل فردي حتى تتمكن من فحص كل لون. وسوف اقول لكم عرافة اللون من مركز بكسل.

ستجده مفيدًا في العديد من الحالات:

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

لقطة شاشة

أداة لقطة شاشة Firefox مفيدة للغاية ، ليس فقط للمطورين ، ولكن للجميع. إنه أمر لم يطبقه Google Chrome بعد! انقر بزر الماوس الأيمن على صفحة ويب وحدد خيار "التقاط لقطة".

يمكنك تحديد جزء من صفحة ويب عن طريق سحب أو حتى النقر فوق عنصر HTML للحفظ.

توصيل Firefox بجهاز Android الخاص بك

المتطلبات الأساسية

يجب أن يكون لديك Firefox لنظام Android و الماسح الضوئي للباركود بواسطة ZXKing لتبدأ. بالإضافة إلى ذلك ، يجب أن يكون لديك شبكة WiFi يتم خلالها تصحيح الأخطاء عن بُعد.

انتقل إلى الخيارات> الإعدادات> المتقدمة في Firefox (المحمول) وتمكين تصحيح الأخطاء عن بُعد عبر WiFi.

تمكين تصحيح الأخطاء

  1. افتح WebIDE على سطح المكتب (WebDeveloper> WebIDE على الكمبيوتر المحمول) وانقر فوق تحديث الأجهزة.
  2. امسح رمز الاستجابة السريعة الظاهر باستخدام تطبيق ماسح الباركود في هاتفك المحمول.
  3. يجب إدراج جهازك المحمول في WebIDE الآن. اختره

يمكنك الآن الاتصال بأي علامات تبويب مفتوحة في Firefox لنظام Android وإرفاق أدوات المطور بها. يمكنك الآن الاستفادة من قوة جهاز الكمبيوتر الخاص بك لتصحيح تطبيق الويب الخاص بك على الهواتف المحمولة.

مستندات MDN هنا:

  • فايرفوكس تصحيح الأخطاء مع الروبوت
  • تصحيح أخطاء Firefox مع iOS و Chrome لنظام Android
  • تصحيح أخطاء USB باستخدام Firefox

إصدار مطور فايرفوكس

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

يتم تسليمها من يبني ليلا. تحصل على ميزات استقرت خلال الأسابيع الستة الماضية.

التثبيت على لينكس

يمكنك تثبيت إصدار مطوري Firefox عبر مشروع UMake. لذلك يجب عليك إضافة PPA لـ UMake يدويًا:

sudo add-apt-repository ppa: ubuntu-desktop / ubuntu-make
sudo الحصول على التحديث
sudo - الحصول على تثبيت أوبونتو جعل
umake web firefox-dev -r # بتثبيت الإصدار dev من فايرفوكس

لإضافة التطبيق على سطح مكتب جنوم ، تحتاج إلى إدخال إدخال سطح مكتب على النحو التالي:

#! / usr / bin / env xdg-open
[إدخال سطح المكتب]
الإصدار = 1.0
نوع = التطبيق
محطة = كاذبة
الاسم [en_IN] = إصدار مطور Firefox
اكسيك = / الوطن / shukant / .local / حصة / umake / الإنترنت / فايرفوكس ديف / فايرفوكس
الاسم = إصدار مطور Firefox
رمز = / الوطن / shukant / .local / حصة / umake / الإنترنت / فايرفوكس ديف / المتصفح / الكروم / الرموز / الافتراضي / default128.png

تأكد من تغيير مسارات الملفات إلى تلك الموجودة على نظامك. على وجه التحديد ، قم بتغيير الجزء "/ home / shukant /" إلى "/ home / اسم المستخدم الخاص بك".

ويندوز وماك

يمكنك استخدام مثبت Firefox مباشرة: https://www.mozilla.org/en-US/firefox/developer/.

ملاحظة: يمكن لمستخدمي Linux استخدام الرابط أيضًا - على الرغم من أنه سيكون من الأكثر تعقيدًا تثبيت حزمة .deb مباشرة باستخدام مدير الحزم.

قراءة متعمقة:

  • نظرة عامة كاملة على قماش HTML
  • كيف يتم تخزين القيم غير الصحيحة في تعويم (ولماذا تطفو)
  • إزالة التبعيات الدائرية في JavaScript
  • كيفية مزامنة التطبيق الخاص بك عبر أجهزة متعددة (Android)
  • كيفية استخدام Firebase لبناء ألعاب Android متعددة اللاعبين

تأكد من إخباري كيف تحب إصدار Firefox Developer Edition على Twitter. بالإضافة إلى ذلك ، اشرح ما إذا كان يمكنك التبديل من Chrome إلى Firefox لتصحيح أخطاء تطبيقات الويب الخاصة بك !!!