جعبه ابزاری قدرتمند برای طراحان و توسعه دهندگان وب

مرورگر فایرفاکس ، مرورگر محبوبیست که بعید به نظر میرسد کسی تا به حال اسمش را نشنیده باشد…
اگر هنوز به فکر استفاده از این مرورگر نیفتاده اید اکنون زمان مناسبی است ، مرورگر فایر فاکس را نصب کنید و از کاوش در وب لذت ببرید !
از خصوصیات بارز این مرورگر قدرتمند و دوست داشتنی توانایی اضافه نمودن قابلیتهای متنوع و مفید از طریق Pluginها یا افزودنی های این برنامه است که به علت منبع آزاد بودن این برنامه دست برنامه نویسان خوش ذوق و حرفه ای برای توسعه پلاگینها کاملا باز است .
امروز شما را با یکی از قدرتمندترین و مفیدترین پلاگینها یعنی جعبه ابزار طراحان وب آشنا میکنیم.
اگر شما طراح یا توسعه دهنده وب و یا علاقه مند و در حال یاد گیری طراحی وب هستید این پلاگین مرورگر شما را به مجهزترین ابزار برای بررسی و تحلیل صفحات وب تبدیل میکند و عملکرد شما را برای تعیین موقعیت عناصر و عیب یابی صفحات به شکل چشمگیری بهبود میبخشد.
این پلاگین را میتوانید از این آدرس دریافت کنید : http://webdeveloper.mozdev.org
و اما معرفی و نحوه استفاده از این پلاگین :

> اولین بخش جعبه ابزار با عنوان Disable به شما امکان از کار انداختن اجزای مختلف صفحه مانند کوکی ها ، عکسها و تصاویر متحرک ، اسکریپت های جاوا ، رنگهای استفاده شده در صفحه و در نهایت شیوه نامه صفحه را میدهد.
قطعا تجربه خوبیست اگر سایت خود را در حالتی بدون عکس یا بدون شیوه نامه مشاهده کنید و به این صورت نحوه نمایش سایت در مرورگرهایی منحصر به متن یا بدون پشتیبانی از CSS را در نظر داشته باشید.
> بخش بعد با عنوان CSS به شما امکان ویرایش و مشاهده فایل CSS مربوط به صفحه ، اضافه کردن شیوه نامه خود به صفحه و مشاهده اطلاعات مربوط به عناصر صفحه را میدهد.
یکی از موارد استفاده مورد Add User Style Sheet کنترل نمایش صفحه به صورت دلخواه شماست . اگر شما صفحه ای دارید که میخواهید به عنوان مثال آنرا در رسانه ای دیگری مانند چاپ یا ویدئو پروجکتور نمایش بدهید تغییر ظاهر و نمایش سایت با این گزینه بسیار مفید خواهد بود.
و آخرین گزینه این بخش یکی از بهترین و مفیدترین ابزارهاست. نمایش اطلاعات عناصر و شیوه های به کار رفته در صفحه . همانطور که در عکس مشاهده میکنید با انتخاب این گزینه و قرار دادن ماوس روی قسمتهای مختلف صفحه مسیر ساختاری به همراه شیوه های اعمال شده به عناصر را میتوانید در بخش نوار وضعیت یا Status Bar مشاهده کنید.

و همچنین میتوانید با کلیک کردن بر روی هر قسمت از صفحه اطلاعات و شیوه های مربوط به همان قسمت در فایل CSS را در صفحه ای جدا مشاهده کنید. این برای مشخص کردن یک عنصر خاص برای عیب یابی و یا هدف قرار دادن عنصر در CSS بسیار مفید است. و به شما کمک زیادی در انتخاب CSS Selector مناسب برای تحت تاثیر قرار دادن بخشی از صفحه میکند.
> بخش بعدی با عنوان Forms اطلاعات و ابزاری برای کار با فرمهای موجود در صفحه ارائه میکند. در این بخش میتوانید شیوه ارسال مطالب توسط فرم با به GET یا POST تغییر دهید ، جزئیات فرمها را در صفحه ببینید و مفیدترین قابلیت دیدن اطلاعات کلیه فرمهای موجود درصفحه به صورت جدولی است که در یک Tab جدا باز میشود و به شما جدولی از فرمها و عناصر مرتبط به فرمها و پارامترهای آنها ارائه میدهد که برای بررسی صحت و عملکرد فرمها بسیار مفید است.
> بخش بعدی Images میباشد که قابلیتهایی همچون نمایش ابعاد تصاویر ، نمایش آدرس تصویر ، پیدا کردن تصاویر منفصل ، پنهان کردن تصاویر ، نامرئی کردن تصاویر و … به شما میدهد.
از امکاناتی مانند پنهان کردن تصاویر میتوانید برای مشاهده نمونه سایت خود در مرورگرهایی بدون پشتیبانی از عکسها یا مرورگرهایی که تصاویر را غیر فعال کرده اند استفاده کنید. ( و اگر شما به صورت کاملا حرفه ای کار کرده باشید نباید تفاوتی بین پنهان کردن تصاویر و نامرئی کردن آنها وجود داشته باشد. )
گزینه مشخص کردن عکسهایی بدون ویژگی Alt یا با ویژگی Alt خالی کمک زیادی به تصحیح این تصاویر و در نتیجه آسانتر کردن روند معتبر سازی صفحه میکند و شما برای Validate کردن (تعیین اعتبار) صفحه از این لحاظ مشکلی نخواهید داشت.
> بخش Information اطلاعات کلی درباره اجزا و نحوه ترکیب صفحه به ما میدهد.
گزینه اول اطلاعاتی مربوط به Access Key ها که معمولا برای فرمها و لینکها استفاده میشود ارائه میکند . و در واقع Access Key مربوط به هر عنصر را در صورتی که تعریف شده باشد در کنار آن نمایش میدهد و لازم به ذکر است که Access Key ها از جمله گامهای موثری در جهت گسترش Accessibility در استانداردهای وب است.

گزینه بعدی اندازه ( طول و عرض ) عناصر بلوکی یا Block Level را نمایش میدهد که این اندازه بر حسب Pixel محاسبه میشود.
گزینه بعد ID و Class اختصاص داده شده به هر عنصر را در کنار آن نمایش میدهد . این گزینه برای پیگری محل اعمال کلاسها و نوع عناصر تحت تاثیر کمک میکند و انطباق کلاسها و ID ها در CSS را با کدهای نوشته شده ساده تر میکند.

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

گاهی اوقات ( و شاید اکثر اوقات ) تشخیص سطح عناصر مختلف خصوصا عناصر بلوکی از روی کدها و سورس صفحه کار مشکلی است و اگر از عناصر به صورت تو در تو (Nested) استفاده کرده باشید و یا حجم صفحه زیاد باشد این کار تقریبا غیر ممکن است ولی با استفاده از این گزینه به ساده ترین شکل ممکن میتوانید سطح و ترتیب قرار گیری عناصر را نسبت به یکدیگر مشخص کنید.
از امکانات دیگر این بخش میتوان به نمایش اطلاعات صفحه ، کوکی ها ، سرعت بارگذاری و نمایش صفحه و … اشاره کرد.
> در بخش Miscellaneous یا متفرقه ابزاری مانند امکان پاک کردن کش مربوط به صفحه و اطلاعات تعیین هویت ، نمایش Comment های موجود در سورس صفحه ، تغییر وضعیت لینکها به بازدید شده یا نشده و بزرگنمایی صفحه قرار دارد. و همچنین در انتهای لیست امکان دسترسی سریع به اسناد و مراجع W3C مرتبط به طراحی وب مانند XHTML ، CSS و … وجود دارد.
> بخش Outline به موقعیت یابی و بررسی ظاهری عناصر مختلف کمک زیادی میکند.
شما میتوانید عناصر بلوکی ، قابها (Frame) ، عناصر نا مناسب یا نا مانوس و سلولهای جداول را مشخص کنید.
اغلب از ترکیب گزینه نمایش عناصر بلوکی و نمایش ID ها و Classهای عناصر نتیجه خوبی برای بررسی عناصر صفحه میگیرید.
یکی از مفیدترین و کاربردی ترین گزینه های این بخش امکان مشخص کردن عناصر دلخواه ما با رنگ دلخواه است.
به فرض شما میخواهید تمامی لیستهای نامرتب (Unordered List) را داخل صفحه مشخص کنید ، به سادگی میتوانید در پنجره مورد نظر برای عنوان عنصر ul و برای رنگ ، رنگی دلخواه و متفاوت انتخاب کنید و تمامی لیستهای نامرتب صفحه را ببینید.

> بخش Resize امکان مشاهده ابعاد صفحه در حال حاضر را به صورت ابعاد پنجره و ابعاد مفید برای نمایس صفحه به ما میدهد. همچنین امکان تغییر اندازه پنجره به ابعاد مختلف مثل ۸۰۰ x 600 و حتی ابعاد دلخواه را میدهد.
این گزینه برای آزمایش نحوه نمایش سایت در اندازه های مختلف صفحه مناسب است .
> بخش آخر با عنوان Validation یا تایید اعتبار امکان بررسی معتبر بودن صفحه شما را از نظر استانداردهای گوناگونی مانند CSS ، XHTML ، لینکها ( از لحاظ شکسته نبودن ) ، WAI Accessibility و ۵۰۸ Accessibility برای استاندارد دسترس پذیری ایجاد میکند.

در بخش انتخابهای این پلاگین امکان اضافه کردن Validator دلخواه ، اندازه پیش فرض برای تغییر اندازه و تغییر رنگهای استفاده شد برای نمایش اطلاعات ، نحوه نمایش نمادهای بخشهای مختلف و … وجود دارد.

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

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