Chrome расширения для веб-разработки и работы с GitHub



    Привет всем. Хочу поделиться с вами некоторыми из расширений для Хрома, которые я использую при разработке, анализе сайтов, в работе с GitHub и просто в повседневной жизни. Уверен, что для большинства читателей, список этих расширений не будет открытием, но те, кто узнает о них впервые и установит, несомненно будут наслаждаться работой с новыми инструментами.

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

    Для работы с GitHub


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

    GitHub Repository Size — это удобный и простой плагин, отображающий как объем отдельного репозитория, так и размер каждого файла в нем.

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

    GitHub Hovercard обеспечивает мгновенный доступ к информации о пользователе, репозитории, вопросах и коммитах из любого места на сайте GitHub. Просто наведите курсор и просмотрите информацию.

    npmhub При просмотре репозитория на github.com, в котором есть файл package.json, это расширение будет анализировать зависимости в пакете и отображать ссылки с описанием для них чуть ниже файла README.

    github npm stats показывает статистику загрузок пакета на сайте NPM, если таковой есть.

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

    Isometric Contributions — это расширение не такое полезное как предыдущие, но весьма любопытное). Оно позволяет вам переключаться между обычной диаграммой вклада на GitHub и версией изометрического пиксельного искусства.

    Для работы с сайтами


    Eye Dropper — отличный инструмент для просмотра используемых цветов на сайтах и создания собственных палитр. Пользуюсь им практически каждый день)).

    Full Page Screen Capture. Представьте, что вы разработали лендинг на 3-5 экранов и не знаете, как сделать его полноценный скрин. Нажимать принт-скрин 5 раз и составлять в редакторе куски один под другим? Да ну! FPSC — это отличный инструмент, который делает снимок экрана текущей страницы целиком за несколько секунд. Очень полезен, если вам необходимо проверить оптимизацию сайта без загрузки специальных сервисов, а также, для полноценного захвата созданного вами сайта.

    WhatFont — с помощью этого расширения вы легко сможете узнать, какие используются шрифты на сайте, просто щелкнув на расширение и наведя курсор в нужное вам место. Это просто и элегантно. Отключается нажатием кнопки «Esc». Также показывает цвет текста, высоту, размер шрифта и другие параметры.

    PerfectPixel — это расширение поможет вам разрабатывать сайт с попиксельной точностью.

    CSS Peeper — это инструмент анализа CSS, специально разработанный для дизайнеров. Задача расширения — позволить дизайнерам сосредоточиться на дизайне и потратить как можно меньше времени на копание в коде. Просто попробуйте его в действии и сами все поймете.

    Для повседневной работы


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

    Ставил еще SEO-информер, но он какой-то тупенький). На этом у меня пока все. Надеюсь, этот обзор будет вам полезен.

    (п.с. если статья вам понравилась, поставьте плюсик в карму, а то голосовать не могу)
    Пишите в комментариях, какие расширения используете вы (или есть альтернатива лучше) при разработке, анализе сайтов или работе с Git?
    • +12
    • 6.5k
    • 5
    Share post

    Similar posts

    Comments 5

      0
      Chrome Devtools из коробки умеет скрин всей страницы.
          0
          Есть еще удобное решение для просмотра пуллреквестов на Гитхабе: chrome.google.com/webstore/detail/better-pull-request-for-g/nfhdjopbhlggibjlimhdbogflgmbiahc

          Может кто знает альтернативы?
            0
            Ещё могу посоветовать JsonView, который красиво форматирует выводимый JSON и AJAX Debugger, который выводит в консоль всю информацию о всех ajax-запросах (это удобнее, чем смотреть на вкладке «network»)
              0
              Google Переводчик — еще один инструмент, без которого не обходится почти ни один мой рабочий день. Это не страница, это расширение. С его помощью можно быстро перевести выделенный текст прямо на странице, не переходя на страничку переводчика.

              Пользуюсь GoldenDict, правда, это словарь, а не переводчик. В нём можно включить Scan Popup и тоже смотреть перевод выделенного слова, причём где угодно, не только в браузере.

              Only users with full accounts can post comments. Log in, please.