كل ما تحتاج لمعرفته حول أدوات مطوري Firefox

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

واجهة المستخدم

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

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

أدوات الإنشاء

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

المسودة

تتيح هذه الأداة لمطوري الويب الفرصة لتجربة كود JavaScript. في البيئة التي يوفرها Scratchpad ، يمكنك كتابة وتشغيل وفحص نتائج التعليمات البرمجية التي تتفاعل مع الصفحة الحالية.

لفتح Scratchpad ، ما عليك سوى الضغط على Shift F4 أو الانتقال إلى قائمة Web Developer والنقر على Scratchpad. سيؤدي هذا إلى فتح النافذة حيث يمكنك كتابة الرمز الخاص بك. بمجرد الانتهاء ، انقر فوق تنفيذ> تشغيل وسيتم تشغيل الكود في علامة التبويب الحالية.

محرر النمط

يُمكّن محرر النمط مطوري الويب من عرض وتحرير جميع أوراق الأنماط بالصفحة المرتبطة. ستتمكن أيضًا من إنشاء أوراق أنماط جديدة من البداية وتطبيقها على صفحة ، بالإضافة إلى استيراد أوراق أنماط موجودة وتطبيقها على الصفحة الحالية.

لفتح محرر النمط ، انتقل إلى قائمة Web Developer وانقر على Style Editor . سيظهر مربع أدوات مطور Firefox بعد ذلك في الجزء السفلي من المتصفح مع استعداد محرر الأنماط للاستخدام.

محرر شادر

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

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

محرر صوت الويب

تمكّن واجهة برمجة تطبيقات Web Audio Editor المطورين من إنشاء سياق صوتي. سيحتاج المطورون إلى إنشاء عقد صوتية توفر:

• مصادر الصوت
• العقد التي تقوم بالتحويلات
• ملاحظات تمثل الوجهة المختارة لدفق الصوت.

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

مثل محرر Shader ، يجب تمكين Web Audio Editor يدويًا وليس إعدادًا افتراضيًا. يعد التمكين أمرًا سهلاً: ما عليك سوى الرجوع إلى إعدادات أداة المطور ثم تحديد المربع بجوار "Web Audio". سترى بعد ذلك أن هناك علامة تبويب إضافية تظهر داخل شريط أدوات Firefox Toolbox. ما عليك سوى النقر فوق علامة التبويب هذه وسيتم تحميل صفحة يمكنك من خلالها إنشاء سياق صوتي.

أدوات التصحيح

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

مفتش الصفحة

تتيح أداة Page Inspector للمطورين فحص وإدخال تعديلات على ترميز HTML و CSS لصفحة الويب. باستخدام هذه الأداة ، يمكن للمطورين فحص الصفحات من خلال الإصدار المحمّل محليًا أو عبر هدف بعيد.

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

وحدة تحكم الويب

تسجل هذه الأداة جميع المعلومات المرتبطة بصفحة الويب ، مثل طلبات الشبكة وجافا سكريبت و CSS وأخطاء وتحذيرات الأمان وتحذيرات الأخطاء والرسائل الإعلامية. كما أنه يمكّنك من التفاعل مع صفحة ويب باستخدام JavaScript.

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

لفتح Web Console ، انتقل إلى القائمة الفرعية Web Developer في قائمة Firefox وانقر على "Web Console". يمكنك أيضًا استخدام الاختصار Ctrl Shift K. سيظهر مربع الأدوات في الجزء السفلي من المتصفح مع تنشيط "وحدة التحكم".

المصحح

تتيح أداة Firefox Debugger لمطوري الويب فرصة فحص وتعديل كود JavaScript الخاص بك. يمكن استخدامه أيضًا لتحديد الأخطاء. باستخدام Debugger ، يمكنك تصحيح أخطاء التعليمات البرمجية محليًا في Firefox ، أو عن بُعد على جهاز Firefox OS أو Firefox لنظام Android.

لفتح مصحح الأخطاء ، انتقل إلى القائمة الفرعية Web Developer في قائمة Firefox الرئيسية وانقر على "Debugger". بدلاً من ذلك ، يمكنك الضغط على Ctrl Shift S وسيظهر مربع الأدوات أسفل المستعرض الخاص بك مع تنشيط Debugger وجاهز للاستخدام.

مراقب الشبكة

تم تصميم Network Monitor لتظهر لك جميع طلبات الشبكة المختلفة التي قدمها Firefox ، والمدة التي يستغرقها كل طلب ، وتفاصيل كل طلب. اذهب إلى Web Developer Menu> Network لتنشيط الأداة. ستحتاج إلى تحديث الصفحة لمشاهدة الطلبات.

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

مفتش التخزين

إذا كنت تريد معرفة أنواع التخزين المختلفة التي يمكن لصفحة الويب استخدامها ، فستحتاج إلى تمكين أداة Storage Inspector. كما هو الحال حاليًا ، يمكن استخدام فاحص التخزين لفحص ملفات تعريف الارتباط والتخزين المحلي وتخزين الجلسة و IndexedDB.

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

لفتح فاحص التخزين ، انتقل إلى Web Developer Submenu وانقر على Storage Inspector. بدلاً من ذلك ، يمكنك الضغط على Shift + F9 لاستخدام اختصار لوحة المفاتيح.

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

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

افتح شريط أدوات المطور بالضغط على Shift + F2. بدلاً من ذلك ، يمكنك الانتقال إلى قائمة Web Developer والنقر فوق Developer Toolbar.

أدوات تصحيح الأخطاء الأخرى - العرض ثلاثي الأبعاد ، القطارة ، إطارات iFrames

تتضمن أدوات تصحيح الأخطاء الأخرى المضمنة في حزمة أدوات مطور Firefox ما يلي:

• عرض ثلاثي الأبعاد: يمنحك هذا عرضًا ثلاثي الأبعاد للكتل المتداخلة من HTML والمحتوى
• Eye Dropper: يتيح لك هذا تحديد لون معين من الصفحة ونسخه إلى الحافظة)
• تحديد إطارات iFrames: يتيح لك هذا توجيه أدوات المطور الخاصة بك إلى إطارات iFrame محددة داخل المستند.

أدوات الجوال

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

مدير التطبيق

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

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

ويبيد

تتيح أداة الهاتف المحمول هذه للمطورين إنشاء تطبيقات الويب الخاصة بهم وتعديلها وتنفيذها وتصحيحها من خلال Firefox OS Simulator أو عبر جهاز Firefox OS. يمكنك استخدامه للاتصال بـ Firefox Developer Tools مع متصفحات أخرى مثل Firefox لنظام Android و Chrome لنظام Android.

أدوات الجوال الأخرى

تشمل الأدوات المحمولة الأخرى ما يلي:

• التصحيح عن بعد لمتصفح Firefox لنظام Android
• Firefox OS Simulator: هذا يحاكي جهاز Firefox OS ولكنه يعمل على سطح المكتب
• عرض التصميم المتجاوب: يمكّنك هذا من عرض كيفية ظهور موقعك على الويب أو تطبيق الويب على أجهزة مختلفة بأحجام شاشة مختلفة.

أدوات الأداء

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

أداة الأداء

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

يمكن استخدام أداة الأداء لإنشاء ملفات التعريف وتحليلها وأخذ عينات منها.

ملف التعريف جافا سكريبت

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

أداة وميض الطلاء

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

ملف تعريف مطور منفصل

سيكون الاضطرار إلى التبديل بين إصدارات Firefox بمثابة ألم حقيقي. الخبر السار هو أن Firefox Developer Edition يستخدم ملف تعريف منفصل تمامًا للإصدارات الأخرى من Firefox التي قمت بتثبيتها.

ملاحظات إصدار المطور

يمكن للمطورين الذين يرغبون في قراءة الملاحظات المتعلقة بالإصدارات الحالية وأي إصدارات سابقة من Firefox Developer Edition القيام بذلك ببساطة عن طريق زيارة هذا الرابط.

تغليف

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

لمزيد من المعلومات حول أدوات مطوري Firefox ، انتقل إلى موقع Mozilla Developer على الويب وانضم إلى مجتمع المطورين. إصدار Firefox Developer Edition مجاني للتنزيل والاستخدام.