Заметки верстальщика: Полезные расширения Google Chrome в 2019 году

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


1. PerfectPixel


Использование PerfetPixel на сайте https://www.wrike.com/

Пример использования PerfetPixel при разработке новых блоков на www.wrike.com


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


Ссылка на установку расширения


2. Wappalyzer


Пример использования Wappalyzer

Пример использования Wappalyzer на сайте collaborate.wrike.com/2019/london


Всегда интересно какие инструменты и технологии используются на сайтах. Wappalyzer предоставляет информацию о CMS, JS фреймворках, CSS библиотеках, инструментах аналитики и многом другом. Представьте, что анимация на сайте – это бесплатная CSS библиотека, которую вы можете использовать у себя в проекте. Это позволит сократить время поиска необходимого инструмента и быть в курсе технологий, которые использует сайт.


Ссылка на установку расширения


3. HTML5 Outliner


Иерархия заголовков на странице habr

Иерархия заголовков на странице habr.com/ru/company/wrike


HTML 5 Outliner отображает список заголовков на странице сайта. Расширение помогает структурировать заголовки и определять нарушения в иерархии. Например, в теге section HTML 5 Outliner выводит предупреждение об отсутствии тега h2. Это один из быстрых и удобных способов, чтобы определить правильность использования заголовков в верстке.


Ссылка на установку расширения


4. Wireframify


Пример использования Wireframify

Пример использования Wireframify на сайте www.wrike.com


Дизайнеры проектируют сайты с помощью wireframe — это набор линий, блоков и подписей. Такой подход позволяет создавать архитектуру проекта с учетом отступов, размеров и расположения блоков на странице. Wireframify включает альтернативный вид сайта в виде wireframe, что позволит избежать ошибочного использования:


  • отрицательных margin;
  • выравнивания элементов с помощью padding;
  • добавления отступов с помощью CSS свойств left, right;

Ссылка на установку расширения


5. PageLiner


Пример использования PageLiner

Пример использования PageLiner на сайте www.wrike.com/apps


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


Ссылка на установку расширения


6. Web Developer


Пример использования web developer

Список возможностей web developer


Web Developer добавляет в браузер дополнительную панель с инструментами. Внутри нее находится 10 вкладок: Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize и Tools. Функционал расширения позволяет:


  • отключать CSS, JS и изображения;
  • проверять валидность HTML, CSS;
  • манипулировать CSS стилями;
  • тестировать HTML формы;
  • отображать необходимую информацию мета тегов;
  • изменять размер окна браузера;
  • очищать кэш;

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


Ссылка на установку расширения


7. User CSS


Расширение User CSS

Пример использования User CSS на сайте www.wrike.com/customers


Представим, что вы захотели поправить CSS прямо в браузере, но после этого пришлось перезапустить страницу. Все ваши наработки пропали, и приходится вносить изменения заново. Используйте User CSS, который будет сохранять ваши стили. Больше не нужно переживать по поводу того, что CSS исчезнет. Функциональность расширения позволит тестировать написанный CSS при переходе на другие страницы.


Ссылка на установку расширения


8. StyleURL


Пример использования StyleURL

Пример использования StyleURL на сайте Wrike www.wrike.com/customers


User CSS не заменит панель разработчика браузера. Если вы привыкли работать в devtools и при этом не хотите потерять изменения после обновления браузера – установите StyleURL. Расширение запомнит ваши изменения и предоставит возможность сохранить наработки в отдельном файле или загрузить в github gist.


Ссылка на установку расширения


9. Siteimprove Accessibility Checker


Пример использования Siteimprove Accessibility Checker

Пример использования Siteimprove Accessibility Checker на сайте www.wrike.com/newsroom


Siteimprove Accessibility Checker — это инструмент, который проверяет HTML на соответствие стандартам доступности, чтобы обеспечить доступ к контенту для всех. Расширение отображает ошибки с подробной информацией. В описании к ним вы можете найти сноски с WCAG 2 и прямые ссылки на подробные статьи о доступности.


Ссылка на установку расширения


10. Tabsbook


Tabsbook

Пример использования Tabsbook


Каждый работает с закладками по-своему. Есть те, кто сохраняет ссылки для быстрого доступа к сайтам, и те, кто используют закладки, чтобы хранить полезную информацию. С помощью Tabsbook можно превратить ваши закладки в базу знаний. Интерфейс расширения отображает древовидную структуру папок для удобной навигации по вашим закладкам. Все данные хранятся в облаке, что позволяет иметь доступ к ним с любого устройства.


Ссылка на установку расширения


Расширения будут полезны всем новичкам и опытным специалистам, которые о них не знали. Напишите в комментарии, какие расширения вы используете.


Больше полезных расширений для браузера можно найти по ссылкам Toп-10 плагинов Chrome для дизайнеров и Полезные расширения Google Chrome для программиста.

Wrike
114,23
Wrike делает совместную работу над проектами проще
Поделиться публикацией

Комментарии 16

  • НЛО прилетело и опубликовало эту надпись здесь
      0
      Звучит круто
      Расширение доступно в публичном доступе?
      • НЛО прилетело и опубликовало эту надпись здесь
      +2
      Спасибо за подборку, несколько расширений обязательно опробую.
        +2

        насчет хранения измененных файлов. overrides в devtools хрома недостаточно?


        и какое отношение последнее расширение имеет к верстке? скрытая реклама?

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

          2. Я посоветовал те, расширения, которые сам использую. Никакой рекламы тут нет )
            +1
            1. Workspace в chrome dev-tools settings позволяет использовать браузер как полноценное ide с изменением файлов на диске и т.д, а если добавить к этому флаг inspect, то можно отлаживать даже бэкенд (при условии что он на nodejs).
              0
              Но так нельзя сохранить изменения css на сторонних сайтах, если вдруг решил поправить под себя чужой ресурс.
          +1
          Отличная подборка! При таком количестве расширений в гугле сложно найти что-то полезное, видимо из-за этого самые ценные теряются. Поставила себе PageLiner, очень нравится, удобнее других линеечек, что стояли у меня до этого.
            +2
            В 2020 их полезность исчезнет?
              0
              Расширения могут стать неактуальными по разным причинам: они могут перестать поддерживаться разработчиками, в браузере добавилась новая фича. Например, сейчас легко и без использования расширения можно навести курсор на элемент, и увидеть его стили: habrastorage.org/webt/z6/9v/oz/z69vozne0f40crmphbxlgt3xglq.png
              Есть множество разнообразных расширений, которые так умеют, но ставить ради этого расширение не обязательно.

                +2
                Это может случиться в любое время.
                  0
                  Согласен. Веб очень быстро развивается.
              –1
              Из полезного нашел для себя тока PageLiner и то не работает через html нафиг оно нужно?
                –1
                Чтобы расширения работали для локальных файлов необходимо в настройках расширения включить флаг Allow access to file URLs.
                  –1
                  Вы используете какие либо расширения браузера для разработки?

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

                Самое читаемое