پنج‌شنبه ۹ فروردین ۱۴۰۳ |  عضویت / ورود

معرفی ابزارهای پیشفرض برای توسعه وب در فایرفاکس


اگر از یک طراح وب سؤال کنید که کدام مرورگر مختص طراحان وب طراحی شده است، بلاشک خواهد گفت فایرفاکس!

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

اما در نسخه‌های جدید (10 به بالا)، فایرفاکس پا را فراتر گذاشته است و یک منو مختص توسعه دهندگان وب (Web Developerها) در منوی Tools با 6 ابزار کاربردی در نظر گرفته است:

http://tutorials.aftab.cc/web_designing/firefox_web_developer_tools.png

ابزارها و کاربرد مختصری از هر یک:

1- Web Console :‌ با استفاده از این ابزار می‌توانید (بعد از فعال کردن آن) یک صفحه را باز کنید تا لیست خطاها و مدت زمان دانلود هر عنصر و اطلاعاتی از این دست را به شما نمایش دهد. کاربرد دیگر آن این است که می‌توانید مستقیماً به عناصر صفحه از طریق دستورات جاوااسکریپت و CSS و غیره تغییراتی را اعمال کنید. مثلاً می‌توانید بنویسید:

document.body.style.backgroundImage = "none";

برای مشاهده نحوه استفاده از این ابزار، به این صفحه مراجعه کنید:

https://developer.mozilla.org/en/Using_the_Web_Console

2- Inspect : این ابزار که بسیار کاربردی است، امکان مشاهده مشخصات عناصر با کلیک روی آن‌ها را فراهم می‌کند. ضمن اینکه می‌توانید داخل همین پنل، تغییراتی در CSS صفحه ایجاد کنید و نتیجه را همانجا ببینید. (بدون نیاز به تغییر دادن کد تولید کننده صفحه که ممکن است به خاطر قرار داشتن روی هاست، تغییر آن مشکل یا غیرممکن باشد)

در مورد این ابزار، در این مطلب بیشتر توضیح داده‌ام:

Inspect Element - امکانی بسیار مفید برای طراحان وب در فایرفاکس 10

3- Scratchpad : این ابزار نیز یک ابزار جهت اجرای مستقیم جاوااسکریپت بر روی صفحه است. مثلاً در همین صفحه که در حال خواندن این مطلب هستید، این ابزار را باز کنید و کد زیر را در آن قرار داده و از منوی Execute، گزینه Run را انتخاب کنید:

function t(){
document.body.style.backgroundColor = "#FF0000";
}
t();

4- Style Editor : این ابزار را بیش از بقیه دوست دارم! خیلی راحت کدهای CSS را در این پنل بنویسید و همان لحظه نتیجه‌اش را روی صفحه ببینید.

5- Page Source : این از همان نسخه‌های اول وجود داشت و مشخص است که سورس صفحه را نمایش می‌دهد.

6- Error Console : این کنسول خطاها و هشدارهای مربوط به Javascript و CSS را لیست می‌کند و می‌تواند بسیار کاربردی باشد! نحوه استفاده از آن به این صورت است که ابتدا پس از باز کردن آن کنسول، روی Clear کلیک کنید تا ارورهای مربوط به صفحات باز پاک شود. حالا سایت یا صفحه مورد نظرتان را در یک تب باز کنید. خواهید دید که در این کنسول، تمام خطاها لیست خواهند شد.

موفق باشید؛
حمید رضا نیرومند

کلمات کلیدی: مرورگر، فایرفاکس، طراحی وب،معرفی ابزارهای فایرفاکس، کدنویسی، کدنویسی آسان با فایرفاکس، مرورگر محبوب طراحان صفحات وب، برنامه نویسی، برنامه نویسی تحت وب

[ارسال شده در مورخه : شنبه، 19 فروردین، 1391 توسط Hamid]
[ #Mozilla & Firefox]

نظرات طرح شده

نام: [ کاربر جدید ]
ایمیل:

نظر:


اجازه استفاده از تگهای HTML را ندارید


جمع عدد 14 با 12 را در كادر زیر وارد نمایید:
(این كار برای جلوگیری از فعالیت موتورهای اسپمر است)


* توجه: نظر شما بعد از بررسی، نمایش داده خواهد شد.