Кирилл Мыльников

Frontend разработчик ГК Юзтех

Всем привет, меня зовут Кирилл Мыльников, я frontend разработчик в ГК Юзтех. Сегодня хочу рассказать о расширениях для разработчиков в Google Chrome.

Все расширения, которые я сегодня рассмотрю, упростят вам работу в разработке, помогут повысить продуктивность, а также сэкономить время на отладку и поиск ошибок. Из этого списка расширений я использовал практически все. Если потратить немного времени на изучение и применение, то рабочий процесс станет гораздо эффективнее и приятнее. Я выделил ключевые особенности и недостатки некоторых из расширений. Если вы сможете дополнить меня в комментариях и рассказать о своём опыте использования или поделиться своими рекомендациями, буду только рад. Уверен, это будет полезной информацией для тех, кто только начинает работать в сфере ИТ и программирования, а также для состоявшихся специалистов.

Список обширный, но это не значит, что нужно использовать каждое расширение. Используйте только то, что пригодится вам в вашей области работы. Например, для чистки вёрстки достаточно расширений для работы с CSS. Итак, начнём.

BrowserStack

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

Ключевые особенности: 

1. Легко отслеживает тесты Selenium и JavaScript с помощью его инструментов отладки. Чтобы помочь быстро исправить ошибки, он предлагает видеозаписи и  автоматические снимки экранов с ошибками;

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

3. Позволяет инженерам QA тестировать приложения на предмет сбоев и сценариев на основе местоположения. Обеспечивает интеграцию со многими расширениями и подключенными модулями  включая Appium, Jenkins, Gradle и Visual Studio;

4. Agile-команды могут получать сведения производительности операций автоматизированного тестирования.

Минусы:

1. Во время использования данное расширение использует много ресурсов, что может привести к медленной работе;

2. Намного дороже, чем его альтернативы.

Clear Cache

Очистка браузера всегда важна для работы веб-разработчиков. Вы можете легко и быстро очистить кэш и другую информацию в браузере с помощью этого расширения. 

Ключевые особенности:

1. Простой дизайн;

2. Это бесплатно;

3. Офлайн-приложение;

4. Позволяет включать или отключать время и параметры очистки;

5. Есть сортировка вариантов очистки (drag).

Colorzilla

Colorzilla — популярное и широко используемое расширение среди разработчиков. Оно позволяет найти любой цвет пикселя на любом веб-сайте. А ещё оно позволяет вести индекс истории цвета, который вы недавно использовали.

Ключевые особенности:

1. При использовании инструмента “Пипетка”, вы сможете получить любой цвет на сайте;

2. Есть конечный генератор градиента CSS;

3. Доступна расширенная палитра цветов (аналог Photoshop);

4. Можно выбрать цвет на любом уровне  масштабирования.

CSSPeeper

CSSPeeper — это расширение для просмотра CSS кода. Дизайнеры могут сосредоточиться на дизайне и тратить как можно меньше времени на копание в коде, а разработчики могут не тратить время на изучение инспектора, чтобы узнать CSS свойства. При помощи этого расширения можно узнать какова высота строки, кнопки или размер шрифта на веб-сайте. Достаточно просто навести курсор на тот элемент, который вам нужен.

Ключевые особенности:

1. Обеспечивает интуитивное понятное управление;

2. Адаптация и кроссплатформенность под любой браузер.

Минусы:

1. Требует постоянных обновлений;

2. Для различных браузеров требуется своя адаптированная версия программы.

CSS Viewer

CSS Viewer — полезное расширение, позволяющее идентифицировать свойство CSS в любом месте, одним движением мыши. Расширение позволяет щелкнуть на любое изображение, кнопку, текст и т.д на веб странице, и вы можете увидеть мгновенно используемый код CSS. Появится  небольшое всплывающее окно с данными CSS,  из которых состоит элемент.

Ключевые особенности:

1. Настройки и плагины обеспечивают быстрой доступ;

2. Мгновенно увидеть CSS код;

3. Простая установка.

EditThisCookie

EditThisCookie — полезное расширение, представляющее собой мощный менеджер cookie. С его помощью можно легко удалять, добавлять, изменять, искать и блокировать cookie.

Ключевые особенности:

1. Редактирование файлов cookie;

2. Поиск файлов cookie;

3. Блокировка файлов cookie;

4. Экспорт/Импорт файлов cookie в формат JSON;

5. Импорт cookies.txt.

Ghostery

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

Ключевые особенности:

1. Позволяет блокировать скрипты, изображения, фреймы и встраиваемые объекты от компаний, которым вы не доверяете;

2. Гибкая настройка плагина;

3. Расширение для мобильных браузеров.

Минусы:

1. Не во всех браузерах работает, в этом случае можете использовать альтернативы.

GoFullPage

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

Ключевые особенности:

1. Быстро и просто, один щелчок для захвата всей веб-страницы;

2. Точность;

3. Скачать скриншот в формате JPG, PNG, PDF и т.д.

LambdaTest

Lambda Test позволяет разработчикам и тестировщикам выполнить кроссбраузерное тестирование в браузерах и операционных системах в интернете с различными расширениями экрана.

Ключевые особенности:

1. Проверка скорости отклика на всех размерах экрана;

2. Отладка в реальном времени;

3. Скриншоты и запись видео;

4. Чёткие и полезные журналы сеансов;

5. Интеллектуальное визуальное регрессионное тестирование;

6. Онлайн тестирование совместимости браузера;

7. LambdaTest может легко интегрироваться со следующими инструментами: Jira, Slack, Asana, Github, Gitlab, Bitbucket и т.д.

LightHouse

LightHouse — эффективное расширение, которое помогает разработчику улучшать качество веб-страниц. А ещё это расширение с исходным кодом, и разработчики смогут анализировать и решать SEO проблемы. Оно не только тестирует сайт и показывает оценку производительности, но ещё дает конкретные рекомендации: что можно улучшить, чтобы сделать сайт быстрее.

Ключевые особенности:

1. Простота использования. Если вы новичок в SEO, то это может сбить вас с толку. У большинства нет технических знаний  для применения сложных инструментов тестирования. LightHouse прост в использовании, анализ сайта выполняется одним нажатием;

2. Постоянное обновление. Данное расширение постоянное обновляется разработчиками Google.

Lorem Ipsum Generator

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

Ключевые особенности:

1. Обеспечивает интуитивное понятное управление;

2. Адаптация и кроссплатформенность под любой браузер.

Wappalyzer

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

Ключевые особенности:

1. Можете узнать технологический стек, который используется на веб-сайте мгновенно и бесплатно;

2. Интуитивное понятное управление.

WhatFont

WhatFont — простое, но элегантное расширение для Google Chrome. Данное расширение позволяет разработчикам быстро определить шрифты, используемые на определенном веб-сайте. Всё, что нужно, это навести курсором мыши на контент и вы увидите всплывающие окно с информацией о шрифтах.

Ключевые особенности:

1. Интуитивное понятное управление;

2. Адаптация и кроссплатформенность под любой браузер.

Window Resizer

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

Ключевые особенности:

1. Интуитивное понятное управление;

2. Адаптация и кроссплатформенность под любой браузер.

PerfectPixel

PerfectPixel позволяет “наложить” на веб-страницу полупрозрачную сетку и сверять по ней заданное расстояние. Можно накладывать и другие изображения, например первоначальный макет.

Ключевые особенности:

1. Интуитивное понятное управление;

2. Адаптация и кроссплатформенность под любой браузер.

Redux DevTools

Redux DevTools — специальное расширение для браузера, которое позволяет легко дебажить redux приложения.

Ключевые особенности:

1.  Легко и просто можно отслеживать экшены;

2.  Интуитивный и понятный  интерфейс;

3.  Можно посмотреть все хранилище приложения.

JsonDiscovery

JsonDiscovery — мощное расширение для просмотра JSON. Подобных расширений много, но фичи, которые у есть JsonDiscovery,  отличают его от других. Одни из них — это возможность написания запросов к JSON и его верхнеуровневого анализа. Для написания запросов используется язык Jora, а при написании запроса работает автодополнение.

Ключевые особенности:

1. Простое копирование JSON в буфер;

2. Настройка отображения данных из JSON;

3. Подсказки при написании запроса к JSON;

4. Сигнатура структуры JSON.

На этом всё, спасибо, что уделили время. Я поделился расширениями, которые пробовал сам, но если вы считаете, что я упустил какой-то инструмент, можете оставить комментарии. Заодно поделитесь своим опытом использования расширений: пробовали ли что-то из этого или есть что-то другое? Будет круто, если приложите скриншоты и расскажете о подробном использовании — обсудим в комментариях.