10 инструментов, которые упростят жизнь веб-разработчика

Как разработчик, я считаю, что расширения для браузера — отличный способ повысить свою продуктивность. За время работы я составил список инструментов в Chrome, которые оказались для меня чрезвычайно полезными.

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

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

Я использую расширение ColorZilla с момента его появления. Я веб-разработчик, которому временами приходится выполнять простые дизайнерские задачи. И этот инструмент помогает быстро определить значения цветов на странице сайта, что значительно экономит время.

С этим расширением найти элемент и его стили на странице стало намного проще, чем с помощью встроенного инструмента Inspect Element. Единственное, чего не хватает CSS Peeper, — функция редактирования страницы, которая есть у его стандартного аналога. Это позволило бы увидеть, какие изменения необходимо внести в серверную часть сайта.

Этот плагин позволяет переключаться на необходимые размеры окна браузера, имитируя разные разрешения экрана. Мне нравится, что я могу сам устанавливать значения и применять их ко всему окну или только к области просмотра. Наконец, это самый простой способ переключаться между широким окном браузера для электронных таблиц и узким — для обычного просмотра веб-страниц.

Clear Cache — мое любимое расширение для браузера Chrome. Я даже уже не использую кнопку перезагрузки по умолчанию или ее параметры: «принудительная перезагрузка» или «очистка кеша и принудительная перезагрузка». Плагин удаляет историю, куки, пароли и т. д. Он бесплатный и работает отлично. Мне больше не нужно копаться в настройках в поисках кнопки удаления истории или файлов cookie. Я могу сделать это в один клик.

Wappalyzer — это один из лучших инструментов в моем повседневном наборе. С его помощью можно узнать о веб-технологиях, используемых на сайте. Я легко могу сказать, когда приложение написано на AngularJS, React, Meteor, Backbone, FireBase и Django.

Этот плагин позволяет запускать пользовательские JavaScript и CSS на любых сайтах. Он также отлично подходит для создания прототипа собственного расширения или виджета для веб-сайтов. А еще с помощью него я легко могу отладить JavaScript на сайтах клиентов.

Это расширение для скриншотов и редактирования. Сделав снимок, вы можете добавлять на него графические элементы и текст. Однако плагин фиксирует только вкладку, браузер или приложение, активные в момент съемки. За исключением этого факта приложение довольно хорошо подходит для создания снимков экрана.

Если вы веб-дизайнер или программист, для вас этот инструмент станет бесценной находкой. Прошли те дни, когда надо было щелкать правой кнопкой мыши, чтобы просмотреть исходный код, а потом скроллить до нужной строчки. WhatFont показывает точную информацию о любом шрифте, на который вы наводите курсор: название, размер, цвет и т. д.

Раньше я сходил с ума, пытаясь подсчитать все свои рабочие часы. Теперь Toggl Track помогает мне отслеживать время, потраченное на различные задачи из Freshdesk, Todoist, Jira и Confluence, которые я использую каждый день.

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

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

В конце статьи хочу сказать, что еще больше полезной и нужной информации вы найдете в моём Telegram-канале. Подпишитесь, мне будет очень приятно.

Оригинал данной статьи на английском:Josef Cruz: I Wish I Had Known These Tools When I Started Coding