مرورگرهای مدرنی مانند گوگل کروم علاوه بر ارائه‌ی تجربه‌ای بسیار خوب برای بازدیدکنندگان وبسایت‌ها، ابزارهای خوبی را نیز برای ساخت برنامه‌های عالی در اختیار توسعه‌دهندگان وب قرار می‌دهند. می‌توان از بین افزونه‌های مختلف موجود در مرورگر، چند مورد متفاوت را انتخاب کرد. بنابراین من در اینجا بهترین مواردی را آورده‌ام که به مهندسان نرم‌افزار کمک می‌کند تا بهره‌وری بیشتری داشته باشند، برنامه‌ها را با سرعت بیشتری توسعه دهند و اشکالات را سریعتر پیدا کنند.
فهرست افزونه‌های این مطلب
- 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 نیز کار می‌کند.
این مجموعه ای از افزونه‌های عالی مرورگر من است. واقعاً امیدوارم که بتوانید از یک یا چند مورد برای کارهای روزمره خود به عنوان توسعه‌دهنده استفاده کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید