كيفية استخدام أدوات مطور ويب فايرفوكس
تحتوي قائمة مطوري برامج Firefox على أدوات لفحص الصفحات وتنفيذ تعليمات JavaScript البرمجية العشوائية وعرض طلبات HTTP والرسائل الأخرى. أضاف فايرفوكس 10 أداة مفتش جديدة بالكامل و Scratchpad محدثة.
تعمل ميزات مطوري الويب الجديدة في فايرفوكس ، بالإضافة إلى الإضافات الهائلة لمطوري الويب مثل Firebug و Web Developer Toolbar ، على جعل Firefox متصفحًا مثاليًا لمطوري الويب. تتوفر جميع الأدوات تحت مطور الويب في قائمة Firefox.
مفتش الصفحة
افحص عنصرًا محددًا بالنقر بزر الماوس الأيمن عليه وتحديده فحص (أو الضغط Q). يمكنك أيضا إطلاق مفتش من قائمة مطور الويب.
سترى شريط الأدوات في أسفل الشاشة ، والذي يمكنك استخدامه للتحكم في المفتش. سيتم تمييز العنصر الذي اخترته وسيتم تعطيل عناصر أخرى على الصفحة.
إذا كنت ترغب في اختيار عنصر جديد ، فانقر فوق فحص في شريط الأدوات ، مرّر مؤشر الماوس فوق الصفحة وانقر على العنصر. فايرفوكس يسلط الضوء على العنصر تحت المؤشر الخاص بك.
يمكنك التنقل بين العناصر الرئيسية والعناصر الفرعية بالنقر فوق مسارات التنقل على شريط الأدوات.
مفتش HTML
انقر على HTML زر لعرض شفرة HTML الخاصة بالعنصر المحدد حاليًا.
يسمح لك HTML inspector بتوسيع علامات HTML وتصغيرها ، مما يجعل من السهل التصور بنظرة سريعة. إذا كنت ترغب في رؤية HTML الخاص بالصفحة في ملف ثابت ، فيمكنك تحديده اظهر مصدر الصفحة من قائمة مطور الويب.
CSS المفتش
انقر على قلم المدقة زر لمشاهدة قواعد CSS المطبقة على العنصر المحدد.
هناك أيضًا لوحة خصائص CSS - قم بالتبديل بين الاثنين بالنقر فوق قواعد و الخصائص وصفت. لمساعدتك في العثور على خصائص محددة ، تشتمل لوحة الخصائص على مربع بحث.
يمكنك تحرير CSS العنصر على الطاير من لوحة القواعد. ألغِ تحديد أي من مربعات الاختيار لإلغاء تنشيط قاعدة ، أو انقر على النص لتغيير قاعدة ، أو أضف القواعد الخاصة بك إلى العنصر في الجزء العلوي من النافذة. هنا ، لقد قمت بإضافة font-weight: bold؛ قاعدة CSS ، مما يجعل نص العنصر غامقًا.
JavaScript Scratchpad
كما شهد Scratchpad أيضًا تحديثًا مع Firefox 10 ، ويحتوي الآن على تمييز بناء الجملة. يمكنك كتابة التعليمات البرمجية لجافا سكريبت لتعمل على الصفحة الحالية.
بمجرد لديك ، انقر فوق نفذ - اعدم القائمة واختيار يركض. تعمل التعليمة البرمجية في علامة التبويب الحالية.
وحدة تحكم الويب
تحل وحدة تحكم الويب محل وحدة تحكم الأخطاء القديمة ، والتي تم إيقافها وستتم إزالتها في إصدار مستقبلي من Firefox.
تعرض وحدة التحكم أربعة أنواع مختلفة من الرسائل ، والتي يمكنك تبديل رؤية - طلبات الشبكة ، رسائل خطأ CSS ، رسائل خطأ JavaScript ورسائل مطوري الويب.
ما هي رسالة مطور الويب؟ إنها رسالة مطبوعة على كائن window.console. على سبيل المثال ، يمكننا تشغيل window.console.log ("مرحبا بالعالم") ؛ شفرة JavaScript في Scratchpad لطباعة رسالة مطور إلى وحدة التحكم. يمكن لمطوري الويب دمج هذه الرسائل في شفرة جافا سكريبت للمساعدة في تصحيح الأخطاء.
قم بتحديث الصفحة وسترى طلبات الشبكة التي تم إنشاؤها والرسائل الأخرى.
استخدم مربع البحث لتصفية الرسائل ؛ انقر فوق طلب إذا كنت ترغب في رؤية المزيد من التفاصيل.
اعتبارًا من Firefox 10 ، يمكن لـ Web Console العمل جنبًا إلى جنب مع Page Inspector. يمثل المتغير $ 0 الكائن المحدد حاليًا في المفتش. لذلك ، على سبيل المثال ، إذا أردت إخفاء الكائن المحدد حاليًا ، فيمكنك تشغيله $ 0.style.display = "لا شيء" في وحدة التحكم.
إذا كنت مهتمًا بمعرفة المزيد حول استخدام وحدة التحكم والوظائف المضمنة بها ، فراجع صفحة ويب Console على موقع ويب Developer الخاص بـ Mozilla.
احصل على المزيد من الأدوات
ال احصل على المزيد من الأدوات يأخذك الخيار إلى مجموعة أدوات مربع Web Developer's Toolbox الإضافية على موقع Mozilla Add-Ons على الويب. يحتوي على بعض أفضل الإضافات لمطوري الويب ، بما في ذلك Firebug وشريط أدوات مطوري الويب.
إذا كنت تستخدم Firefox لبضع سنوات ، فقد تتذكر DOM Inspector. لقد حان أدوات المطور المتكاملة في فايرفوكس شوطا طويلا منذ ذلك الحين.
