https://docs.joomlafarsi.com/index.php?action=history&feed=atom&title=%D9%87%D9%85%D9%87_%DA%86%DB%8C%D8%B2_%D8%AF%D8%B1%D9%85%D9%88%D8%B1%D8%AF_Firebugهمه چیز درمورد Firebug - تاریخچهٔ ویرایشها2026-04-17T07:54:39Zتاریخچهٔ ویرایشهای این صفحه در ویکیMediaWiki 1.26.2https://docs.joomlafarsi.com/index.php?title=%D9%87%D9%85%D9%87_%DA%86%DB%8C%D8%B2_%D8%AF%D8%B1%D9%85%D9%88%D8%B1%D8%AF_Firebug&diff=2891&oldid=prevHamidy در ۲۸ فوریهٔ ۲۰۱۲، ساعت ۱۷:۲۹2012-02-28T17:29:39Z<p></p>
<table class='diff diff-contentalign-right'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;' lang='fa'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">→ نسخهٔ قدیمیتر</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">نسخهٔ ۲۸ فوریهٔ ۲۰۱۲، ساعت ۱۷:۲۹</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l78" >سطر ۷۸:</td>
<td colspan="2" class="diff-lineno">سطر ۷۸:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>[[تصویر: Hiding.jpg|center]]</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>[[تصویر: Hiding.jpg|center]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><br/></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><br/></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>----</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>----</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>جمع آوری شده توسط: [http://forum.joomlafarsi.com/members/26237-shmata شهاب مطاع پور]</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>جمع آوری شده توسط: [http://forum.joomlafarsi.com/members/26237-shmata شهاب مطاع پور]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>{{معرفی پشتیبانی}}</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>{{معرفی پشتیبانی}}</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>{{کپی رایت}}</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>{{کپی رایت}}</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[رده:<del class="diffchange diffchange-inline">مقالات جوملا 1.5</del>]] [[رده:<del class="diffchange diffchange-inline">طراحی قالب جوملا 1.5]]</del></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[رده:<ins class="diffchange diffchange-inline">اطلاعات عمومی</ins>]] [[رده:<ins class="diffchange diffchange-inline">رایانه</ins>]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><br/></del></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">[[رده:مقالات جوملا 1.7]] [[رده:طراحی قالب جوملا 1.7]]</del></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><br/></del></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">[[رده:مقالات جوملا 2.5]] [[رده:طراحی قالب جوملا 2.5</del>]]</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
</table>Hamidyhttps://docs.joomlafarsi.com/index.php?title=%D9%87%D9%85%D9%87_%DA%86%DB%8C%D8%B2_%D8%AF%D8%B1%D9%85%D9%88%D8%B1%D8%AF_Firebug&diff=2890&oldid=prevShmata: /* بخش Dom */2012-02-28T12:30:24Z<p><span dir="auto"><span class="autocomment">بخش Dom</span></span></p>
<table class='diff diff-contentalign-right'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;' lang='fa'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">→ نسخهٔ قدیمیتر</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">نسخهٔ ۲۸ فوریهٔ ۲۰۱۲، ساعت ۱۲:۳۰</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l56" >سطر ۵۶:</td>
<td colspan="2" class="diff-lineno">سطر ۵۶:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>[[تصویر: Flayout.jpg|center]]</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>[[تصویر: Flayout.jpg|center]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>==بخش Dom==</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>==بخش Dom==</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>این قسمت اطلاعات جامعی در مورد متغیرهای و توابع جاوا اسکریپت و مقدار آنها به شما میدهد . این قسمت برای توسعه دهندگان client-side که با <del class="diffchange diffchange-inline">javascript</del>]] , JQuery]] کد نویسی میکنند بسیار سودمند است.</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>این قسمت اطلاعات جامعی در مورد متغیرهای و توابع جاوا اسکریپت و مقدار آنها به شما میدهد . این قسمت برای توسعه دهندگان client-side که با <ins class="diffchange diffchange-inline">Javascript</ins>]] , JQuery]] کد نویسی میکنند بسیار سودمند است.</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>=مشاهده آنی نتایج تغییرات در [[HTML]] =</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>=مشاهده آنی نتایج تغییرات در [[HTML]] =</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>صدها راه برای تغییرات در [[HTML]] و مشاهده نتایج آن تغییرات وجود دارد . ویرایش فایلها در سرور و ذخیره کردن آن تغییرات و مشاهده آن در مرورگر (نیاز به refresh کردن صفحه و دسترسی به سرور دارد) استفاده از نرم افزارهایی مثل Dream Weaver که یکسری امکانات در این زمینه به ما میدهند . Firebug این امکان را فراهم کرده که به صورت آنی (real time) کدهای client side از جمله HTML را ویرایش کنیم در قسمت Node view میتوانیم با گلیک کردن برروی عناصر html و استفاده از دکمه Edit کلیه محتویات html صفحه جاری را ویرایش و نتایج تغییرات را به صورت آنی مشاهده کنیم (بدون refresh کردن صفحه) .</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>صدها راه برای تغییرات در [[HTML]] و مشاهده نتایج آن تغییرات وجود دارد . ویرایش فایلها در سرور و ذخیره کردن آن تغییرات و مشاهده آن در مرورگر (نیاز به refresh کردن صفحه و دسترسی به سرور دارد) استفاده از نرم افزارهایی مثل Dream Weaver که یکسری امکانات در این زمینه به ما میدهند . Firebug این امکان را فراهم کرده که به صورت آنی (real time) کدهای client side از جمله HTML را ویرایش کنیم در قسمت Node view میتوانیم با گلیک کردن برروی عناصر html و استفاده از دکمه Edit کلیه محتویات html صفحه جاری را ویرایش و نتایج تغییرات را به صورت آنی مشاهده کنیم (بدون refresh کردن صفحه) .</div></td></tr>
</table>Shmatahttps://docs.joomlafarsi.com/index.php?title=%D9%87%D9%85%D9%87_%DA%86%DB%8C%D8%B2_%D8%AF%D8%B1%D9%85%D9%88%D8%B1%D8%AF_Firebug&diff=2889&oldid=prevShmata در ۲۸ فوریهٔ ۲۰۱۲، ساعت ۱۲:۲۹2012-02-28T12:29:32Z<p></p>
<table class='diff diff-contentalign-right'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;' lang='fa'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">→ نسخهٔ قدیمیتر</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">نسخهٔ ۲۸ فوریهٔ ۲۰۱۲، ساعت ۱۲:۲۹</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l55" >سطر ۵۵:</td>
<td colspan="2" class="diff-lineno">سطر ۵۵:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>این قسمت به صورت کاملا visual اندازه element یا عنصر یا چندین عنصر را که شما انتخاب کردید به شما نمایش میدهد از این قسمت شما علاوه بر اندازه width , height آن عناصر میتوانید اندازه border و مقدار padding , margin مربوط به آن عنصر یا عناصر مشاهده نمایید.</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>این قسمت به صورت کاملا visual اندازه element یا عنصر یا چندین عنصر را که شما انتخاب کردید به شما نمایش میدهد از این قسمت شما علاوه بر اندازه width , height آن عناصر میتوانید اندازه border و مقدار padding , margin مربوط به آن عنصر یا عناصر مشاهده نمایید.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>[[تصویر: Flayout.jpg|center]]</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>[[تصویر: Flayout.jpg|center]]</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">==بخش Dom==</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>این قسمت اطلاعات جامعی در مورد متغیرهای و توابع جاوا اسکریپت و مقدار آنها به شما میدهد . این قسمت برای توسعه دهندگان client-side که با javascript]] , JQuery]] کد نویسی میکنند بسیار سودمند است.</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>این قسمت اطلاعات جامعی در مورد متغیرهای و توابع جاوا اسکریپت و مقدار آنها به شما میدهد . این قسمت برای توسعه دهندگان client-side که با javascript]] , JQuery]] کد نویسی میکنند بسیار سودمند است.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>=مشاهده آنی نتایج تغییرات در [[HTML]] =</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>=مشاهده آنی نتایج تغییرات در [[HTML]] =</div></td></tr>
</table>Shmatahttps://docs.joomlafarsi.com/index.php?title=%D9%87%D9%85%D9%87_%DA%86%DB%8C%D8%B2_%D8%AF%D8%B1%D9%85%D9%88%D8%B1%D8%AF_Firebug&diff=2887&oldid=prevShmata: صفحهای جدید حاوی '=ابزار استنتاج کدهای client side وب Firebug= center Firebug یک ابزار قدرتمند op...' ایجاد کرد2012-02-28T12:24:53Z<p>صفحهای جدید حاوی '=ابزار استنتاج کدهای client side وب Firebug= <a href="/index.php?title=%D9%BE%D8%B1%D9%88%D9%86%D8%AF%D9%87:Firebug1.jpg" title="پرونده:Firebug1.jpg">center</a> Firebug یک ابزار قدرتمند op...' ایجاد کرد</p>
<p><b>صفحهٔ تازه</b></p><div>=ابزار استنتاج کدهای client side وب Firebug=<br />
[[تصویر: Firebug1.jpg|center]]<br />
Firebug یک ابزار قدرتمند open source برای توسعه دهندگان وب است که اولین بار به صورت یک افزونه برای مروگر وب [http://www.mozilla.org/en-US/firefox/new/ آMozilla Firefox] ارائه شد . این ابزار ارزشمند برای توسعه دهنگان وب به صورت ضعیف تر همینک در مروگرهای chrome , IE , operaو برخی از مرورگرهای دیگر ادغام شده است . بوسیله این ابزار قدرتمند قادر به مشاهده و ویرایش و debug کردن کدهای [[HTML]], [[CSS]] , [[JavaScript]] به صورت آنی در هر صفحه وبی خواهیم بود. بدین وسیله از کار حدسی در طراحی وب (تغییر استایلها و کدها و ریفرش کردن صفحه وب برای دیدن نتیجه و احتمالا ویرایش مجدد استایلها و کدها) که قبل از firebug به شدت مرسوم بود جلوگیری عمل آمده و این ویژگی باعث بالا رفتن سرعت تست debug و بازرسی مجدد صفخات و در نتیجه کاهش زمان انجام کار در طراحی و توسعه صفحات وب شده است.<br />
<br/><br />
=شروع کار با firebug=<br />
[[تصویر: Two.jpg|center]]<br />
برای کار با firebug شما نیاز به یک '''مرورگر''' Mozilla Firefox دارید . بعد از دانلود و نصب Mozilla Firefox از طریق '''همین مرورگر''' میتوانید با کلیک برروی دکمه add to firefox اقدام به نصب [https://addons.mozilla.org/en-US/firefox/addon/firebug/ آخرین نسخه firebug] کنید .<br />
<br/><br />
در حین مراحل نصب نیاز به انجام هیچ کاری نیست و مرورگر فایرفاکس خودش مراحل نصب را انجام میدهد و درپایان از شما درخواست میکند که مرورگرتان reset (باز و بسته) کند و شما باید این پیغام را بپذیرید.<br />
=باز کردن پنل firebug =<br />
برای کار با firebug نیاز داریم که پنل آنرا باز کنیم چندین راه برای باز کردن پنل firebug وجود دارد که آنها را بررسی میکنیم فقط دقت داشته باشید که پنل firebug مانند تصویر زیر است .<br />
[[تصویر: Fthree.jpg|center]]<br />
<br/><br />
=فعال کردن firebug با استفاده از کلیدهای shortcut =<br />
با استفاده کلید '''F12''' شما میتوانید پنل firebug را باز (فعال و آماده استفاده) کنید . برای اطلاع از عملکرد سایر کلیدهای shortcut میتوانید از [http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts ین لینک] استفاده کنید.<br />
=فعال کردن firebug با استفاده از منو=<br />
شما براحتی میتوانید در هر صفحه وب بروری یک عنصر [[HTML]] مانند(Div , Hyperlink , Image , Button , …) راست کلیک کنید و گزینه Inspect Element را از منو نمایش داده شده انتخاب کنید . مانند تصویر زیر.<br />
[[تصویر: Inspect.jpg|center]]<br />
=آیکون firebug=<br />
شما همچنین میتوانید با کلیک برروی آیکون firebug پنل firebug را فعال کنید . مکان آیکون firebug بستگی به نسخه Firefox شما دارد ممکن در پائین صفحه باشد و ممکن است همانند مرورگر Google Chrome (اگر این افزونه را در Chrome نصب کرده باشید)در بالای صفحه در کنار نوار جستجو باشد.<br />
[[تصویر: Icon.jpg|center]]<br />
=نکته ای در مورد کارکردن با firebug استفاده از آن در پنجره جداگانه و اختصاصی =<br />
وقتی که یکبار پنل firebug را فعال کردید میتوانید این پنل را به صورت یک پنجره جداگانه در اختیار داشته باشید(در حالت پیش فرض پنل firebug در پائین همان صفحه وب جاری فعال میشود).دکمه مربوط به کار کردن با firebug در یک پنجره اختصاصی در تصویر زیر مشخص شده است .<br />
[[تصویر: Nwindow.jpg|center]]<br />
=بررسی عناصر HTML یک صفحه وب=<br />
یک سوال که همیشه (تا قبل از پیدایش firebug) برای طراحان سایت مطرح بوده این بود که : مشکل از کجاست ؟ Where’s the flaw? مخفف آن (WTF) firebug کوتاهترین و راحتترین پاسخ به این سوال است . وقتی شما پنل firebug را باز میکنید از قسمت HTML Panel که به صورت پیش فرض وقتی firebug را باز میکنید این قسمت نمایش داده میشود میتوانید تمام عناصر html موجود در صفحه در این قسمت مشاهده کنید . فرض میکنیم شما برروی یک div گزینه Inspect Element را زدید (از طریق راست کلیک) در قسمت بالای پنل html تمام عناصر قبل از آن div تا عنصر body و head را به شما در یک نوار نشان میدهد بدین ترتیب شما براحتی میتوانید در divهای تودرتو کاوش کنید و عنصر مورد نظرتان پیدا کرده و بررسی کنید. قبل از این باید با استفاده از نرم افزارهای تجاری مانند Dream Viewer صفحه وب مورد نظر در سیستم تان ذخیره میکردید سپس آن صفحه را با این نرم افزار باز و عنصر مورد نظر را جستجو میکردید . در firebug علاوه بر یافتن عناصر موجود در صفحه استایلهای CSS ای که آن عنصر از آنها استفاده میکند در همان صفحه در Tab مجاور به شما نمایش میدهد. برای درک بهتر این ویژگی قسمت Node view همین مقاله را مطالعه فرمائید .<br />
[[تصویر: Thtml.jpg|center]]<br />
=قسمت نمایش یک عنصر خاص =<br />
در ابتدا باید امکان Node View را فعال کنید برای اینکار در قسمت چپ پنل فعال firebug برروی آیکون مستطیل آبی رنگ کلیک کنید تا بتوانید از امکان Node View استفاده کنید. قسمت Node View (این قسمت در تصویر زیر مشخص شده است) تمام source ایجاد شده در صفحه جاری را به شما نمایش میدهد.<br />
[[تصویر: Nodeview.jpg|center]]<br />
قسمت Node View علاوه ویژگیهایی که قبلا توضیح داده شد این امکان را به شما میدهد تا کد عنصر HTML مورد نظر را ویرایش کنید و نتیجه را آنی مشاهده کنید . این ویرایشها صرفا برای مشاهده نتیجه توسط شماست و به هیچ عنوان ذخیره نمیشود و با ریفرش شدن صفحه (کلید F5) صفحه به حالت قبل از ویرایش شما باز میگردد.<br />
<br/><br />
اگر Node View فعال باشد هنگامی که با ماوس برروی یک عنصر در صفحه وب میروید آن قسمت high light میشود و کد مربوط به آن قسمت در قسمت پنل Html نمایان میشود. این ویژگی کمک فوق العاده ای برای رفع مشکلات ناشی از margin , padding , float , … است. <br />
[[تصویر: Edit.jpg|center]]<br />
یکی دیگر از ویژگیهای پرکاربرد و باقابلیت firebug ویژگی Element stack است پیشتر به آن اشاره کردیم واینک به بررسی کامل آن خواهیم پرداخت . وقتی که شما برروی عنصر Html ای در صفحه کلیک میکنید firebug درقسمت بالا پنل اش Element Stack را به شما نمایش میدهد یعنی شما براحتی تمام تگها و عناصر قبل از عنصر جاری (عنصر high lightشده توسط Node View) را میتوانید مشاهده کنید با این کار علاوه بر بررسی property های عنصر جاری و اطلاع از مکان دقیق آن در صفحه وب براحتی استایلهای css مربوط به آن عنصر را مشاهده کنید و حتی میتوانید آنها را تغییر دهید.<br />
[[تصویر: Stack.jpg|center]]<br />
و برای کمک به یافتن و ویرایش هرچه سریع تر عناصر موجود در صفحه وقتی با که قابلیت node view فعال است و برروی عنصری در صفحه کلیک میکنیم آن قسمت هم در پنل firebug و هم در صفحه به صورت high light شده باقی میماند.در قسمت بعد بابررسی سایر ویژگیهای موجود در firebug از مزایای این قسمتهای high light شده بیشتر خواهیم فهمید.<br />
=پنل های مجاور قسمت HTML =<br />
بخش دوم firebug که در سمت راست قرار دارد خود نیز شامل 4 بخش است . این قسمتها اطلاعات جامع تری در مورد عنصر high light شده به شما خواهند داد. آن 4 بخش که به آنها اشاره کردیم عبارتند از :<br />
<br/><br />
1. بخش Style <br/><br />
2. بخش Computed <br/><br />
3. بخش Layout <br/><br />
4. بخش Dom <br/><br />
==بخش Style==<br />
این بخش اطلاعاتی کاملی راجب اینکه عنصر جاری (High light شده) از چه استایلها CSS ای استفاده میکند به ما میدهد. <br />
[[تصویر: Element.jpg|center]]<br />
'''این بخش علاوه بر نمایش استایلهای مربوط به عنصر جاری فایل CSS و خط مربوط به آن استایلها را به شما میدهد''' <br />
<br/><br />
این قابلیت انقلابی در صنعت طراحی وب برای سهولت کار بوجود آورده است.<br />
==بخش Computed==<br />
این بخش اطلاعاتی راجب خصوصیتهای [[CSS]] مانند(font-size , color , text-align , …) عنصر html جاری ارائه میکند. در واقع این قسمت به شما میگوید که مرورگر شما به چه نحوی مقادیر استایلها و عناصر موجود در صفحه را ترجمه کرده . این قسمت کمک زیادی برای طراحی قابلهایی که در تمام مرورگرها به صورت یکسان نمایش داده شود میکند.<br />
[[تصویر: Computed.jpg|center]]<br />
==بخش Layout==<br />
این قسمت به صورت کاملا visual اندازه element یا عنصر یا چندین عنصر را که شما انتخاب کردید به شما نمایش میدهد از این قسمت شما علاوه بر اندازه width , height آن عناصر میتوانید اندازه border و مقدار padding , margin مربوط به آن عنصر یا عناصر مشاهده نمایید.<br />
[[تصویر: Flayout.jpg|center]]<br />
این قسمت اطلاعات جامعی در مورد متغیرهای و توابع جاوا اسکریپت و مقدار آنها به شما میدهد . این قسمت برای توسعه دهندگان client-side که با javascript]] , JQuery]] کد نویسی میکنند بسیار سودمند است.<br />
=مشاهده آنی نتایج تغییرات در [[HTML]] =<br />
صدها راه برای تغییرات در [[HTML]] و مشاهده نتایج آن تغییرات وجود دارد . ویرایش فایلها در سرور و ذخیره کردن آن تغییرات و مشاهده آن در مرورگر (نیاز به refresh کردن صفحه و دسترسی به سرور دارد) استفاده از نرم افزارهایی مثل Dream Weaver که یکسری امکانات در این زمینه به ما میدهند . Firebug این امکان را فراهم کرده که به صورت آنی (real time) کدهای client side از جمله HTML را ویرایش کنیم در قسمت Node view میتوانیم با گلیک کردن برروی عناصر html و استفاده از دکمه Edit کلیه محتویات html صفحه جاری را ویرایش و نتایج تغییرات را به صورت آنی مشاهده کنیم (بدون refresh کردن صفحه) .<br />
<br/><br />
به عنوان مثال در عناصر html به وفور مشاهده میشود که این عناصر از class و id خاصی استفاده میکنند شما براحتی با پاک کردن یا اضافه کردن آن کلاس و id ها به سایر عناصر میتوانید نتیجه ویرایش را ببینید یا میتوانید عنصر بیرونی یک تگ html را پاک کنید یا یک آن عنصر را داخل یک تگ قرار دهید . در قسمت Node View برروی قسمت Html هر گونه تغییر html ای قابل انجام است .<br />
=مشاهده آنی نتایج تغییرات در [[CSS]] =<br />
تغییر استایلهای(به کدهای css استایل هم میگویند) css در firebug یکی از بزرگترین و کاربردی ترین امکانات این افزونه است . همانطور که قبلا اشاره شد هر گاه در صفحه وب راست کلیک کرده و گزینه Inspect Element with firebug را انتخاب کنید علاوه بر مشاهده کدهای html در قسمت Node view میتوانید از پنجره مجاور آن(سمت راستی) کدها(به کدهای css استایل هم میگویند) مربوط به css را مشاهده و آنها را ویرایش کنید.<br />
[[تصویر: Style.jpg|center]]<br />
=یافتن استایلهای اعمال نشده=<br />
وقتی که شما در css تان چندین استایل مشابه برای یک یا چند عنصر داشته باشید مثلا برای تگهای h1 , h2 , h3 , h4 استایلهای مشابهی دارید و در چندین فایل css مجزا برای این تگ ها استایل تعریف کردید (یا قالبی دانلود کردید که به صورت است و شما اطلاعی از آن ندارید) firebug این امکان را به شما میدهد و شما را از استایلهای که نوشته شده اند ولی مورد استفاده قرار نمیگیرند آگاه میسازد به این صورت به راحت و با سرعت میتوانید مشکل را پیدا کنید. به این صورت که firebug برروی این استایلها یک خط میکشد و شما میتوانید متوجه شوید این استایلها مورد استفاده قرار نمیگیرند (Over Written property) .<br />
[[تصویر: Foverwritten.jpg|center]]<br />
همانطور که کاملا مشخص است firebug با کشیدن خط برروی استایل به ما میفهماند که این استایلها از جانب مرورگر مورد استفاده قرار نمیگیرند.<br />
<br/><br />
اگر در تصویر بالا دقت کنید نام فایلها و شماره خطی که آن استایل در آن خط قرار دارد به صورت آبی رنگ مشخص است با این امکان جادویی به سرعت میتوانید فایل و مکان آن دستور مورد نظر را پیدا کنید.<br />
<br/><br />
این در حالی است که ما علاوه بر مشاهده این اطلاعات امکان ویرایش css را هم همزمان خواهیم داشت به عنوان مثال در تصویر پائین بنده تصمیم دارم ببینم اگر به مقدار دستور padding-top را تغییر دهم و مقدار آنرا به 22px ست کنم در صفحه وب چه اتفاقی خواهد افتاد.به این منظور تنها کافیست برروی value مورد نظر کلیک کنیم و مقدار آنرا به دلخواه تغییر دهیم و نتیجه را همزمان در مرورگر مشاهده کنیم.<br />
[[تصویر: Code.jpg|center]]<br />
=امکان enable و disable کردن استایلها=<br />
شما براحتی میتوانید با کلیک در کنار دستور css آنرا disable کنید و همزمان نتیجه را مشاهده کنید اگر قابل قبول آن دستور را از source اصلی پاک کنید و اگر قابل قبول نبود با کلیک مجدد برروی نام دستور آنرا به حال قبل بازگردانید.<br />
[[تصویر: Hiding.jpg|center]]<br />
<br/><br />
----<br />
جمع آوری شده توسط: [http://forum.joomlafarsi.com/members/26237-shmata شهاب مطاع پور]<br />
<br />
{{معرفی پشتیبانی}}<br />
{{کپی رایت}}<br />
<br />
[[رده:مقالات جوملا 1.5]] [[رده:طراحی قالب جوملا 1.5]]<br />
<br/><br />
[[رده:مقالات جوملا 1.7]] [[رده:طراحی قالب جوملا 1.7]]<br />
<br/><br />
[[رده:مقالات جوملا 2.5]] [[رده:طراحی قالب جوملا 2.5]]</div>Shmata