13 افزونه‌ی ضروری مرورگر برای برنامه‌نویسان وب

14 شهریور 1400, خواندن در 6 دقیقه

مرورگرهای مدرنی مانند گوگل کروم علاوه بر ارائه‌ی تجربه‌ای بسیار خوب برای بازدیدکنندگان وبسایت‌ها، ابزارهای خوبی را نیز برای ساخت برنامه‌های عالی در اختیار توسعه‌دهندگان وب قرار می‌دهند. می‌توان از بین افزونه‌های مختلف موجود در مرورگر، چند مورد متفاوت را انتخاب کرد. بنابراین من در اینجا بهترین مواردی را آورده‌ام که به مهندسان نرم‌افزار کمک می‌کند تا بهره‌وری بیشتری داشته باشند، برنامه‌ها را با سرعت بیشتری توسعه دهند و اشکالات را سریعتر پیدا کنند.

فهرست افزونه‌های این مطلب

  • React/Redux And Vue Dev Tools
  • JSONView
  • Library Sniffer
  • CSS Scan 2.0
  • Web Developer
  • WhatFont
  • ColorZilla
  • Spectrum
  • Site Palette
  • Toby
  • Talend API Tester
  • Full Page Screen Capture

React/Redux and Vue Dev Tools

React.js و Vue.js دو فریمورک عالی جاوااسکریپت هستند. اما برای اینکه از تمام قدرت آن‌ها استفاده کنید، باید افزونه‌های مرورگر مربوط به آن‌ها را نیز استفاده کنید.

React Developer Tools برای گوگل کروم در دسترس است و DevTools شما را گسترش می‌دهد. می‌توانید مولفه‌ها، propها و وضعیت React را به کمک آن بررسی کنید. این افزونه برای توسعه‌ی React.js واقعا مفید است.

اگر تا الان با وضعیت برنامه‌ی خود مشکل داشته‌اید، Redux DevTools به کمک شما آمده است. این افزونه با هر حالت معماری قابل استفاده است و به خوبی با Redux کار می‌کند. افزونه‌ی خود را در کروم فعال کنید و از وبسایت‌هایی مثل «Airbnb.com» دیدن کنید. این وبسایت از React و Redux استفاده می‌کند. به همین خاطر می‌توانید دانش کاملی را از چگونگی استفاده آن‌ها از DevTools برای ساختار مدیریت کسب کنید.

Vue.js DevTools نسخه معادل برای Vue است. برای خطایابی در مولفه‌های Vue بسیار کاربردی است و برای برنامه‌نویسان Vue نیز ضروری می‌باشد.

JSONView

 تا به حال فکر کرده‌اید که چرا داده‌های JSON در مرورگرهای دیگران بسیار زیباست اما در مرورگر شما ظاهر خوبی ندارد؟ احتمالاً بدین خاطر است که آن‌ها در کروم خود از افزونه JSONView استفاده می‌کنند. این افزونه JSON را بسیار زیبا و فوری قالب‌بندی می‌کند. قطعاً این افزونه یکی از افزونه‌های مورد علاقه‌ی من می‌باشد.

Library Sniffer

اگر می‌خواهید فوراً متوجه شوید که یک برنامه تحت وب از چه فریمورک یا کتابخانه‌ای استفاده می‌کند، Library Sniffer ابزاری عالی برای این کار است. به عنوان مثال می‌توانید تشخیص دهید که چه وبسایت‌هایی بر پایه WordPress یا Drupal و چه وبسایت‌هایی با کمک Vue.js، React.js یا AngularJS ساخته شده است.

CSS Scan 2.0

 این افزونه برای بازرسی و کپی کردن CSS عالی است. اما باید این موضوع را در نظر داشته باشید که برای استفاده از آن به خرید لایسنس احتیاج دارید.

Peeper CSS نیز یک جایگزین رایگان برای آن است که به شما این امکان را می‌دهد تا به جای جستجوی کد، بیشتر روی طراحی خود تمرکز کنید.

Web Developer

این افزونه یک نوار ابزار به مرورگر شما اضافه می‌کند و ابزارهای توسعه‌دهندگی مختلفی را ارائه می‌دهد. مثلا با کمک آن می‌توانید جاوااسکریپت را غیرفعال کنید، طرح صفحه را تغییر دهید، تصاویر را دستکاری کنید و کارهای زیاد دیگری را نیز انجام دهید. این افزونه برای کروم و فایرفاکس در دسترس است.

WhatFont

این یک افزونه کوچک است که فونت‌های استفاده شده در وبسایت‌ها را برایتان مشخص می‌کند. تنها کاری که باید انجام دهید این است که آن را فعال کرده و روی متن مورد نظر خود قرار بگیرید. استفاده از آن بسیار آسان و ساده است. می‌توانید آن را هم برای کروم و هم برای فایرفاکس دریافت کنید.

ColorZilla

این افزونه برای کروم و فایرفاکس در دسترس است. ColorZilla امکان استفاده از قابلیت‌های مختلفی مثل یک قطره چشمی پیشرفته، گزینش رنگ و غیره را برای شما فراهم می‌کند. به عنوان مثال می‌توانید رنگ هر پیکسل از وبسایت را بدست آورید. این افزونه همچنین با یک تاریخچه رنگ و نمایشگر پالت همراه می‌باشد.

Spectrum

قابلیت استفاده یکی از مهمترین جنبه‌های توسعه وب مدرن است چون خیلی از کاربران هنگام استفاده از وبسایت‌ها یا برنامه‌ها معلول هستند. کور رنگی مثالی است که بر توانایی افراد در تشخیص برخی از رنگ‌های خاص تاثیر می‌گذارد. با Spectrum می‌توانید وبسایت‌هایی را برای افرادی با انواع مختلف کور رنگی آزمایش کنید.

Site Palette

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

Toby

این افزونه برای کمک به شما در سازماندهی پنجره‌های مرورگرتان ساخته شده است. به شما کمک می‌کند تا دیگر مجبور نباشید همزمان 1000 پنجره را باز نگه دارید. این افزونه یک فضای کاری بصری است که در هر پنجره جدید وجود دارد. شما می‌توانید با کشیدن و رها کردن، مواردی را به آن اضافه کنید. این افزونه واقعاً به شما کمک می‌کند تا بهره وری بیشتری داشته باشید.

Talend API Tester

این افزونه‌ی عالی به شما این امکان را می‌دهد تا بتوانید از طریق مرورگر خود با SOAP، REST و HTTP API تعامل برقرار کنید. نسخه رایگان این افزونه به انواع درخواست‌های HTTP رسیدگی می‌کند. همچنین این ابزار از امنیت و احزار هویت نیز پشتیبانی خواهد کرد.

Full Page Screen Capture

آیا تا به حال شده که بخواهید کاملاً و بدون درخواست مجوزهای اضافی از صفحه‌ی فعلی خود اسکرین شات بگیرید؟ اگر اینطور است، یعنی احتمالا این افزونه مناسب شما خواهد بود. فقط روی آیکون افزونه کلیک کرده یا از کلیدهای میانبر مربوط به آن استفاده کنید. با این کار به یک پنجره جدید منتقل می‌شوید؛ جایی که می‌توانید نتیجه را به صورت تصویر یا PDF دانلود کنید. این افزونه حتی با عناصر پیمایشی و iframe نیز کار می‌کند.

این مجموعه ای از افزونه‌های عالی مرورگر من است. واقعاً امیدوارم که بتوانید از یک یا چند مورد برای کارهای روزمره خود به عنوان توسعه‌دهنده استفاده کنید.

منبع

چه امتیازی به این مقاله می دید؟
خیلی بد
بد
متوسط
خوب
عالی

دیدگاه‌ها و پرسش‌ها

برای ارسال دیدگاه لازم است، ابتدا وارد سایت شوید.

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

آفلاین
user-avatar
علیرضا داداشی @Pemi.razmi
دنبال کردن

گفتگو‌ برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن وارد شو