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

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


۶۸ دیدگاه CSS , HTML , اصول طراحی وب سایت شنبه, ۲۸م آبان , ۱۳۹۰ 43928 بازدید

راهنمای , آموزش استفاده از فایر باگ – 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
  • 2- قالب یا layout
  • 3- محاسبه computed
  • 4- سند مدل شیء یا 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. علی اقدم
    ۲۸ آبان ۱۳۹۰

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




    • امیر سروری
      ۲۸ آبان ۱۳۹۰

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




  2. آرمان
    ۲۸ آبان ۱۳۹۰

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




    • امیر سروری
      ۲۸ آبان ۱۳۹۰

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




    • مجتبی
      ۱۲ مرداد ۱۳۹۱

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




  3. پیام
    ۲۸ آبان ۱۳۹۰

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




  4. محسن
    ۲۸ آبان ۱۳۹۰

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




  5. iman
    ۲۸ آبان ۱۳۹۰

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




  6. Alex
    ۲۹ آبان ۱۳۹۰

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




  7. محسن
    ۲۹ آبان ۱۳۹۰

    سلام.

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

    مرسی.




  8. حامد
    ۱ آذر ۱۳۹۰

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




  9. Amir
    ۳ آذر ۱۳۹۰

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




  10. fati
    ۱۲ آذر ۱۳۹۰

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




  11. MOsi
    ۱۴ آذر ۱۳۹۰

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




  12. محسن
    ۲۰ آذر ۱۳۹۰

    سلام مجدد.

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

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




  13. جابر
    ۱۹ دی ۱۳۹۰

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




  14. مهران
    ۲۱ بهمن ۱۳۹۰

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




  15. RF
    ۵ اسفند ۱۳۹۰

    @محسن

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

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




  16. reza
    ۲۷ اسفند ۱۳۹۰

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




  17. حامد
    ۷ فروردین ۱۳۹۱

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




  18. محمد
    ۱۶ فروردین ۱۳۹۱

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




    • امیر سروری
      ۱۹ فروردین ۱۳۹۱

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




  19. محمد
    ۲۶ اردیبهشت ۱۳۹۱

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




  20. وحید
    ۵ خرداد ۱۳۹۱

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




    • کوروش
      ۲۲ بهمن ۱۳۹۲

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




  21. farah
    ۱۲ خرداد ۱۳۹۱

    Mer30 az site khooOoOobetun




  22. boxfun
    ۲۶ خرداد ۱۳۹۱

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




  23. hosein
    ۲۸ خرداد ۱۳۹۱

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

    http://www.ns.example.com




    • امیر سروری
      ۴ تیر ۱۳۹۱

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

      name server




  24. سید
    ۱۲ مرداد ۱۳۹۱

    سلام

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




  25. حسین
    ۷ شهریور ۱۳۹۱

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




  26. صادق
    ۲۰ شهریور ۱۳۹۱

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




  27. محمد
    ۳ مهر ۱۳۹۱

    نصبش سخته




  28. bagher
    ۲۲ مهر ۱۳۹۱

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




    • امیر سروری
      ۲۲ مهر ۱۳۹۱

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




  29. سایه
    ۲۳ مهر ۱۳۹۱

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




  30. آموزش
    ۱۱ آبان ۱۳۹۱

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




  31. سیامک
    ۱۴ آبان ۱۳۹۱

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




  32. سامان
    ۲۰ آبان ۱۳۹۱

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




  33. مرسده
    ۳ دی ۱۳۹۱

    عالی بود




    • مهدخت یافتیان
      ۵ دی ۱۳۹۱

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




  34. سالار
    ۱۸ دی ۱۳۹۱

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




    • مهدخت یافتیان
      ۱۸ دی ۱۳۹۱

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




  35. سالار
    ۱۸ دی ۱۳۹۱

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




  36. vahid
    ۱۸ دی ۱۳۹۱

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




    • امیر سروری
      ۲۰ دی ۱۳۹۱

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




  37. هما پورمحمدی
    ۲ اسفند ۱۳۹۱

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




  38. گالری عکس
    ۲۶ اسفند ۱۳۹۱

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




  39. رضا
    ۲۷ اسفند ۱۳۹۱

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




  40. مسیحا
    ۱۶ فروردین ۱۳۹۲

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




  41. رها امیر چرمهینی
    ۳۰ اردیبهشت ۱۳۹۲

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

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




  42. طراحی سایت
    ۱۲ خرداد ۱۳۹۲

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




  43. محسن پناهی
    ۳ مرداد ۱۳۹۲

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




  44. محسن پناهی
    ۱۰ مرداد ۱۳۹۲

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




  45. amir
    ۱۲ شهریور ۱۳۹۲

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




  46. مهرداد
    ۲ آبان ۱۳۹۲

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

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

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

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

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




  47. Mostafa
    ۶ آبان ۱۳۹۲

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




  48. کامیار
    ۲۷ دی ۱۳۹۲

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

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

    Menu item one
    Menu item two
    Menu item three

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

    سپاس /




  49. احد
    ۱۵ بهمن ۱۳۹۲

    سلام

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

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

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

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




  50. محسن
    ۲۸ فروردین ۱۳۹۳

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




    • مهدخت یافتیان
      ۲۸ فروردین ۱۳۹۳

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




  51. مهدی
    ۱۴ اردیبهشت ۱۳۹۳

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




  52. shayan
    ۲۵ اردیبهشت ۱۳۹۳

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




  53. محمدرضا
    ۱۱ خرداد ۱۳۹۳

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




  54. وثیقی دیزاین
    ۲۸ خرداد ۱۳۹۳

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




  55. علی
    ۱۱ تیر ۱۳۹۳

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




  56. پوریا
    ۲۷ تیر ۱۳۹۳

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



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





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

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

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

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

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



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2014 webtarget.ir

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