50 инструментов, способных немного облегчить жизнь разработчику
Servises | Браузеры | Разработка сайтов

50 инструментов, способных немного облегчить жизнь разработчику

В этой статье вы найдете пятьдесят с лишком приложений, расширений Chrome, веб-приложений и прочих вещей, которые, как мы надеемся, пригодятся вам в вашей программистской жизни.

1. Whatruns

Бесплатное расширение браузера, помогающее выяснять, какие технологии используются на любом сайте.

2. Sizzy

Браузер для разработчиков. Хватить зря терять время: ускорьте свой рабочий процесс.

3. Log Rocket

LogRocket позволяет вам воспроизвести, что пользователи делают на вашем сайте. Это помогает быстрее находить баги и решать возникающие проблемы.

4. Sentry

Платформа для мониторинга приложений Sentry поможет каждому разработчику диагностировать, исправить и оптимизировать производительность его кода.

5. Can I Use?

На сайте «Can I use» (англ. «Могу ли я использовать?») вы найдете постоянно обновляющиеся таблицы с указанием поддержки десктопных и мобильных браузеров для веб-технологий фронтенда.

6. Prettier

Инструмент форматирования кода. Поддерживает много языков, интегрируется в большинстве редакторов. Опций в Prettier немного, но инструмент очень полезный.

7. CSS Scan

https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-2605840841257248&output=html&h=60&slotname=5658181595&adk=745376171&adf=3196518661&pi=t.ma~as.5658181595&w=468&lmt=1603739211&psa=1&guci=2.2.0.0.2.2.0.0&format=468×60&url=https%3A%2F%2Ftechrocks.ru%2F2020%2F08%2F15%2F50-auxiliary-tools-for-developers%2F&flash=0&wgl=1&adsid=NT&tt_state=W3siaXNzdWVyT3JpZ2luIjoiaHR0cHM6Ly9hZHNlcnZpY2UuZ29vZ2xlLmNvbSIsInN0YXRlIjowfV0.&dt=1603739209176&bpp=62&bdt=4311&idt=1694&shv=r20201021&cbv=r20190131&ptt=9&saldr=aa&abxe=1&cookie=ID%3D61b4eff77d6b6886-220b19f30eb900fa%3AT%3D1603739209%3ART%3D1603739209%3AS%3DALNI_Ma6ngERg1eoookQ0AhmkEQAjE3ZcA&correlator=7265040123607&frm=20&pv=2&ga_vid=569936296.1603739208&ga_sid=1603739212&ga_hid=185499537&ga_fc=0&icsg=2252899302440956&dssz=53&mdo=0&mso=0&u_tz=180&u_his=2&u_java=0&u_h=768&u_w=1366&u_ah=728&u_aw=1366&u_cd=24&u_nplug=0&u_nmime=0&adx=441&ady=2249&biw=1349&bih=626&scr_x=0&scr_y=0&eid=21066700%2C21066793%2C20207459%2C21067213&oid=3&pvsid=3899552206331075&pem=821&rx=0&eae=0&fc=896&brdim=-8%2C-8%2C-8%2C-8%2C1366%2C0%2C1382%2C744%2C1366%2C626&vis=1&rsz=o%7C%7CopeEbr%7C&abl=CS&pfx=0&fu=8192&bc=31&ifi=1&uci=a!1&btvi=1&fsb=1&xpc=X06qrMcTiR&p=https%3A//techrocks.ru&dtd=2482

Попрощайтесь с «Inspect Element»: благодаря CSS Scan вы сможете просматривать CSS любого элемента непосредственно при наведении курсора и копировать все правила в один клик.

8. Bundlephobia

На этом сайте вы сможете найти стоимость добавления npm-пакетов в вашу сборку.

9. Cypress

Быстрое, простое и надежное тестирование для всего, что запускается в браузере.

10. Unminify

Бесплатный инструмент для «разминимизирования» (распаковки) JavaScript, CSS, HTML, XML и JSON-кода. Код при этом получается читаемым и красивым.

11. RegEx 101

Бесплатный отладчик регулярных выражений с пояснениями в режиме реального времени, системой обнаружения ошибок и подсветкой.

12. Clear Cache

Очищает ваш кэш и данные браузинга в один клик.

13. Window Resizer

Меняет размер окна браузера для моделирования различных разрешений экрана.

14. Wappalyzer

Wappalyzer это утилита для определения технологий, используемых на сайтах. С ее помощью можно определить систему управления контентом, платформу ecommerce, веб-фреймворки, программное обеспечение сервера, инструменты аналитики и многое другое из того, что используется на сайте.

15. MDN

Это сайт с документацией открытых веб-технологий, включая HTML, CSS и API веб-сайтов и прогрессивных веб-приложений.

16. Axe

Это стандарт в тестировании доступности. Им пользуются в Microsoft, Google и командах разработчиков по всему миру. В общем, Axe — ведущий набор инструментов, когда дело касается цифровой доступности.

17. Git Graph

Git Graph — это расширение для Visual Studio Code. С его помощью вы можете просматривать схему своего репозитория и с легкостью осуществлять различные действия с ним. При этом вид схемы можно настроить по своему вкусу!

18. Kontrast — WCAG Contrast Checker

Расширение браузера, позволяющее быстро проверить, насколько контрастен ваш текст или фон и насколько они соответствуют требованиям WCAG 2.1.

19. Octotree

Расширение браузера для более удобного просмотра кода на GitHub.

20. Postwoman

Веб-альтернатива Postman. Помогает быстрее создавать запросы, а значит — экономить ценное время для собственно разработки.

21. Responsively App

Создавайте отзывчивые веб-приложения в пять раз быстрее! Это просто мастхэв для всех фронтенд-разработчиков.

22. FullStory

Простая в использовании программа помогает определять, когда, где и каким образом трудности, испытываемые пользователем, влияют на удержание пользователя на сайте.

23. gitignore.io

Создает файлы .gitignore для ваших проектов.

24. 1Loc

206 любимых утилит JavaScript Utilities в одной строке кода!

25. Does it mutate?

26. Keycode

Нажмите любую клавишу и получите keycode события на JavaScript.

27. Worth It: Modern JS edition

Этот инструмент анализирует страницу, чтобы определить, насколько меньше JavaScript загружается в современных браузерах благодаря использованию шаблона module/nomodule.

28. npmview

Веб-приложение для просмотра файлов в npm-пакетах.

29. CSS to JS

Преобразует код в разных направлениях (CSS — в JS Objects и JSX props, JS Objects — в CSS и JSX props, JSX props — в CSS и JS Objects).

30. All Characters

Страница, где показаны всевозможные символы и их HTML-код.

31. Shape Catcher

Инструмент, помогающий искать символы Unicode. Например, с его помощью можно найти какой-нибудь символ, названия которого вы не знаете. Все, что вам нужно знать, это очертания этого символа!

32. Mocky

Не ждите, пока будет готов бэкенд! Генерируйте настраиваемые ответы API при помощи Mocky и начинайте работать над своим приложением безотлагательно.

33. Explain Shell

Введите строку скрипта (набор команд, например, найденный где-то в интернете), и получите пояснение каждого аргумента.

34. Base64 Image

Конвертируйте свои изображения в Base64.

35. Open Graph Check

Когда вы продвигаете свой контент в Facebook и прочих социальных сетях, «привлекательность для клика» имеет большое значение. Оптимизированное превью, заточенное на целевую аудиторию, заметно улучшает показатели кликов. Opengraphcheck.com поможет вам создать такое превью, причем совершенно бесплатно!

36. Brotli pro

Brotli — опенсорсный алгоритм сжатия от Google, выпущенный в 20015 году как альтернатива GZIP.

37. Responsive Breakpoints

На этом сайте можно легко генерировать оптимальные разрешения отзывчивых изображений.

38. Is my host fast yet?

Реальные задержки ответов сервера (Time to First Byte), с которыми сталкиваются реальные пользователи веба.

39. Check My Links

Этот инструмент исследует вашу страницу в поисках битых ссылок.

40. JSON Web Token

Шифрует или дешифрует JWT.

41. Git Kraken

Легендарный клиент Git для Windows, Mac и Linux.

42. BEM Cheat Sheet

Когда выбираешь подходящее имя для класса, легко впасть в отчаяние. Даже самые опытные CSS-разработчики не всегда могут сходу найти хорошее имя. Этот инструмент поможет вам не заблудиться в BEM: он предлагает имена для самых распространенных веб-компонентов.

43. Can I Email

44. CSS Grid Generator

Вы задаете количество столбцов и строк, а программа генерирует для вас CSS grid! А еще можно путем перетаскивания создавать div-ы внутри сетки.

45. Screen size map

Сайт, позволяющий наглядно увидеть разницу в размерах экранов разных устройств.

46. Who can use?

Этот сайт посвящен вопросам контрастности цветов (с позиции доступности для людей с различными проблемами со зрением).

47. Will it CORS?

Скажите этой волшебной CORS-машине, что вам нужно, и она скажет, что именно вам нужно сделать.

48. extractCSS

Извлечение CSS из HTML.

49. Metatags

При помощи Meta Tags вы можете редактировать свой контент и экспериментировать с ним, а в превью наблюдать за тем, как как ваша веб-страница будет выглядеть в Google, Facebook, Twitter и др.!

50. Shieldfy

Автоматически выявляет и исправляет проблемы безопасности и уязвимости в коде до того, как этот код попадет в продакшен.

51. YAML Checker

YAML Checker предоставляет простой и быстрый способ проверить YAML. Проверка происходит по мере ввода текста, а замечать ошибки помогает отличная подсветка синтаксиса.

52. Polypane

Все инструменты, необходимые для создания прекрасных отзывчивых и доступных сайтов и приложений — в одном браузере.

Источник: techrocks.ru

Похожие записи