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

[Chakira]

http://www.dzbatna.com/images/icons/iconrote.gif ظ…ط§ ظ‡ظ‰ ط§ظ„ظپط§ظٹط± ط¨ظ‚ ....ظƒظ„ ط´ط¦ ط¹ظ†ظ‡ط§ .. ط¨ط§ظ„طµظˆط± (http://www.dzbatna.com/t1903003/)




بسم الله الرحمن الرحيم

ما هى الفاير بق (http://getfirebug.com/) ...?



(http://ar.spotlayer.com/)


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



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



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




مميزاتها :





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

http://getfirebug.com/img/whatisfirebug/firebugSmall.png







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

http://getfirebug.com/img/enable/oneClickToStartFirebug.png



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

http://getfirebug.com/img/enable/instantHTMLCSSDOM.png






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

http://getfirebug.com/img/enable/enablingPanels.png



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

http://getfirebug.com/img/enable/minimizingClosing.png



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

http://getfirebug.com/img/enable/severalScreens.png



F12 هو صديقك

http://getfirebug.com/img/enable/usingF12.png



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

http://getfirebug.com/img/enable/javascriptDevs.png



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

http://getfirebug.com/img/enable/siteEngineers.png




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




http://getfirebug.com/img/whatisfirebug/inspectAndEditHTML.png



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

http://getfirebug.com/img/html/liveView.png



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

http://getfirebug.com/img/html/highlightingOfChanges.png



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

http://getfirebug.com/img/html/instantEditing.png



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

http://getfirebug.com/img/html/copySource.png



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




http://getfirebug.com/img/whatisfirebug/tweakCSSToPerfection.png




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

http://getfirebug.com/img/css/screenCSS-cascade.gif



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

http://getfirebug.com/img/css/screenCSS-tooltip.gif



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

http://getfirebug.com/img/css/screenCSS-edit.gif



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

http://getfirebug.com/img/css/screenCSS-updown.gif



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

http://getfirebug.com/img/css/screenCSS-learn.gif



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

http://getfirebug.com/img/css/screenCSS-disabling.gif



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

http://getfirebug.com/img/css/screenCSS-copy.gif



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


http://getfirebug.com/img/whatisfirebug/visualizeCSSMetrics.png



قياس كل زاوية

http://getfirebug.com/img/layout/screenLayout-edge.gif



عدل كما شئت

http://getfirebug.com/img/layout/screenLayout-edit.gif




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




http://getfirebug.com/img/whatisfirebug/monitorNetworkActivity.png



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

http://getfirebug.com/img/network/screenNet-timeline.gif



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

http://getfirebug.com/img/network/screenNet-cache.gif



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

http://getfirebug.com/img/network/screenNet-headers.gif



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

http://getfirebug.com/img/network/screenNet-filter.gif



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



http://getfirebug.com/img/whatisfirebug/debugAndProfileJavascript.png



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

http://getfirebug.com/img/js/screenScript-listing.gif



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

http://getfirebug.com/img/js/screenScript-breakpoint.gif



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

http://getfirebug.com/img/js/screenScript-cond.gif



مشاهدة “expressions”

http://getfirebug.com/img/js/screenScript-watch.gif



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

http://getfirebug.com/img/js/screenScript-tooltip.gif



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



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

http://getfirebug.com/img/js/screenScript-linejump.gif




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




http://getfirebug.com/img/whatisfirebug/quicklyFindErrors.png



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

http://getfirebug.com/img/errors/screenErrors-indicator.gif



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

http://getfirebug.com/img/errors/screenErrors-js.gif



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

http://getfirebug.com/img/errors/screenErrors-jump.gif



البحث السريع

http://getfirebug.com/img/errors/screenErrors-search.gif



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

http://getfirebug.com/img/errors/screenErrors-filter.gif



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


http://getfirebug.com/img/whatisfirebug/exploreTheDOM.png





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


http://getfirebug.com/img/whatisfirebug/javascriptOnTheFly.png



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

http://getfirebug.com/img/cl/screenCL-dirty.gif



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

http://getfirebug.com/img/cl/screenCL-autocomplete.gif



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

http://getfirebug.com/img/cl/screenCL-paste.gif



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

http://getfirebug.com/img/cl/screenCL-bookmarklet.gif



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



http://getfirebug.com/img/whatisfirebug/loggingForJavaScript.png



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




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



http://getfirebug.com/img/whatisfirebug/adjustFirebug.png



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




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

http://getfirebug.com/img/whatisfirebug/searchAndYouShallFind.png


.

الشرح طريقة ترجمة : محمد فوزى من فريق عمل سبوت لاير (http://ar.spotlayer.com/)

http://ar.spotlayer.com/templates/spotlayer/images/siteIndex/header/logo.png (http://ar.spotlayer.com/)

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






ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©