لطفا جاواسکریپت مرورگر خود را فعال سازید!

نحوه فعال سازی در کروم
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
نحوه فعال سازی در فایرفاکس
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
بررسی 10 ویژگی بسیار مفید فایرفاکس برای فرانت‌اند دولوپرها

بررسی 10 ویژگی بسیار مفید فایرفاکس برای فرانت‌اند دولوپرها

در گذشته فایرفاکس یکی از محبوترین مرورگر‌ها بین طراحان وب‌سایت به‌شمار می‌آمد؛ امکاناتی نظیر مالتی‌تب، نمایش صحیح کدها و ... از جمله مواردی بودند که مرورگر فایرفاکس را به مرورگر پیش‌فرض هر دولوپری تبدیل می‌نمود. اگرچه با گذشت زمان و به‌ویژه پس از معرفی کروم توسط گوگل شرایط تغییر کرد، اما فایرفاکس همچنان یکی از قدرتمندترین مرورگرها به‌ویژه برای دولوپرهای فرانت‌اند به‌شمار می‌آید. در این مقاله به بررسی 10 ابزار مفیدی که فایرفاکس در اختیار کاربران خود قرار می‌دهد تا بتوانند کارهای خود را آسان‌تر و سریع‌تر انجام دهند خواهیم پرداخت.

1. خط‌کش‌های افقی و عمودی
یکی از امکانات مفیدی که مرورگر فایرفاکس در ارتباط با بررسی اندازهٔ عناصر صفحه و چیدمان آن‌ها در اختیار دولوپرها می‌گذارد، خط‌کش‌های افقی و عمودی به‌صورت هم‌زمان می‌باشد؛ برای فعال کردن این ویژگی، از منوی کاربری مرورگر به‌ترتیب گزینه‌های Developer و سپس Developer Toolbar را انتخاب نمایید (همچنین می‌توانید از ترکیب کلیدهای میانبر Shift + F2 نیز استفاده نمایید). در کامندلاین ایجاد شده در قسمت پایین صفحه، عبارت Rulers را نوشته و اینتر کنید.

اگر می خواهید این ویژگی در پنجرهٔ Developer Tools نیز اضافه شود، پس از باز نمودن این قسمت (کلید F12 را فشار دهید) از بخش بالا و سمت راست آن، روی آیکون چرخ‌دنده (Toolbox Options) کلیک نمایید. از میان گزینه‌های قابل انتخاب، Toggle rulers for the page را فعال نمایید؛ پس از آن، آیکون خط‌کش به این پنجره اضافه شده و می‌توانید در صورت نیاز، به‌راحتی از آن استفاده نمایید.

2. اسکرین‌شات گرفتن از اجزای صفحه باتوجه به نام آن‌ها در CSS
اگرچه امکان گرفتن اسکرین‌شات از تمام صفحه و یا بخشی از آن پیش از این هم در فایرفاکس وجود داشت، اما بااستفاده از این ویژگی می‌توان با اشاره به نام تگ، آی‌دی و ... تنها از بخش کاملاً انتخاب شده‌ای از ساختار صفحه، تصویری را تهیه نمود؛ این ویژگی برای تهیهٔ تصاویر از قسمت‌هایی از صفحه که تنها در حالت قرار گرفتن نشانگر ماوس روی آن‌ها نمایش داده می‌شوند مثل زیرمنوها و ... بسیار کاربردی می‌باشد.

برای استفاده از این ویژگی، پس از قرار گرفتن در کامندلاین (در آیتم اول، نحوهٔ دسترسی به این قسمت توضیح داده شده است) می‌توانید به‌عنوان مثال از div‌ای که آی‌دی slide را دارد، تصویری را با دستور زیر تهیه نمایید:

screenshot --selector slide

3. پیدا کردن کد رنگ‌های به کار رفته در صفحه
ابزاری فوق‌العاده کاربردی برای دولوپرهای فرانت‌اند و گرافیست‌ها. با فعال کردن این ویژگی، به‌ترتیب از منوی کاربری مرورگر و گزینه‌های Developer و سپس Eyedropper، ذره‌بینی کوچک ایجاد می‌شود که با جابه‌جایی آن بر روی قسمت‌های مختلف صفحه، کدرنگ هر قسمت نشان داده می‌شود.

4. مشاهدهٔ نمای صفحه وب به‌صورت 3 بعدی
این امکان از نسخهٔ 47 مرورگر فایرفاکس به بعد، دیگر به‌صورت پیش‌فرض ارائه نمی‌شود و برای استفاده از آن می‌بایست افزونهٔ Tilt 3D را نصب نمایید. پس از نصب، گزینهٔ Tilt از منوی کاربری مرورگر و گزینهٔ Developer در دسترس کاربر بوده و همچنین می‌توان از کلیدهای میانبر Control + Shift + M در سیستم‌عامل ویندوز و Command + Shift + M در سیستم‌عامل مک نیز استفاده نمود. ارائهٔ نمایی ۳ بعدی از اجزای صفحه می‌تواند دید بسیار خوبی از ساختار مدل یک صفحه وب در اختیار دولوپرها قرار دهد.

5. بررسی دقیق‌تر استایل‌های CSS به‌ کار رفته در صفحه
بااستفاده از این ویژگی می‌توان به‌صورت دقیق و به‌همراه جزئیات، تأثیر و یا تداخل احتمالی کدهای CSS نوشته شده برای قسمت‌های مختلف صفحه را مشاهده نمود؛ برای کسب این اطلاعات، از پنجرهٔ Developer Tools (کلید میانبر F12) تب Inspector را انتخاب نمایید سپس از سمت راست تب Computed و Browser Styles را فعال نمایید (همچنین می‌توان از کلیدهای میانبر Ctrl + Shift + C نیز برای نمایش تب Inspector استفاده نمود).

6. غیرفعال نمودن JavaScript به‌صورت موقت
از جمله نکاتی که در طراحی یک صفحهٔ وب باید مدنظر قرار داد، طراحی آن به گونه‌ای است که درصورت غیرفعال شدن JavaScript به هر دلیلی، کمترین تغییر در عملکرد صفحه به‌وجود آید. برای آزمایش این شرایط، پس از باز نمودن پنجرهٔ Developer Tools (کلید F12 را فشار دهید)، از قسمت بالا و سمت راست آن روی آیکون چرخ‌دنده (Toolbox Options) کلیک نمایید. از میان گزینه‌های قابل‌انتخاب Disable JavaScript را فعال نمایید؛ لازم به ذکر است این ویژگی تنها در صفحهٔ موردنظر و آن‌هم به‌صورت موقت اعمال می‌شود.

7. غیرفعال نمودن CSS صفحه
همانند قسمت قبل، برای بررسی عملکرد صفحه در حالتی که هر یک از فایل‌های CSS به‌درستی لود نشوند، می‌توان از منوی کاربری مرورگر گزینهٔ Developer و سپس Style Editor را انتخاب نمود (Shift + F7). با کلیک کردن بر روی آیکن چشم در کنار نام هریک از فایل‌های CSS، نتیجهٔ تأثیر عدم ارتباط با آن فایل نشان داده می‌شود.

8. بررسی عملکرد صفحه در هنگام بارگذاری
سرعت بارگذاری یک صفحه ارتباط مستقیمی با نحوهٔ کدنویسی و ارتباط میان اجزای آن دارد؛ یکی از بهترین راه‌ها برای افزایش سرعت و کارایی صفحه، بررسی دقیق موارد موردنیازی هست که در هر بار بارگذاری صفحه فراخوانی می‌شوند. از منوی کاربری مرورگر، گزینهٔ Developer و سپس Network را انتخاب نمایید (همچنین می‌توانید از ترکیب کلیدهای Ctrl + Shift + Q نیز استفاده نمایید). صفحه را رفرش نمایید تا اطلاعات موردنیاز در قالب یک نمودار آبشاری بسیار دقیق به‌همراه جزئیات مفید نشان داده شوند.

9. مشاهدهٔ وب‌سایت در صفحه نمایش‌های دارای ابعاد گوناگون
اهمیت طراحی نسخهٔ ریسپانسیو یک صفحه امروزه دیگر نیاز به هیچ‌گونه توضیحی ندارد؛ برای مشاهدهٔ عملکرد صفحهٔ طراحی شده در ابعاد مختلف، از منوی کاربری مرورگر گزینهٔ Developer و سپس Responsive Design View را کلیک نمایید. 

10. اجرای کدهای JavaScript در صفحه
برای آزمایش سریع کدهای جاوااسکریپت و بررسی نتایج آن می‌توان به‌سادگی از ویژگی Scratchpad استفاده نمود؛ از منوی کاربری مرورگر، گزینهٔ Developer و سپس Scratchpad را کلیک نمایید (همچنین می‌توان از کلیدهای Shift + F4  نیز استفاده نمود). برای اضافه کردن این امکان به پنجرهٔ Developer Tools نیز پس از طی مراحل گفته شده در قسمت‌های قبل، گزینهٔ Scratchpad را فعال نمایید.

در این مقاله به بررسی 10 قابلیتی که بیشترین استفاده را توسط دولوپرهایی که از فایرفاکس استفاده می‌کنند پرداختیم؛ برای دریافت اطلاعات بیشتر و مشاهدهٔ لیست کامل این افزونه‌‌ها، می‌توانید از Firefox Developer Tools استفاده نمایید. همچنین فایرفاکس نسخه‌ای ویژه دارد برای دولوپرها تحت‌‌عنوان Firefox Developer Edition که تجربهٔ آن خالی از لطف نیست.

منبع


علی فلاحی