Инструменты разработки Redux и Vue, сканирование CSS, JSONView и др.
Этот пост изначально был опубликован на The Smart Coder.
Современные браузеры, такие как Google Chrome, не только обеспечивают удобство посещения веб-сайтов, но и предлагают веб-разработчикам отличные инструменты для создания потрясающих приложений. Можно выбрать одно из множества отличных расширений для браузера, поэтому я собрал некоторые из лучших, которые помогут разработчикам программного обеспечения работать более продуктивно, быстрее разрабатывать приложения или находить ошибки.
Инструменты разработки React / Redux и Vue
React.js и Vue.js - отличные JavaScript-фреймворки. Но чтобы использовать их всю мощь, вам следует использовать соответствующие расширения браузера.
React Developer Tools доступен для Google Chrome и расширяет ваши DevTools. Вы можете проверить компоненты, свойства и состояние React. Это действительно полезно для разработки React.js!
Если у вас когда-либо возникали проблемы с состоянием вашего приложения, вам на помощь приходит Redux DevTools. Его можно использовать с любым состоянием обработки архитектуры и особенно хорошо работает с Redux. Совет от профессионалов: активируйте расширение в Chrome и посетите такие сайты, как Airbnb.com. Airbnb использует React / Redux, и вы можете получить представление о том, как они структурируют свое управление состоянием, с помощью DevTools. Круто, правда?
Vue.js devtools - это Vue-эквивалент React Dev Tools. Он очень удобен для отладки компонентов Vue и незаменим для разработчиков Vue.
JSONView
Вы когда-нибудь задумывались, почему данные JSON выглядят так красиво в других браузерах, но не в вашем? Вероятно, это потому, что они используют расширение JSONView для Chrome. Он форматирует JSON очень красиво и почти мгновенно. Это определенно одно из моих любимых расширений!
Библиотечный сниффер
Library Sniffer - отличный инструмент, если вы хотите быстро узнать, на какой платформе или библиотеках работает веб-приложение. Например, вы можете определить, основан ли веб-сайт на WordPress или Drupal, или он был создан с помощью React.js, Vue.js или AngularJS…
Сканирование CSS 2.0
CSS Scan 2.0 - отличное расширение для проверки и копирования CSS путем наведения курсора на любой элемент. Но здесь есть одна оговорка: для этого требуется покупка лицензии.
Бесплатная альтернатива - CSS Peeper, которая позволяет вам сосредоточиться на разработке, а не копаться в коде.
Веб-разработчик
Расширение Web Developer добавляет в ваш браузер панель инструментов с различными инструментами разработчика. Вы можете отключить такие вещи, как JavaScript, изменить макет страницы, управлять изображениями и многое другое. Он доступен для Chrome и Firefox!
WhatFont
WhatFont - это довольно небольшое расширение, которое определяет шрифты, используемые на веб-сайтах для вас. Все, что вам нужно сделать, это включить расширение и навести курсор на текст. Это так просто! Вы можете получить его как для Chrome, так и для Firefox.
ColorZilla
ColorZilla доступна для Chrome и Firefox. Он предоставляет расширенную пипетку, палитру цветов, генератор градиентов и многое другое. Например, вы можете получить цвет любого пикселя на веб-сайте. Он также поставляется с историей цветов и программой просмотра палитры.
Спектр
Доступность - важный аспект современной веб-разработки, потому что многие люди испытывают затруднения при использовании веб-сайтов и приложений. Дефицит цветового зрения (ССЗ) - это пример, который влияет на способность людей различать определенные цвета. С помощью Спектрума вы можете тестировать сайты для людей с разными типами сердечно-сосудистых заболеваний.
Палитра сайта
Это расширение позволяет извлекать цвета с любого веб-сайта в виде цветовых палитр. Он поддерживает несколько генераторов палитр, создает ссылки для совместного использования, распечатывает или сохраняет палитры в формате PDF и многое другое.
Тоби
Toby был создан, чтобы помочь вам организовать вкладки браузера, чтобы вам не приходилось держать 1000 открытых одновременно. Это визуальное рабочее пространство, которое находится на каждой новой вкладке, и вы можете добавлять элементы, перетаскивая их. И это действительно помогает вам стать более продуктивным.
Тестер API Talend
Talend API Tester - отличное расширение, которое позволяет вам взаимодействовать с REST, SOAP и HTTP API изнутри вашего браузера - подобно Postman, например. Бесплатная версия обрабатывает все виды HTTP-запросов, а также поддерживает безопасность и аутентификацию.
Захват экрана всей страницы
Вы когда-нибудь хотели сделать снимок экрана всей текущей страницы без запроса каких-либо дополнительных разрешений? Тогда Захват экрана всей страницы может быть как раз подходящим расширением для вас. Просто нажмите на значок расширения или воспользуйтесь ярлыком и перенеситесь на новую вкладку, где вы сможете загрузить результат в виде изображения или PDF. Он работает даже с прокручиваемыми элементами или фреймами!
Это моя коллекция отличных расширений для браузера. Я очень надеюсь, что вы сможете использовать один или несколько из них в своей повседневной работе в качестве разработчика.
