ما هى الفاير بق !!؟ ....كل شئ عنها .. بالصور

spotlayer.com

عضو جديد
10 يوليو 2011
8
0
0
بسم الله الرحمن الرحيم

ما هى الفاير بق ...?







  • هي إضافة لمتصفح فايرفوكس وأيضا يمكن تنزيلها على (إنترنت اكسبلور ، أوبرا ، سفارى ، جوجل كروم )



  • تجعل أدوات تطوير الويب في متناول يدك أثناء التصفح



  • وأيضا تعرض أكواد الهتمل وتسمح لك بالتعديل فيها وفى التنسيق والنمط وتسمح لك برؤية ما تم التعديل فية في نفس الوقت


مميزاتها :



1- تجدها بسهولة وقت ما تحتاجها

firebugSmall.png





  • ضغطة واحدة لتشغيل فاير بق

oneClickToStartFirebug.png




  • تعرض تلقائيا أكواد html وال css وال dom

instantHTMLCSSDOM.png




  • التشغيل أو التعطيل لأي من المزايا

enablingPanels.png




  • التصغير أو الغلق

minimizingClosing.png




  • أمكان فتح شاشتين للتعديل Ctrl + F12

severalScreens.png




  • F12 هو صديقك

usingF12.png




  • فاير بق يستخدم لمطوري الجافا سكربت

javascriptDevs.png




  • فاير بق لمهندسي المواقع “مراقبة الشبكة”

siteEngineers.png




2- فحص وتعديل أكواد الهتمل html


inspectAndEditHTML.png



  • رؤية الكود مباشرة

liveView.png




  • رؤية التغيرات بطريقة بارزة

highlightingOfChanges.png




  • رؤية النتائج في نفس الوقت

instantEditing.png




  • إمكانية حفظ الكود

copySource.png



3- التعديل في أل css لتخصيصها كما تحتاج


tweakCSSToPerfection.png




  • فحص ومعرفة طريقة التسلسل في الكود

screenCSS-cascade.gif




  • معاينة الألوان والصور

screenCSS-tooltip.gif




  • جرب ، ثم جرب، ثم جرب

screenCSS-edit.gif




  • أعلى قليلا … أقل قليلا

screenCSS-updown.gif




  • تعلم مع فاير بق “استخدم الزر لأعلى ولأسفل لعرض الخصائص”

screenCSS-learn.gif




  • تراه ألان ، لا تراه ألان

screenCSS-disabling.gif




  • نسخ الألوان والروابط

screenCSS-copy.gif



4- تعرض مقاييس أل
css


visualizeCSSMetrics.png



  • قياس كل زاوية

screenLayout-edge.gif




  • عدل كما شئت

screenLayout-edit.gif




5- مراقبة نشاط الشبكة


monitorNetworkActivity.png



  • مشاهدة حية لتنزيل ملفات الصفحة

screenNet-timeline.gif




  • مخزنة ام ليست مخزنة

screenNet-cache.gif




  • استكشاف هيدر برتوكول اتش تى تى بي ”Http header”

screenNet-headers.gif




  • العرض بناء على المحتوى

screenNet-filter.gif



6- عرض جافا سكربت وتصحيح أخطائها

debugAndProfileJavascript.png



  • إيجاد الاسكربت بسهولة

screenScript-listing.gif




  • إيقاف التنفيذ عند أي خط

screenScript-breakpoint.gif




  • إيقاف التنفيذ عن وجود شرط معين

screenScript-cond.gif




  • مشاهدة “expressions”

screenScript-watch.gif




  • استكشاف المتغيرات

screenScript-tooltip.gif




  • تسجيل “استدعاء الدوال”



  • الذهاب مباشرة إلى سطر 108

screenScript-linejump.gif




7- سرعة الوصول إلى الأخطاء


quicklyFindErrors.png



  • يعتبر شريط الحالة مؤشر للأخطاء

screenErrors-indicator.gif




  • الأخبار بأخطاء الجافا سكربت

screenErrors-js.gif




  • الانتقال عبر رابط إلى المصحح

screenErrors-jump.gif




  • البحث السريع

screenErrors-search.gif




  • عرض الأخطاء بناء على ….

screenErrors-filter.gif



8- استكشاف أل ” ” Dom


exploreTheDOM.png




9- تنفيذ أكواد الجافا سكربت في نفس الوقت


javascriptOnTheFly.png



  • عدل بيدك لتتعلم

screenCL-dirty.gif




  • الاستكمال التلقائي

screenCL-autocomplete.gif




  • إمكانية لصق اى كود خارجي

screenCL-paste.gif




  • إمكانية النسخ بسهولة

screenCL-bookmarklet.gif



10- تسجيل تحركات الجافا سكربت logging

loggingForJavaScript.png



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



11- خصص أي شئ فى فاير بق كما تريد

adjustFirebug.png



إن استخدام فاير بق يعطيك الكثير من الإمكانيات لتطوير الويب ، وإن كنت تشعر ان هناك شء لا يعمل كما تريد ، فلا توجد مشكلة ، يعطيك فاير بج الكتير من الخيارات فاختر منها وفقا لاحتياجاتك



12- خاصية البحث

searchAndYouShallFind.png


.

تنسيق وترجمة : محمد فوزى من فريق عمل سبوت لاير



والسلام عليكم ورحمة الله وبركاتة
 

WebCraker

العبد الفقير إلى الله
طاقم الإدارة
9 مارس 2008
5,645
50
48
Egypt
support-ar.com
بارك الله فيك ..

استخدمها بالفعل وفعلا مفيدة للمطورين والمكودين