میشه گفت افزونه Web Developer یکی از محبوب ترین افزونه های فایرفوکس در دسته افزونه های توسعه وب فایرفوکس محسوب میشه.
برای دانلود این افزونه از لینک روبرو استفاده کنید:
Web Developer
حالا سعی می کنم کمی نحوه استفاده از این افزونه رو توضیح بدم (گرچه خیلی ناقصه، به بزرگی خودتون ببخشید):
بعد از نصب این افزونه و شروع مجدد مرورگرتون یک نوار ابزار رو مشاهده می کنید. از سمت راست شروع میکنم:
Options : این منو بجز بخش های About و Help دارای یک بخش به نام Options هست که میتونید توش چیزایی مثل:
برای نمایش سورس کد صفحه از چه نرم افزاری استفاده شود. (به صورت پیشفرض از Source Viewer خود فایر فوکس استفاده میشه.)
بعد از Resize (یکی از کارهایی که این افزونه انجام میدهد) سایز صفحه چقدر باشد و ...
رو تعیین کنید.
View Source : گزینه اول از این منو View Source هستش که همون طور که از
اسمش پیداست برای دیدن سورس صفحه استفاده میشه. تفاوت View Generated
Source با View Sourse در حذف بعضی از قسمت های کد صفحه مثل
Document type Declaration
و از بین بردن فضاهای خالی در بعضی قسمت های کد هستش (اگه تفاوت دیگه ای
هم میبینید بگید خوشحال میشم بدونم). اگر توی کدتون از iframe استفاده کرده
باشید اون وقت View Frame Source میتونه به کارتون بیاد.
از گزینه آخر(Edit ...) هم اگر در بخش Options نرم افزار مناسبی رو تعیین کرده باشید میتونید برای ویرایش کدهای صفحه استفاده کنید.
Tools : از این منو میتونید برای اعتبار سنجی (validate) صفحه وب استفاده
کنید (CSS, HTML, Feed, ...). از Error Console هم میتونید برای دیدن
خطاهای موجود در صفحه مثل Drop شدن یک مقدار در CSS صفحه، خطا در یک متغییر
Javascript و ... استفاده کنید. از گزینه DOM Inspector هم میتونید برای
دیدن مدل DOM صفحه وب استفاده کنید.
Resize : برای دیدن اندازه صفحه(Display Window Size)، تغییر اندازه صفحه و
... کاربرد دارد. (یک مثال از کاربرد این بخش: وقتی شما یک صفحه وب طراحی
می کنید، خیلی مهمه که با تغییر اندازه صفحه یا کوچیک بزرگ کردن صفحه
محتویات صفحه شما از هم نپاشه، برای تست کردن چنین چیزی میشه از این گزینه
استفاده کرد).
Outline : برای مشخص شدن المنت های خاص دور آنها خط می کشد. به عنوان مثال
زمانی می خواهیم تمامی فریم های صفحه یا لینک های خارجی یا تمامی
Headingهای سایت مشخص شوند.
Miscellaneous : قابلیت های جالبی به ما میده. گزینه Display Ruler یک خطکش
در اختیار ما قرار می دهد. با استفاده از اون میتونیم هر کدوم از Element
های داخل صفحه رو اندازه بگیریم. فعال کردن Show Hidden Elements باعث میشه
تمامی المنت های مخفی قابل دیدن شوند. Show Comments توضیحات داخل کد رو
به ما نشون میده. میشه اطلاعات Private مثل کش و .. رو هم از طریق این منو
پاک کرد.
Information : برای نمایش اطلاعاتی مانند Idها و کلاس ها و Response Header های صفحه و تقدم tab ها استفاده می شود.
Images : گزینه اول از این منو برای غیر فعال کردن عکس ها(Disable Images).
گزینه بعدی برای نمایش مقدار خصیصه alt در تگ img مربوط به عکس
هاست(Display ALT Attributes). گزینه های بعدی نمایش سایز و مسیر عکس را
امکان پذیر میکند. این منو همچنین برای مخفی کردن و پیدا کردن عکس های آسیب
دیده هم کاربرد دارد.
Forms : برای نمایش جزئیات المان های موجود در یک فرم از Display Forms
Detail استفاده می کنیم. اگر در یک فیلد پسورد مقداری را وارد کنید (به
صورت دایره تو پر یا ستاره نمایش داده می شود) و سپس Show Password کنید
مقدار آن فیلد نمایش داده می شود. از Convert Form Method برای تغییر خصیصه
Method در فرم ها می توان استفاده کرد(GET یا POST). اگر از بین چند دکمه
رادیویی یکی را انتخاب کرده اید و بخواهید به حالت اول برگردید (حالتی که
هیچکدام انتخاب نشده اند) از Clear Radio Button استفاده کنید.
CSS : غیر فعال کردن Style ها. افزودن استایل. دیدن اطلاعات استایل ها و .. را ممکن می کند.
Coolies : غیر فعال کردن کوکی ها، پاک کردن کوکی های نشست(Clear Session
Cookies)، پاک کردن کوکی های دامنه ی خاص(Delete Domain Cookies)، پاک کردن
کوکی های مسیر خاص(Delete Path Cookies)، دیدن اطلاعات کوکی ها(View
Cookies Information)، و افزودن کوکی ها(Add-Cookie) را ممکن می کند.
ِDisable : میتونید از اون برای غیر فعال کردن کش(Disable Cache)،
جاوا(Disable Java)، جاوا اسکریپت(Disable Javascript)، انتقال دهنده های
متا(Disable Meta Redirects)، رنگ های صفحه(Disable Page Color)، مسدود
کننده پنجره های پاپ آپ(Disable Popup Blocker) و ... استفاده کنید.