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

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.

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

Комментарии (7)


  1. Lazytech
    01.11.2022 13:21
    +1

    LightHouse

    Идем по ссылке, и вот что там находим:

    Updated
    November 20, 2019

    А потом запускаем Chrome или другой браузер на движке Chromium, нажимаем F12 и переходим на вкладку Lighthouse. В смысле, ничего устанавливать не надо, поскольку инструмент Lighthouse есть "из коробки".

    Если я что-то не так понял, прошу пояснить.


  1. Lazytech
    01.11.2022 13:28
    +1

    В свою очередь, могу порекомендовать расширение Chrome extension source viewer:
    https://chrome.google.com/webstore/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin


    1. UseTech Автор
      01.11.2022 14:19
      +1

      Спасибо за рекомендацию! Можете рассказать подробнее читателям, для чего используете?


      1. Lazytech
        01.11.2022 14:24
        +1

        Заглянуть в исходники того или иного расширения без скачивания с оф. сайта.


  1. Lazytech
    01.11.2022 13:38

    Colorzilla

    Идем по ссылке, и вот что там находим:

    Updated
    December 24, 2016

    Как я и предполагал, в этом расширении используется Manifest V2. Если Google в следующем году все-таки откажется от дальнейшей поддержки V2 (у которого вроде бы уже статус "deprecated"), Colorzilla перестанет работать в Chrome.


  1. drinkmaker
    01.11.2022 14:06
    +1

    JsonDiscovery - крайне полезный. Благодарю.


    1. UseTech Автор
      01.11.2022 14:20
      +1

      Спасибо, что прочитали статью! Используете ещё какие-нибудь расширения, которых нет в списке?