فایرباگ – Firebug – چیست و چگونه از فایر باگ استفاده کنیم ؟

آشنایی با فایرباگ - یک ابزار بسیار قدرتمند با ابعاد وسیعی از امکانات و خصوصیات کاربردی که برای هر طراح و یا توسعه دهنده وب مفید و مناسب است


مهدخت یافتیان ۷۶ دیدگاه CSS , HTML , اصول طراحی وب سایت شنبه, 19th نوامبر , 2011 170826 بازدید

راهنمای , آموزش استفاده از فایر باگ – firebug – برای طراحان وب

firebug-webtarget.ir

فایر باگ – firebug – ، یک برنامه اپن سورس است و به عنوان ابزار اضافی یا کمکی ، برای توسعه وب استفاده می شود که مخصوص مرور گر موزیلا فایر فاکس – firefox – می باشد. این ابزار به طرز باورنکردنی قدرتمند است و با ابعاد وسیعی از امکانات و خصوصیات کاربردی ، برای هر طراح و یا توسعه دهنده وب مفید و مناسب است.
در واقع این امکان اضافی ( در مرور گر های دیگر با قابلیت کمتر نیز وجود دارد) یدک کش اسم مرور گر خود می باشد.فایر باگ دربین ابزار های دیگر( مانند ابزار بررسی و تست قالب و پروفایل اجرایی صفحات وب )، برای سرعت بخشیدن به روند کاری، زمان انجام عملیات آزمون و خطا را هنگام دی باگ کردن یا رفع اشکال صفحات وب کاهش می دهد.

firebug-webtarget.ir

در صورتی که شما در حال طراحی وب سایت با افزودن سی اس اس های جدید هستید برای برطرف کردن عیوب وب سایت خود و یا بررسی استراکچر سایت های دیگر فایر باگ ابزار با ارزشی برای آنها خواهد بود.
بیائید نگاه دقیق تری به این ابزار مهم و ضروری مرور گر فایر فاکس بیندازیم تا متوجه شویم که این ابزار چگونه به شما کمک خواهد کرد. ما فقط روی ویژگی هایی که به طراحان وب کمک می کند تمرکز خواهیم کرد.

فایر باگ – firebug

  • در ابتدای کار شما باید مرور گر موزیلا فایر فاکس را اگر نصب ندارید دانلود و نصب کنید
  • سپس شما احتیاج دارید که فایر باگ را دانلود و نصب کنید .
  • بعد از نصب این ابزار شما می توانید به تشریح هر وب سایتی که دوست دارید بپردازید.
  • شما می توانید با بررسی کردن امکانات آن وخواندن ویکی رسمی توضیحات در مورد فایر باگ تا حدودی متوجه شوید که این امکانات چگونه کار می کنند.

پنل فایر باگ را باز کنید

راه های مختلفی برای باز کردن پنل فایر باگ وجود دارد وقتی که این پنل را باز می کنیم باید تصویر مشابه تصویر زیر باشد.

firebug-webtarget.ir

باز کردن فایر باگ با استفاده از کلید های میانبر

با فشردن دکمه F12 از صفحه کلید می توانید پنل فایر باگ را خاموش و روشن کنید.بقیه کلید های میانبر برای فایر باگ را از این صفحه ملاحظه کنید.

استفاده از فایر باگ از طریق Context Menu مرور گر

در هر صفحه از وب سایت با کلیک راست کردن روی صفحه، بخشی از html صفحه( هایپرلینک، دکمه ها، تصاویر ) و بعد از انتخاب inspect element از منو، پنل فایر باگ ظاهر می شود.

firebug-webtarget.ir

آیکون فایر باگ

شما همچنین برای باز کردن پنل فایر باگ می توانید روی دکمه فایر باگ کلیک کنید. با توجه به ورژن فایر فاکس شما این آیکون در پائین صفحه سمت راست یا بالا سمت راست کنار نوار جستجو قرار می گیرد.

firebug-webtarget.ir

استفاده از فایر باگ در یک پنجره جدید روی صفحه

زمانی که پنل فایر باگ شما روشن است دلتان می خواهد که آن را به صورت یک پنجره جدید و به صورت مجزا و در پنجره مخصوص به خودش مشاهده کنید. دکمه نمایش در پنجره جدید را از فایر باگ کلیک کنید این کاره برای مانیتورهای بزرگ و تنظیمات کامپیوترهایی که از چند مانیتوره به صورت همزمان استفاده می کنند مفید است.

firebug-webtarget.ir

حالا شما آماده هستید که مشکلات موجود را برطرف کنید. در مطالب بعدی در مورد ویژگی های فایر باگ و تکنیکهای مفید آن توضیحاتی خواهیم داد.

بررسی قالب و ساختار صفحه وب و نشانه گذاری ها

اولین سوالی که شما از خودتان در مورد صفحه ای که در حال توسعه و یا رفع مشکلات آن هستید ، می پرسید این است که : مشکل وب سایت چیست و از کجا به وجود آمده ؟
کاربرد اولیه و اساسی فایر باگ بررسی است. زمانی که فایر باگ را باز می کنید شما به صورت پیش فرض در پنل HTML هستید. این پنل به شما در بررسی و درک HTML عناصر درون صفحه کمک می کند.

firebug-webtarget.ir

در پنل HTML دو بخش در پنل وجود دارد

قسمت نمایش ند ها

اولا در سمت چپ صفحه شما قسمت نمایش ند، در واقع کد های تشکیل دهنده صفحه ای را که در مرورگر شما باز است را نمایش می دهند.

firebug-webtarget.ir

نمایش ند ها به شما این اجازه را می دهد که به ویرایش عناصر اچ تی ام ال صفحه بپردازید و نتیجه آن را در صفحه مشاهده کنید وقتی که شما روی عناصر نشانه گذاری شده اچ تی ام ال موس اور می کنید عناصر صفحه وب که شما در حال بررسی آن هستید به صورت های هایلایت نمایش داده می شود. این ابزار به طرز باور نکردنی به شما دقیقا نشان می دهد که مرورو گر به چه صورت به پیاده سازی و اجرا کردن عناصر اچ تی ام ال در صفحه می پردازد و عناصر مشخص در کجای صفحه قرار دارد. با استفاده از این ابزار می توانید مشکلات مربوط به margin و padding و مشکلات از این قبیل را در صفحه بر طرف کنید.

firebug-webtarget.ir

وقتی که شما بر روی ند های اچ تی ام ال کلیک می کنید روی نوار بالای بخش نمایش ند ها، مسیر هر ند نمایش داده خواهد شد. از این مسیر برای افزودن یا نوشتن هر نوع سی اس اس مورد نیاز بطور مخصوص و مشخص، برای یک بخش به خصوص، از عناصر وب سایت که مشابه قسمت های دیگر در صفحه وب سایت شما می باشد و همچنین برای دریافتن اینکه بخشها و عناصر صفحه دارای چه خصوصیاتی از سی اس اس هستند استفاده می کنیم.

firebug-webtarget.ir

برای اینکه هر چه سریعتر به عنصر اچ تی ام ال مورد نظر خود دستیابید می توانید از نوار جستجوی سمت راست پنل استفاده کنید که با های لایت توسی در بخش نمایش ند ها ، بخش مورد نظر را نمایش خواهد داد.

firebug-webtarget.ir

پنل کناری نمایش کد های اچ تی ام ال

بخش بعدی که در سمت راست صفحه نمایش قرار دارد به نام پنل کناری معروف است. در این پنل کناری ، پنل ها یی وجود دارد که به شما اطلاعات بیشتری در مورد عناصر انتخاب یا های لایت شده می دهد.

در پنل کناری ۴ پنل دیگر موجود است:

  • ۱- استایل style
  • ۲- قالب یا layout
  • ۳- محاسبه computed
  • ۴- سند مدل شیء یا DOM (document object model)

پنل استایل style در پنل کناری به شما تاثیر سی اس اس های مهم عناصر صفحات وب را نمایش می دهد این پنل نمایی از استایل شیت ( صفحه نوشتن کد های سی اس اس ) با شماره خط آن سی اس اس را نمایش می دهد. در این حالت شما بیشتر از یک استایل شیت خواهید داشت.

firebug-webtarget.ir

در پنل محاسبات یا computed ، شما خصوصیات سی اس اس را مشاهده خواهید کرد مانند font-size, font –color,text-align و غیره این اطلاعات به شما در درک نحوه ارائه این کد ها توسط مرورگر کمک میکند.

firebug-webtarget.ir

پنل قالب layout در پنل کناری ، تصویری از باکس مدل های یا تقسیم بندی صفحه وب را. نمایش میدهد. اگر شما جزو آن دسته از طراحان وب هستید که با نگاه کردن می آموزید این پنل بهترین امکان را به شما برای یادگیری هر چه بهتر می دهد .برای یادگیری margin و padding صفحه، آشنایی با تقسیم بندی صفحه وب از این ابزار به راحتی می توانید استفاده کنید با دوبار کلیک کردن روی اعداد نمایش داده شده در این پنل شما می توانید آزمایش های خود را به صورت واقعی روی یک صفحه وب انجام دهید.

firebug-webtarget.ir

پنل DOM ، در واقع سند مدل شیء یک عنصر در صفحه وب را نمایش می دهد این بخش بیشتر برای کسانی که با جاوا اسکریپت یا اسکریپت های کلاینت ساید کار می کنند مناسب است.

اصلاح اچ تی ام ال اجرا شده

صد ها راه مدیریت اجرای اچ تی ام ال در جریان کاری، از طریق دسترسی به فایل ها روی سرور یا وقتی که با استفاده از سرور لوکال از وب سرور XAMPP یا wamp server استفاده می کنید، وجود دارد. من فکر می کنم که اکثر طراحان وب ترجیح می دهند که کد ها را از طریق ادیتور خود اجرا و ادیت نمایند زیرادر این حالت هر تغییر و ویرایش روی کد ها در فضای امن تری انجام می شود.

به هر حال، در زمانیکه که قصد بررسی سریع موردی در مرورگر خود در زمانی که به کد های اچ تی ام ال صفحه وب دسترسی ندارید یا پشت کامپیوتر خود نیستنید یا اینکه اصلا کد های این صفحه وب را شما ننوشته اید فایر باگ بسیار عالی و مفید عمل میکند.

در پنل نمایش ند های اچ تی ام ال فایر باگ ، می توانید با کلیک بر روی هر کدام از کد ها به آنها بپردازید و نتیجه نهائی را روی صفحه وب مشاهده کنید.
چند تا نکته دیگر در این رابطه لازم است که اضافه کنم:

افزودن / ویرایش کردن و حذف کردن تمام عناصر اچ تی ام ال

برای مثال در صورت حذف این div چه اتفاقی برای floats صفحه خواهد افتاد؟

افزودن / ویرایش و حذف ID وکلاس

برای مثال در صورت حذف این کلاس آیا خصوصیات ارائه شده با مشکل مواجه می شوند؟

قرار داد تکمیل کننده های بیشتر در عنوان ، متن ها و روی دکمه ها برای تست line brek یا شکست خطوط متنی

افزودن استایل های inline موقتی برای تست سریع با استفاده از خصوصیات html

مثلا آیا این هایپر لینک hyperlink با این استایل بهتر می شود style=”color:#00aeef” or style=”color:# 067fad”

فایر باگ کد هایی ویرایش شده را ذخیره نمی کند. در صورت کلیک یک لینک با رفرش کردن صفحه تغییرات انجام شده ناپدید می شوند. بنابر این بهتر است یک ادیتور متون مثل نت پد در کنار خود داشته باشید که کد های جدید و دستاورد های خود را در آن یادداشت کنید

اصلاح سی اس اس های اجرا شده

اصلاح سی اس اس محل آخرین اقدام برای طراحان وب است جائی که تغییرات اصلی انجام می شود. همانطور که گفته شد بررسی عناصر اچ تی ام ال در صفحه وب و ظاهر سلسله مراتبی آن در پنل نمایش ند ها انجام می شود. این استایل ها بر اساس حروف الفبا مرتب سازی شده است و توسط سلکتورها گروه سازی می شوند .

firebug-webtarget.ir

این سلکتورها در دستور سی اس اس های ارائه شده نمایان می شود سی اس اس های که در صفحه استایل شیت آخر نوشته شده اند بالا تر قرار می گیرند و آنهایی که در استایل شیت در ابتدای صفحه نوشته شد ه اند در پائین صفحه قرار می گیرند . مثال بالا در مورد وب سایت هایی دارای چندین صفحه استایل یا استایل شیت متفاوت است

فایر باگ عناصر اچ تی ام الی که فعال و در تغییرات موثر هستند را با کشیدن خط روی عناصر سی اس اسی که جایگزین آنها شده اند، مشخص می کند. اگر روی یکی از عناصر خطی کشیده شده بود این بدین معنی است که قانون دیگری در سی اس اس اولیت بیشتری نسبت به این قانون بر روی یک عنصر واحد داشته است .

firebug-webtarget.ir

چیز جالب که در پنل کناری بخش سی اس اس وجود دارد این است که این کد ها قابلیت ادیت شدن را دارند مثلا اگر می خواهید ببیند که وب سایت چه تغییری می کند اگر شما padding-top را به ۲۲px تغییر بدید فقط کافی روی عدد کلیک کنید و اون رو تغییر بدید یا حتی می تونید اون خصوصیت را ادیت کنید یا خصوصیت جدیدی به آن اضافه کنید

firebug-webtarget.ir

شما حتی می توانید خصوصیتی را غیر فعال کنید و ببیند در صورت عدم وجود این قانون صفحه وب به چه صورت تغییر میکند. این قابلیت برای پیدا کردن کد ها و خطوط غیر قابل استفاده در سی اس اس مفید می باشند و به شما در کشف علت استفاده خصوصیات مختلف کمک می کند.

firebug-webtarget.ir

وقتی شما در حال ادیت کردن کد های سی اس اس در پنل کناری سمت راست صفحه هستید با دکمه اینتر می توانید به سلول قابل ادیت بعدی بروید، با این دکمه می توانید برای ویرایش از یک خصوصیت به مقدار عددی آن و سپس به خصوصیت بعدی بروید. وقتی در آخرین خصوصیت یا مقدار یک بخش از یک سلکتور هستید دکمه اینتر ، یک خط جدیدی را برای افزودن خصوصیت و مقدار عددی جدید ارائه می کند

اگر شما تمایل دارید سی اس اس ی را به عنصری که مقدار عددی و کلاس ID ندارد( که در اینصورت در پنل سمت راست کناری دیده نخواهد شد) شما میتوانید یک استایل inline در پنل نمایش ند های سمت چپ با در پنل سی اس اس اضافه کنید

پنل سی اس اس یک نمایی را از کد های سی اس اس در استایل شیت های متعدد که شما به سایت اضافه کردید می دهد Source edit mode مد ادیت سورس یا منبع، شما به ویرایش مقادیر یا ارزشها می پردازید ( که شبیه پنل اچ تی ام ال سمت راست است که ما راجع به آن توضیح داده ایم) در این بخش می توانید آزادانه کد های خود را مانند وقتی که در ادیتور خود هستید تایپ کنید.

firebug-webtarget.ir

محدودیت ها و خصلت های فایر باگ

با توجه به اینکه فایر باگ داراری خصلت های خوب زیادی است اما سرعت انتشار امکانات جدید درون فایر فاکس دیوانه کننده است و چه کسی می تواند از این موضوع ایراد بگیرد؟

بگذارید راجع به محدودیت های فایر باگ هم صحبت کنیم:

عناصری در اچ تی ام ال که دارای خصوصیت هاور hover هستند

این سخت است که عناصری را که دارای سی اس اس هستند اشکال زدایی کرد دارای قوانین هاور و یا دارای هاور جاوا اسکریپتی هستند مانند منوهای دراپ دان چون وقتی موس رو از روی انها بر می داریم خصوصیتشون کاملا عوض می شوند موضوع این است که شما باید چاره ای بیابید که به بررسی عناصر تودر تو (که تا زمانی که روی عناصر اصلی کلیک نکرده اید پنهان هستند) ، از طریق بررسی عناصر اصلی بپردازید .

پیشنهاد این است که از طریق خصوصیات استایل اچ تی ام ال این عنصر را مجبور به باز شدن و دیده شدن آن نمائید البته ایده خوبی برای تست های روی وب سایت های اجرا شده و لایو نیست اما تا حدی موثر است.

در مثال زیر می خواهیم یکی از آیتم های لیست غیر منظم را از منوی flyout-menu بررسی و رفع عیب کنیم و جاوا اسکریپتی وجود دارد که باعث می شود منو زمانی که موس روی ان نیست پنهان شود

<div class="flyout-menu">
  <ul>
    <li>Menu item one</li>
    <li>Menu item two</li>
    <li>Menu item three</li>
  </ul></div>

می توانید استایل inline زیر را به div مورد نظر ( با توجه به طرز پنهان شدن div و نظر به اینکه شما می خواهید از دستکاری DOM جاوا اسکریپت بپرهیزید ) اضافه کنیم.

<div class="flyout-menu" style="display:block;">
  <ul>
    <li>Menu item one</li>
    <li>Menu item two</li>
    <li>Menu item three</li>
  </ul></div>
فایر باگ بعضی اوقات از کار می افتد

بعضی اوقات پنل سی اس اس قابل ارائه برای edit mode یا مد ویرایش نمی باشد و باعث ایجاد ارور می شود علت این موضوع هنوز واقعا مشخص نیست اما با بستن و باز کردن مجدد مرورگر دو باره به حالت عادی بر می گردد.

فایر فاکس با سایر مرور گر های دیگر فرق دارد

نکته جالب دیگر این است که فایر فاکس مرور گر عالی و در بعضی مواقع خیلی عالی، چون اشتباهات نشانه گذاری را خودش اصلاح می کند. برای مثال فرض کنید عنصر زیر به صورت یک عنصر از یک لیست است.

 <li><a href="home.htm">Home</li>

کسی فراموش کرده است که تگ a را ببندد بعضی از مرورگر ها ممکن است آن را به درستی ارائه نکند و صفحه شما به هم ریخته شود. ولی مرورگر فایر فاکس تگ a را در جای درست به خودش نمایش می دهد این یعنی شما چیز هایی را که در مرور گرهای دیگر مشکل دار می بیند در مرورگر فایر فاکس به درستی می بینید و این به این علت است که نحوه ارائه کردن این کد ها در مرور گر های مختلف متفاوت است.

این بدین معنی است که قسمتی از سایت شما که در فایر فاکس به درستی کار می کند ممکن است در مرور گر های دیگر به علت ارائه کد ها به شیوه های مختلف ، هنوز دارای اشکال باشد.

فایر باگ شما را از چک کردن ساختار وب سایت خودتان در مرورگر های دیگر حفظ نمی کند. ما ابزارهایی هم در مروگر های دیگر داریم که مشابه کار فایر باگ را انجام می دهد که به صورت زیر معرفی می شوند:

در Google Chrome, Safari, IE و Opera ابزار هایی مشابه فایر باگ موجود است که برای کسب اطلاعات بیشتر از این لینک ها استفاده کنید:



نویسنده / مترجم : مهدخت یافتیان

4 سال است به عنوان مدیر پروژه در زمینه طراحی وب سایت فعالیت دارم و مطالب و ترجمه های بسیاری در این رابطه تهیه کردم.


۷۶ دیدگاه برای این نوشته ثبت شده است


  1. علی اقدم
    19 نوامبر 2011

    به نظر من اگه این پست رو به صورت ویدئو آماده می کردید خیلی خیلی بهتر میشد و اینکه فراموش کردید firebug Lite رو معرفی کنید




    • امیر سروری
      19 نوامبر 2011

      علی اقدم @ مرسی علی جان از نظرت . لینک firebug Lite رو برای مرورگر Google Chrome اضافه کردم . در مورد ویدئو هم یک فکرایی هست اما تا پیاده شدنشون خوب طول می کشه …. ;-)




  2. آرمان
    19 نوامبر 2011

    استاد شما با برنامه ی کمتاسیا می تونید خیلی آسون بسازید یک فیلم زیبا و قشنگ با زوم اتوماتیک و می تونید خیلی کار ها بکنید به نظر من آسون تر از نوشتن بود
    فایر باگ لایت چیست؟؟؟
    راستی به نظر من یک مطلب خیلی قوی درباره ی طرز ساخت قالب وردپرس البته نه مثل بقیه سایت ها …. یک مطلبی که برای کسی باشه که هیچ چیز از وردپرس نمی دونه بزارید و تمام کارایی هاش و گذاشتن قسمت نظرات و اینا رو هم توش توضیح بدید عالی میشه و سایتتون که تک هست دیگه نمونه میشه




    • امیر سروری
      19 نوامبر 2011

      آرمان @ کار کردم آرمان جان با این نرم افزار اما خوب مشکلات دیگه ای مثا پهنای باند و سرعت اینترنت کاربران هم هست . امیدوارم یک روز بدون این محدودیت ها بتونم این ویدئو ها و بسازم . البته تو فکرش هستم اما هنوز به عمل نرسیده :-)




    • مجتبی
      2 آگوست 2012

      منم موافقم!
      در مورد ساخت قالب و پلاگین وردچرس هم صحبت کنید!




  3. پیام
    19 نوامبر 2011

    پست خوبی بود
    ممنون




  4. محسن
    19 نوامبر 2011

    جالب بود مخصوصا ادیت کردن و مشاهده نتیجه که در گزینه همراه Inspect Elemsts کروم وجود نداشت
    بازم ممنون




  5. iman
    19 نوامبر 2011

    سلام
    دوست گرامی ممنون از آموزشتون
    اگه امکانش هست آموزش و کد مربوط به افکت لوگوی سایتتون رو بفرمائید




  6. Alex
    20 نوامبر 2011

    واقعن از زحمتی که کشیدین ممنونم.
    پایدار باشید




  7. محسن
    20 نوامبر 2011

    سلام.

    مطلب خیلی کاربردی ای بود.

    مرسی.




  8. حامد
    22 نوامبر 2011

    امیر جان از وقتی که برای نوشتن این مطلب گذاشتی خیلی تشکر میکنم.
    آموزش خیلی خوبی بود.البته فایرباگ خیلی کاربردهای دیگه هم داره که برای بررسی درخواست های فرستاده شده به سرور و زمان پاسخ به هر درخواست و کلا زمان لود المانهای مختلف صفحه و… استفاده میشه. اینهم میتونه قسمت دیگه ای از این آموزش باشه.
    باز هم ممنون :)




  9. Amir
    24 نوامبر 2011

    مـــــــــــــــــــــــــرسی




  10. fati
    3 دسامبر 2011

    سلام
    من نمی دونم چطور می تونم کدنویسی هام را سطر به سطر چک کنم با همین برنامه(شکل ظاهری این برنامه عوض میشه. چطور؟؟؟؟؟)




  11. MOsi
    5 دسامبر 2011

    من که هرکاری میکنم نمیتونم این ور دانلود کنم . اگه میشه لینک دانلود بگین . مرسی .




  12. محسن
    11 دسامبر 2011

    سلام مجدد.

    اگر بخوایم یک وبسایت رو، کل کدهای HTML / CSS و همچنین فولدر images اون رو به طور کامل کپی کنیم و روی سیستم خودمون داشته باشیم؛ فایرباگ همچین امکانی رو داره؟

    یعنی در واقع کل قالب رو بتونیم جدا گانه داشته باشیم و خودمون جدای از سایت، کدهارو مثلا تو یه ویرایشگر باز کنیم و ببینیم.




  13. جابر
    9 ژانویه 2012

    سلام ممنون پست جالبی بود.خسته نباشی




  14. مهران
    10 فوریه 2012

    با عرض سلام.
    من با فایرباگ تازه آشنا شدم.
    میخواستم بدونم تغییراتی که اعمال کردم رو چه جوری میتونم تو قالب وردپرسم اعمال کنم؟
    دوتا سوال دیگه هم دارم:
    ۱- کچای وردپرس امکان ذخیره تغییرات اعمال شده هست؟
    ۲- تو فایرباگ تغییراتی که توی اچ تی ام ال اعمال میشه رو باید توی کدوم فایل قالبم بریزم؟




  15. RF
    24 فوریه 2012

    @محسن

    نه محسن جان، فایرباگ یه همچین قابلیتی رو نداره
    شما برای ذخیره یه صفحه با کلیه فایل های لینک شده به اون صفحه می تونید از افزونه “Save Complete” فایرفاکس استفاده کنید…

    https://addons.mozilla.org/en-us/firefox/addon/save-complete-4723/




  16. reza
    17 مارس 2012

    مطلب زیبایی بود .




  17. حامد
    26 مارس 2012

    هر کاری کردم نتونستم دانلود کنم




  18. محمد
    4 آوریل 2012

    بسیار عالی بود .
    از زحماتتون کمال تشکر را دارم
    فقط یه سوال
    سورس کدها مثل جاوا یا php رو چطور میشه دید
    ممنون می شم اگه راهی داشت برام ایمیل کنید




    • امیر سروری
      7 آوریل 2012

      محمد @ ممنون از لطفت . سورس کدهای جاوا و پی اچ پی به دلیل اینکه در سرور تحلیل و اجرا میشند قابل دیدن در مرورگر نیست و تنها راه دسترسی به فایل هست . ( حداقل این چیزیه که من میدونم :-) )




  19. محمد
    15 می 2012

    تا حالا به این دقت و کامل بودن آموزش فایرباگ جایی ندیده بودم
    سپاس فراوان




  20. وحید
    25 می 2012

    سلام میتونم با برنامه ی فایر باگ در بازی های انلاین مثلا چیتوزیا استفاده کنم منظورم استفاده از رنگ هایی که سایت نداره نیست منظورم اینکه بتونم امتیازو زیاد کنم من این کارو میکنم تغییر میکنه ولی ریفرش میکنم وبو به حالت اولیه بر میگرده باید چیکار کنم بمونه خواهش میکنم به این سوال پاسخ بدید لطفا جوابشو به ایمیلم بفرستید منتظرم تشکر




    • کوروش
      11 فوریه 2014

      داداش اگه فیهمیدی به ماهم ایمیل کن




  21. farah
    1 ژوئن 2012

    Mer30 az site khooOoOobetun




  22. boxfun
    15 ژوئن 2012

    ممنون لذت بردم خوشم اومد




  23. hosein
    17 ژوئن 2012

    با سلام می خواستم بدونم ns که در ابتدای بعضی از سایت ها می یاد نشانه امنیت هست یا چیز دیگری است، به عنوان مثال:

    http://www.ns.example.com




    • امیر سروری
      24 ژوئن 2012

      hosein @ معمولا ns1 , ns2 برای ساب دامین های شرکت های هاستینگ استفاده میشوند و اشاره به name server دارند که میتونید اطلاعات بیشتری رو در ویکیپدیا مطالعه کنید .

      name server




  24. سید
    2 آگوست 2012

    سلام

    این امکان به صورت پیشفرض در مرورگر Opera وجود دارد




  25. حسین
    28 آگوست 2012

    واقعا ممنون استفاده کردیم فقط میخواستم بدونم اشکالی نداره مطالبتون رو با ذکر منبع کپی برداری کنم




  26. صادق
    10 سپتامبر 2012

    این طور که تعریف میکنن خیلی سایت خوبیه ولی برای منی که زیاد چیزی نمیدونم جالب نیست میخواستم درباره ای این موضوع یکم کمک کنید تا منم یاد بگیرم ممنونم مرسی




  27. محمد
    24 سپتامبر 2012

    نصبش سخته




  28. bagher
    13 اکتبر 2012

    سلام من یه سوال از خدمتتون داشتم . من هیچ آشنایی با سی اس اس و طراحی سایت ندارم ولی برای اصلاح یک سری از مشکلات سایتم مجبور شدم دست به کار بشم . وقتی از فایرباگ برای سایتم استفاده میکنم آدرس بعضی ها رو میده مثلا template.css:line802 ولی بعضی مواردی رو که میخوام اصلاح کنم نوشته element.style . حالا من میخوام شما اینو به من بگید که اگه بخوام اینها رو اصلاح کنم چه کار باید بکنم ؟ یعنی آدرسشون کجاست ؟




    • امیر سروری
      13 اکتبر 2012

      سلام . دو حالت داره دوست عزیز . یا اینکه این سی اس اس ها به صورت این لاین در کد صفحه مورد نظر شما وجود داره و یا اینکه با استفاده از کد های سرور ساید و یا کلاینت ساید در موقع لود صفحه در کد شما اضافه میشه .
      به نظر من اول سورس صفحه رو نگاه کنید تا شاید راه حل رو پیدا کنید .
      موفق باشید .




  29. سایه
    14 اکتبر 2012

    افزونه خیلی کاربردی هست.وقتی نباشه واقعا احساس می کنم یه چیزی کمه.




  30. آموزش
    1 نوامبر 2012

    مطلب مفیدی بود وفکر کنم فایرفاکس در نسخه جدید دیگه از این افزونه بی نیاز باشه .با فشردن دکمه ctrl shift I
    و اجرای تغییرات در کد ها میتونیم تغییرات رو مشاهده کنیم.




  31. سیامک
    4 نوامبر 2012

    مطالب سایت شما خیلی خوب و عالیه و خیلی به درد من خورد مخصوصا مطلب firebug ممنون




  32. سامان
    10 نوامبر 2012

    من همیشه از فایربگ استفاده میکنم خیلی کار رو سریعتر کرده




  33. مرسده
    23 دسامبر 2012

    عالی بود




    • مهدخت یافتیان
      25 دسامبر 2012

      ممنون از توجهتون




  34. سالار
    7 ژانویه 2013

    من همون سوال وحیدو دارم میشه ؟؟؟اگه میشه پاسخشو بهم بگین و اموزششو




    • مهدخت یافتیان
      7 ژانویه 2013

      فایر باگ فقط برای پیدا کردن ایرادات و مشکلات هست نه تغییر عدد یا امتیازی این نغییرات باید توی کد اعمال بشه که از طریق فایر باگ نمیشه این کار را انجام داد . فایر باگ در واقع به طراحان کمک می کنه که مشکلات ظاهری یا کدی وب سایتشون را بفهمند و از طریق اصلاح آنها در کد مشکلات را برطرف کنند.




  35. سالار
    7 ژانویه 2013

    من مطمئنم میشه ولی نمیدونم چه جوری؟




  36. vahid
    7 ژانویه 2013

    سلام میتونم با برنامه ی فایر باگ در بازی های انلاین مثلا چیتوزیا استفاده کنم منظورم استفاده از رنگ هایی که سایت نداره نیست منظورم اینکه بتونم امتیازو زیاد کنم من این کارو میکنم تغییر میکنه ولی ریفرش میکنم وبو به حالت اولیه بر میگرده باید چیکار کنم بمونه خواهش میکنم به این سوال پاسخ بدید لطفا جوابشو به ایمیلم بفرستید منتظرم تشکر




    • امیر سروری
      9 ژانویه 2013

      افزونه فایرباگ و نمونه های مشابه در مرورگرهای دیگه فقط برای بررسی آنلاین کدهای html , css , javascript و .. استفاده میشه . تغییراتی که به صورت آنلاین انجام میشه مخصوصا در دیتا هایی که از سمت سرور داره خونده میشه ، مثل همون امتیازی که شما میخواین عوضش کنید ! قابل ذخیره نیستن ، این افزونه ها برای رفع ایرادات و همچنین تست موارد ظاهری در وب سایت به صورت انلاین مورد استفاده قرار می گیرند . موفق باشید .




  37. هما پورمحمدی
    20 فوریه 2013

    ممنون از مطلب خوبتون،
    پیشنهادم اینه که در مورد امکانات فایرباگ برای دیباگ کردن کد ها جاوااسکریپت و کنسول یافتن خطاها هم در یک مطلب دیگر بنویسید، چون توی مقالات وبی خیلی کمتر بهش پرداخته شده.




  38. گالری عکس
    16 مارس 2013

    ممنون … خیلی وقت بود دنبال چنین قابلیتی می گشتم .




  39. رضا
    17 مارس 2013

    من فایر باگ روی فایر فاکس ۴ نصب نمیشه چیکار کنم؟؟؟؟♥♥




  40. مسیحا
    5 آوریل 2013

    سلام دوستان من تازه با فایر باگ آشنا شدم
    فایل رو دانلود کردم ولی نمیتونم نصب کنم لطفاً کمک کنید




  41. رها امیر چرمهینی
    20 می 2013

    با سلام وعرض ادب
    وتشکر از بابت این پست مفید
    اگه ممکنه در مورد padding بیشتر صحبت کنید یا اگر قبلا پستی نوشتید لینک ان را بگذارید
    اینکه بطور کلی خاصیت padding در قالب بخصوص قالبهای responsive چیست و از کجا و با چه واحدی در هر اندازه محاسبه میشود ؟

    با تشکر وارزوی توفیق
    شاد و سربلند باشید




  42. طراحی سایت
    2 ژوئن 2013

    بسیار بهره بردیم




  43. محسن پناهی
    25 جولای 2013

    واقعا مفیدبود ممنون.




  44. محسن پناهی
    1 آگوست 2013

    پست خوبی بود ممنون از زحماتتون.




  45. amir
    3 سپتامبر 2013

    تو اونجایی که گفتی بعد رفرش تغیرات از بین میرود چکار باید کنی که تغییرات باقی بمانند اونجا گفتی با نوت پد چه جوری




  46. مهرداد
    24 اکتبر 2013

    سلام خسته نباشید

    ببخشید با فایرباگ چجوری میشه مکان یه کد یا متن رو پیدا کرد ؟

    مثلا من یه متنو میخواستم توی سایتم عوض کنم با فایرباگ بررسی کردم یه ای دی و یه کلس و دایو داد که هرچی گشتم توی هاست نتونستم پیدا کنم

    راهی هست ریشه ی فایلها رو بشه پیدا کرد؟
    امیدوارم درست منظورمو گفته باشم

    سپاس از سایت خوبتون
    موفق باشید




  47. Mostafa
    28 اکتبر 2013

    آقای سروری :
    یه دونه ای !




  48. کامیار
    17 ژانویه 2014

    سلام دوست گرامی من در واقع ی مشکلی اساسی با این پلاگین دارم اینکه وقتی کد را از پنجره firebug پیدا میکنم چطور میتوان مسیر و نام فایلی که کد مورد ظر در ان درج شده در هاست میزبان پیدا کنم ؟

    به فرض مثال : من کد زیر رو با استفاده از firebug جهت ویرایش پیدا کردم

    Menu item one
    Menu item two
    Menu item three

    مسیر فایل که این کد در آن سیو شده چطور میشه پیدا کرد ؟

    سپاس /




  49. احد
    4 فوریه 2014

    سلام

    میبخشید سوال داشتم

    من سی اس اس هارو بهد از تغییرات میتونم فایل اصلی اون رو در هاستم پیدا کنم و در فایل اصلی ادیت کنم

    اما فایل های اچ تی ام ال منو حسابی گیج کرده
    خوده تگ بادی رو نمیتونم پیدا کنم که کجاست ، همه چی پی اچ پی هستش و تگ های اصلی سایت رو نمیتونم پیدا کنم تگ بادی رو که همچی تو اون هستش رو نمیدونم کجاست

    ممنون میشم کمک کنید




  50. محسن
    17 آوریل 2014

    سلام.خیلی عالیه ولی نمیشه تغییرات فایر باگ رو ذخیره کنیم؟ اگه جواب بدین ممنون میشم




    • مهدخت یافتیان
      17 آوریل 2014

      خیر فایر باگ فقط به ما کمک می کنه که اصلاحات و تغییرات را روی کد ها به صورت ظاهری انجام بدیم .




  51. مهدي
    4 می 2014

    الان من روی یک قالب ورد پرس در فایر باگ میتونم تغییرات ببینم اما اینکه اون نوشته به کدوم فایل در روت سایت متصله چطور میشه فهمید و نوشته رو اصلاح کرد؟
    #فایرباگ




  52. shayan
    15 می 2014

    سلام من بلد نیستم کار کنم ینی میشه تا اونجا که خودمو تو چت روم مدیر میکنم ولی تا از فایر باگ خارج میشم باز تغییراتم دیده نمیشه ینی اتفاق نمیفته من چکار کنم دارم دیوونه میشم؟؟




  53. محمدرضا
    1 ژوئن 2014

    lمیشه با فیر باگ سایت بازی های آنلاین یا عددها رو هک کرد




  54. وثیقی دیزاین
    18 ژوئن 2014

    سلام دوست عزیز یه برنامه میشه معرفی کنید که کارش عین همین باشه به غیر از دریمویور




  55. علی
    2 جولای 2014

    سلام من در استفاده با فایر باگ مشکل دارم چون که وقتی تغییرات را انجام می دهم ذخیره نمی شود لطفا یکی از دوستان پاسخ دهد.




  56. پوریا
    18 جولای 2014

    سلام خیلی عالی بود.ممنون



  57. بسیار مطلب مفیدی بود
    باتشکر




  58. حسين
    24 سپتامبر 2014

    سلام عالی بود
    برای اطلاع بعضی از دوستان که در بالا نظر دادن میخواستم نکته ای را یاداور بشم
    فایر باگ فقط کدها و عدها و رنگ و … را در رایانه شما تا زمانی که رفرش نکردید تغیر میده و اون هم برای اینه که شما تغیرات انجام دهید مثلا اگه رنگ منوهای سایت تغیر دهید و با مشاهده اون بهترین گزینه انتخاب کنید و در قالب سایت خودتون تغیرات لحاظ کنید و فقط ابزاریست برای مدیران سایت تا سایتشون بهتر کنند
    پس با اون نمیتونید خودتون رو در چترومها مدیر کنید یا قالب سایت دیگران تغیر بدید و …




  59. حميد
    15 دسامبر 2014

    سلام ببخشید کمکی در زمینه باگ بازی آنلاین میخوام …
    با این نرم افزار میشه باگ بازی رو هم به دست آورد مثلا بازی آنلاینwww.kingsera.ir
    اگر راهی هست لطفا بهم کمک کنید




  60. طراحی سایت
    3 ژانویه 2015

    بسیار بسیار ممنون،

    عالی بود.

    متشکرم : )




  61. امیر حجازی
    9 می 2015

    سلام ببخشید
    به زبان ساده برام بگید برای ویرایش قالب در لوکال چطور میشه با فایر باگ آدرس متن را راحت در پوشه مورد نظر پیدا کرد ؟
    مثلا اگر فایل ویرایش شده که فرمودید در نوت پد سیو کنیم حالا کجا باید پیست کنیم ؟




  62. vahid
    17 دسامبر 2015

    برای ویرایش یک متن در لوکال چطور میشه با فایر باگ آدرس متن را راحت در پوشه و فایل مورد نظر پیدا کرد ؟




  63. baranbehfar
    29 مارس 2016

    با سلام و احترام :
    ضمن تبریک سال نو ,بابت مطالب مفید و آموزنده ی تان بی نهایت سپاسگذارم.
    در پناه حق سربلند باشید.




  64. maryam
    6 فوریه 2018

    سلام.
    من افزونه firebug رو نصب کردم ورژن ۲٫۰٫۱۹ اما سربرگ ها فرق داره html و css و javas نداره



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2021 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.