Sokan Academy

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

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

در گذشته فایرفاکس (firefox) یکی از محبوترین مرورگر‌ها بین طراحان وب‌سایت به‌ شمار می‌آمد به طوری که امکاناتی نظیر مالتی‌تب، نمایش صحیح کدها و ... از جمله مواردی بودند که مرورگر فایرفاکس را به مرورگر پیش‌فرض هر برنامه نویسی تبدیل می‌نمود. اگرچه با گذشت زمان و به‌ ویژه پس از معرفی کروم توسط گوگل شرایط تغییر کرد، اما فایرفاکس همچنان یکی از قدرتمندترین مرورگرها، به‌ ویژه برای برنامه نویس های فرانت اند (Front End)، به‌ شمار می‌آید. در همین راستا، در این مقاله به بررسی برخی ابزارهای مفیدی خواهیم پرداخت که فایرفاکس در اختیار برنامه نویس ها قرار می‌دهد تا بتوانند کارهای خود را آسان‌تر و سریع‌تر انجام دهند (لازم به ذکر است که فایرفاکس نسخهٔ ویژه‌ای برای برنامه نویس های فرانت اند دارد تحت‌‌عنوان Firefox Developer Edition که بیشتر طراحان رابط کاربری حرفه‌ای از آن استفاده می‌کنند.)

می تونی خیلی سریع با کارراهه‌ی "برنامه نویس Front-End شو" وارد دنیای برنامه نویسی وب بشی!

1. خط‌کش‌های افقی و عمودی

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

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

2. اسکرین‌شات گرفتن از اجزای صفحه باتوجه به نام آن‌ها در CSS

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

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

screenshot --selector slide

3. پیدا کردن کد رنگ‌های به کار رفته در صفحه

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

4. مشاهدهٔ نمای صفحه‌ی وب به‌صورت سه‌بعدی

این امکان از نسخهٔ 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 به‌ صورت موقت

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

7. غیرفعال نمودن CSS صفحه

همانند قسمت قبل، برای بررسی عملکرد صفحه در حالتی که هر یک از فایل‌های CSS به هر دلیلی به‌ درستی لود نشوند، می‌توان از منوی کاربری مرورگر گزینهٔ Developer آیتم Style Editor را انتخاب نمود. با کلیک کردن بر روی آیکان چشم قرار گرفته در کنار نام هر یک از فایل‌های 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 استفاده نمایید.

این محتوا آموزنده بود؟
jsjavascriptجاوا اسکریپترابط کاربریفایرفاکسمرورگر

sokan-academy-footer-logo
کلیه حقوق مادی و معنوی این وب‌سایت متعلق به سکان آکادمی می باشد.