آموزش فایرباگ - #1
نویسنده: احمد احمدی
تاریخ: ۱۳۹۱/۰۳/۳۱ ۲:۱۳
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
فایرباگ نام ابزاری است که همه ما نام آن را شنیده ایم یا با آن کار کرده ایم .
این ابزار امکانات و قابلیتهای فراوانی دارد که فراگیری آنها برای یک توسعه گر یا طراح وب سایت ضروری به نظر میرسد .
در سری مقالات آموزش فایرباگ ، با این ابزار محبوب و پرکاربرد بیشتر آشنا میشویم .
نصب و اجرای فایرباگ :
ابتدا وارد این صفحه شوید و ورژن مناسب مرورگرتان را نصب نمایید .
پس از نصب و دوباره باز کردن مرورگر ، میتوانید با کلیک کردن بروی آیکون فایرباگ یا فشردن کلید F12 ، فایرباگ را اجرا کنید .
تبها :
فایرباگ در حالت پیشفرض دارای 6 تب میباشد .
در قسمتهای بعدی هر تب را به صورت جداگانه بررسی میکنیم .
این ابزار امکانات و قابلیتهای فراوانی دارد که فراگیری آنها برای یک توسعه گر یا طراح وب سایت ضروری به نظر میرسد .
در سری مقالات آموزش فایرباگ ، با این ابزار محبوب و پرکاربرد بیشتر آشنا میشویم .
نصب و اجرای فایرباگ :
ابتدا وارد این صفحه شوید و ورژن مناسب مرورگرتان را نصب نمایید .
پس از نصب و دوباره باز کردن مرورگر ، میتوانید با کلیک کردن بروی آیکون فایرباگ یا فشردن کلید F12 ، فایرباگ را اجرا کنید .
تبها :
فایرباگ در حالت پیشفرض دارای 6 تب میباشد .
- Console : در این تب دو بخش وجود دارد :
در بخش Log هشدارها ، پیغامها ، درخواستهای XHR و ... نمایش داده میشوند .
بخش دیگر هم که در سمت راست قرار دارد ، مخصوص اجرای کدهای جاوا اسکریپت میباشد .
-
HTML : در این تب HTML صفحه را بصورت درختی و بصورت Live مشاهده میکنید .
Live بودن به این معنی است دقیقا چیزی را مشاهده میکنید که مرورگر در حال تفسیر هست و نه چیزی که به مرورگر ارسال شده .
همچنین در این تب میتوانید محتوای HTML قسمت Body صفحه را ویرایش کنید .
- CSS : در این تب میتوانید تعاریف CSS موجود در صفحه را مشاهده/ویرایش/حذف/فعال-غیرفعال نمایید .
همچنین میتوانید تمام فایلهای استایلی که به صفحه اضافه شده اند را مشاهده و تعیین کنید که تعاریف موجود در کدام فایلها در این محیط نمایش داده بشوند .
- Script : در این تب میتوانید به خطایابی کدهای جاوا اسکریپت بپردازید . همچنین مانند تب CSS میتوانید یکی از فایلهای اضافه شده به صفحه برای نمایش در این بخش ، چند مورد را انتخاب کنید .
- DOM : در این تب میتوانید ساختار DOM صفحه جاری را مشاهده نمایید .
- Net : در این تب میتوانید درخواست هایی که از صفحه ارسال میشوند را زیر نظر بگیرید .
این تب اطلاعات کاملی دربارهی هر درخواست ارائه میکند .
از جمله : نوع درخواست ( Post/Get ) ، حجم درخواست و پاسخ ، مدت زمان درخواست ، تعداد درخواستهای ارسال شده ، وضعیت درخواستها و ...
در قسمتهای بعدی هر تب را به صورت جداگانه بررسی میکنیم .
مطالب مشابه
-
مطالبآموزش فایرباگ - #2 - تب Consoleمطالبآموزش فایرباگ - #7 - CSS Panelمطالبآموزش فایرباگ - #6 - HTML Panel - Side Panelsمطالبآموزش فایرباگ - #5 - HTML Panelمطالبآموزش فایرباگ - #3 - JavaScript Developmentمطالبآموزش فایرباگ - #8 - Script Panelمطالبنوشتن افزونه برای مرورگرها: قسمت اول : کروممطالبایجاد alert,confirm,prompt هایی متفاوت با jQuery Impromptuمطالبآموزش فایرباگ - #10 - DOM Panelمطالبنوشتن افزونه برای مرورگرها: قسمت دوم : کروم
نظرات
- مهمان در ۱۳۹۱/۰۳/۳۱ ۲۱:۵۲ابزار بسیار کارامد و عالی هست. از این که آموزشش دادید. سپاس گذارم
- مهمان در ۱۳۹۱/۰۴/۰۲ ۱۰:۴۳
بسیار مقاله مفید و روانی بود با تشکر
- مهمان در ۱۳۹۱/۰۴/۰۹ ۲۳:۴۲بسیار عالی .مرسی
- مهمان در ۱۳۹۱/۱۲/۲۹ ۲۳:۲۲اخوی ،میشه یه خرده بیشتر درمورد Dom بگید ؟
من نمیدونم Dom چیه ؟ ممنون از مطلب مفیدتون.- شاهین کیاست در ۱۳۹۱/۱۲/۳۰ ۱:۱۰