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


اليوم جايبلكم موضوع في غاية الروعة لإخواني المصممين وهو إضافة Firebug إلى Firefox حيث تمكنك هده الإضافة من
تحرير و تصحيح ، ورصد كل من HTML, CSS, JavaScrip وتمكنك من فهم تركيب المواقع والجدوال ومواقعها بدقة وكل شيء في صفحة الويب التي تريد، ويمكنك أيضا من نقل وتعديل الصفحات وفهم ونقل HTML و CSS بدقة، ويمكنك أيضا التعديل على قوالب المدونات الان نبدأ على بركة الله.

أفترض انك ثبت Firefox، وإن لم تكن كدلك يمكنك تثبيت النسحة الأخيرة من هدا الرابط

قم بتثبيت Firebug على هدا الرابط باتباع الطريقة التالية :



إضغط على زر التثبيت نفس الشيء للإخوة الدين يستعملون اللغة الإنجليزية
هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 604x408 .


إنتظر مدة قصيرة جدا لأن حجمه صغير 679 k



بعدها يمكنك غلق Firefox ثم إعادة فتحه، ثم افتح أي موقع تريد بواسطة Firefox ثم افتح Firebug بالتباع الخطوات التالية:



ثم تظهر نافدة Firebug التي يمكنك العمل عليها، وهنا فتحت موقع لأوضح العملية، حيث تظهر المنطقة 1 وفي هده المنطقة يمكنك نسخ كود أو التأشير على أي خاصية في كود فيحدث تلوين للعنصر في الأعلى الدي وضعت عليه الفأرة وبالتلي يمكنك معرفة موقع العنصر وحجمه ولونه وخصائصه المتعددة، أما المنطقة 2 فبها أيضا خصائص منها التعديل على CSS ونسخها ووضعها في الصفحة الأصلية وهده الخاصية مفيدة خاصة إدا نسخت موقع وتريد تغيره والعمل عليه او العمل أيضا على قوالب المدونات
هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 731x383 .


يمكنك تحديد أي شيء في الصفحة، صور جداول نص ألوان وغيرها من الأكواد يعني كل شيء موجود في HTML



من هده الخاصية يمكنك إستظهار أكواد CSS الخاصة بالصفحة



اما في هده المنطقة فيمكنك التعديل على أكواد CSS ثم نسخها في الصفحة والتعرف على الكثير من الخصائص



هده المنطقة تظهر حدود الصفحة وتظهر حدود الصفحة لمختلف الإطارات



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

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

وهذا فيديو اخر

الشرح منقول
شكرا لكم