Возьми от Firefox все для веб-разработки

    =========

    Обновление от 24.03.13
    Neatbeans 5.3 бесплатная IDE подходящая для верстки умеет на лету отображать набранный html в хроме через свой плагин.
    Тоже самое умеет webstorm.
    Куча костылей описанных ниже уже не нужны!

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

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

    Со многими вы знакомы, а что есть еще, или вы твердо убеждены, что у вас всего пара рук?

    Начнем с самого известного:

    1.

    Говорят, если бы капитан мочевидность был веб-разработчиком, он бы всем советовал ставить Firebug. Это Джастин Бибер в мире попсы, это почти половина самого firefox.
    В представлениях не нуждается, самая дописанная и навороченная панель разработчика FireBug есть только в Firefox.



    Firebug
    addons.mozilla.org/ru/firefox/addon/firebug




    2. Почему браузер так не удобен для веб-разработки?


    Обновление от 18.02.15 — это сейчас вообще не нужно.

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



    Web Developer
    addons.mozilla.org/ru/firefox/addon/web-developer




    3. Эй, умник! Какой цвет ссылки для ховера посоветуешь?! — Ну… эээ…


    Обновление от 18.02.15 — это сейчас реализовано и в хроме.
    Внимание. на 26.06.2013 в php storm это реализовано чертовски удобно. При редактировании css cлева от номеров строк какого либо стиля с цветом, есть его превьюшка, щелчек по которой открывает палитру или доступ к уже использованным цветам.

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



    Firepicker
    thedarkone.github.com/firepicker

    Раньше была очень актуальна программа Stylizer
    Но firebug + firepicker по универсальности выигрывает с отрывом. Да и бесплатны они.
    В верстке очень мало реалтайм событий. На ctrl+s-> alt+tab-> f5 уже стали суставы срастаться.
    Именно такие реалтайм инструменты и будут востребованы в будущем, я думаю это очевидно.




    4. Ну и почему у тебя все криво сверстано! Где ты такой отступ увидел в макете, а?



    Гениально простым решением проверки качества верстки является Pixel perfect. Загружаете через него ваш jpg вариант дизайна, по которому шла верстка, он ложится на ваш сайт полупрозрачным слоем.
    Вот вы и сможете дать теперь объективную оценку верстке. Очень простой и удобный.



    PixelPerfect
    pixelperfectplugin.com




    5. Копипастишь CSS из фаербага в Notepad++? А не было желания нажать Save в Firebug?


    Обновление от 18.02.15 — это сейчас есть в хроме и называется workspaces
    developer.chrome.com/devtools/docs/workspaces

    Внимание. на 26.06.2013 в neat beans 5.3(free) или php storm это работает в реальном времени по мере набора.
    Это то, что я ждал годы.

    Следующие два плагина я отношу к спорным, но знать об их существовании я считаю нужным. В них что-то есть.
    Вариант А:

    — Правь CSS в FireBug
    — Жми Sync ( или alt+s)
    — Перезагрузи страницу и убедись что изменения применились!


    cssUpdater
    www.cssupdater.com
    Основан на идее code.google.com/p/css-x-fire

    Вариант Б:

    если cssUpdater заточен скорее под изменение файлов на локальной машине, между вашей IDE и браузером, то FireFile работает напрямую с css файлом сервера. Для этого он использует скрипт привязки, который нужно залить на ваш сервер. Плагин возможно сыроват, смотрите отзывы. В предыдущих версиях я попался на бету и потерял все комментарии в css. Но плагин гениален своим удобством.

    FireFile
    addons.mozilla.org/ru/firefox/addon/firefile

    Конечно, есть случаи, когда css составляется из разных файлов. Не забывайте бекапить css перед тестом. Все может быть.





    6. Вот у этих сайт быстро грузится, а у нас чего так...



    Гугловая приблуда. Отображает скорость загрузки каждого файла, количество запросов с ответами.
    Самое интересное, выдает советы по оптимизации и оценку по 100 бальной шкале. Дает объективное основание полагать, что вы не балбессделали для оптимизации все. Можно многое узнать из советов, предложенным этим плагином.


    Обновление от 18.02.15 — wordpress.org/plugins/youtube-speedload

    На сегодня остается проблемой большое количество роликов ютуб на одной странице. Page speed хоть и покажет все 100 баллов, но скорости из-за какой либо оптимизации не прибавится. Флеш все таки очень долго загружается. Решение, наверно, как в контактике: подкладывать скриншоты с плером а по щелчку уже подгружать сам контейнер. Ну или плеер на HTML5.

    PageSpeed
    developers.google.com/speed/pagespeed/download?hl=ru-RU

    yslow
    От Yahoo тоже есть разработка:
    addons.mozilla.org/ru/firefox/addon/yslow




    7. Не достаточно информации о cookie'ах в FireBug?


    На закладке «сеть» Firebug показывает все данные запросов браузера, в том числе и cookie.
    Но если вам нужно что-то большее, то



    FireCookie
    addons.mozilla.org/ru/firefox/addon/firecookie




    8. Почему так стилей-то много для одной страницы? Ёё


    Бывает правишь сайт, шаблон. Переделал много, а css-ка от старого с половиной стилей остались не тронутыми. Как их вычислить?



    CSS Usage
    addons.mozilla.org/ru/firefox/addon/css-usage




    Под конец домашнее задание: не берущаяся для верстки таблица.

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

    Задание:
    У нас есть таблица, которая должна тянуться по ширине и по высоте. Заморочка в том, что на краях таблицы находятся уникальные тени и края. Стоит ли овчинка выделки?



    Скачать PSD файл . Изменить расширение на zip.
    Поддержать автора
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

      +1
      О некоторых плагинах знал, но лень было ставить. Теперь у меня полный набор. Спасибо.
        +2
        Не понял прикола с домашним заданием. Сложно положить индивидуальный background в угловые ячейки?
          +2
          Она должна быть универсальной. Прописанной в css. Так-то собрать не сложно.
            +1
            А какая универсальность может быть у угловых ячеек? Они всегда будут в углах, они не будут меняться друг с другом. Может вы что-то не договариваете, но по тем условиям, что есть, ничего сложного не вижу.
              +2
              Как в css прописать стиль конкретно для угловых ячеек. Там нельзя этого определить. Либо стиль на все ячейки, либо ни на какие. в Css3 есть :last-child например, это же ближе к истине.
                +1
                Ах вы про это? А зачем такие загоны, я имел ввиду, что у каждой будет свой класс, неужели это сложно сделать.
                  +1
                  > А зачем такие загоны
                  Во! это и нужно было знать. Голосование вроде в посте проводить нельзя, но было бы интересно. Обычно дизайнеры видят больше, по своему избирательному вниманию и ценят мелочей больше. А если монитор с завышенным контрастом, то многие даже не поймут о чем идет беседа.
                    +2
                    Решение от дизайнера m_d:

                    jsfiddle.net/LCBFk/

                    Цитата:
                    >> Косяком является то, что нужно обернуть в div. Но если отказаться от теней, то получится вполне фэншуйный вариант, вместо div можно использовать псевдокласы ::after и ::before.

                    P.S. Мопед не мой, я просто разместил объяву.
                    +3
                    tr:first-child td:last-child { background: url()}
                    и варьяции
                      0
                      Там тени не на последних ячейках и подобное решение будет ограничивать минимальные размеры угловых, чтоб не срезался фон.
                      0
                      Полностью согласен. Даже если использовать свойства CSS3, не во всех браузерах данная комбинация будет работать. А с уникальными классами ячеек — наверняка.
                      +3
                      Почему бы не положить таблицу в div, которому задать тень в углу? Правда, вопрос фактуры самих ячеек не решается, но, возможно, удастся пошаманить с position и z-index?
                        +4
                        Multiple backgrounds для всей таблицы + css3pie для IE
                          +4
                          хардкорный вариант
                          кладём таблицу в 4 дива, у каждого в своём углу тень.
                            0
                            не кактит. там разный фон у заголовков и ячеек, размер заголовков зависит от текста
                  +2
                  Я бы ещё предложил Firecookie(удобная работа с печеньками), CSS Usage(неиспользуемы на странице css стили), User Agent Switcher(смена информации в заголовках о UserAgent) и Quick Locale Switcher(смена информаии о языковых установках).
                    0
                    спасибо, пойду добавлю.
                    +6
                    Набор стандартный, но пост очень круто оформили )
                      0
                      Разработчики со стажем находят для себя новое. Для меня он такой же стандартный, но он до сих пор ни кем не определен. Вот я и попробовал в этом все собрать, благо место позволяет.
                        +4
                        Мне вот интересно, пост так интенсивно сливают из-за того, что «набор стандартный»?

                        Блин, ну что за люди. Кто-то старался, написал немаленькую, нормально оформленную и полезную статью — скажите человеку спасибо, всеми возможными способами. Но нет, количество голосов «за» совсем немного превышает количество негативных оценок. WTF?

                        Продолжайте в том же духе, отбейте людям желание тратить время на написание статей. А потом поноем на сторонних ресурсах, что хабр не торт.
                          0
                          Ну во-первых это далеко не первый пост на Хабре про набор веб-девелопера.

                          А во-вторых скорее всего минусуют за «Павлика» :)
                            +1
                            «Во-вторых» легко решается открытым высказыванием своего мнения в комментариях к посту, или в приватной переписке с автором. Да, это чуть сложнее, чем ткнуть ↓, но если мы в будущем хотим видеть здесь интересные публикации — очевидно, что таки стоит в такие моменты чуть поднапрячься.

                            А «во-первых» как-то прошло мимо моего внимания, например. И я почти уверен, что не один такой здесь.
                            0
                            Сейчас пост читают все подряд, и кому не интересен — те минусуют. Думаю скоро подтянутся web-девелоперы и исправят ситуацию.
                              0
                              Впрочем уже исправили… Забыл посмотреть на время публикации и ее поточную оценку.
                                +1
                                Да, некоторым очень сложно заставить себя просто пройти мимо.

                                А ситуацию и правда исправили. Когда я написал первый свой комментарий, оценка была +5 / –4 (причем вместе с моим голосом, без него баланс был бы нулевым при 8 голосах).

                                Было бы оооочень интересно посмотреть статистику голосов по пользователям. Ну, например, «guessss_who за год поставил публикациям 500+ и 38–». У меня такое впечатление, что некоторые личности не отдают себе отчет в последствиях своих действий, когда голосуют за рейтинг публикаций или карму пользователей. (
                                  +3
                                  Анонимность, вместе с определенной властью и безответственностью — гремучая смесь :)
                                    +2
                                    Та я вообще не понимаю кто тут голосует — 300 коментариев из которых всего пару отрицательных, а карма всегда ниже нуля и медленно сползает всегда..)
                                      +3
                                      Нравится — голосуют за комментарий. Не нравится — плюют в душу карму. Элементарно, Ватсон!
                                      Сделать доброе дело — лень, а вот гадости всегда готовы.
                              0
                              * Комментарий выше не был адресован конкретно вам, это было только развитие риторического вопроса насчет рейтинга публикации.
                              0
                              jquery
                              $('tr:first th:first').css({});
                              и т.д., а за подборку спасибо!)
                                0
                                Не хочется скриптом но все равно спасибо за вариант)
                                  0
                                  Самый годный вариант
                                +5
                                Копипастишь CSS из фаербага в Notepad++?

                                Такой подход в принципе не годится, потому что Firebug выкусывает все не-файерфоксовские стили. Не говоря уже о том, что нарушает и пробелы, и последовательность объявлений правил. Как работа с прекцией стилей на Firefox — да, отлично работает.
                                  +2
                                  Чем можно посмотреть event-ы у элементов, если они добавляются с помощью JS после загрузки страницы?
                                    +2
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        +1
                                        Если это jQuery (и jQuery не древняя): $('#element').data('events')
                                        +2
                                        Оформление и стиль подачи порадовали конечно )

                                        Из того, что я бы еще добавил:
                                        Fireshot (или его аналог) — довольно часто надо делать скриншоты области экрана, чтобы показать или клиенту, или ПМу или еще кому
                                        Console² — Апгрейд к JS-консоли
                                        firefontfamily — дополнение к Firebug, подсветка акутального font-family
                                        dummy lipsum — быстрая генерация lorem ipsum текста
                                          +1
                                          Кстати, для скриншотов есть стандартная утилита в Windows 7 (я подозреваю, что не все сидят на винде, но многие). Называется Snipping Tool. Вызвать можно начав набирать в пуске в строке поиска.
                                            +1
                                            Да, полезная штука, но на сколько я помню, там можно только сохранить скриншот себе файлом или выслать кому-то на мыло. Если бы она хостила этот скриншот куда-нибудь в облако и давало на него короткую ссылку — цены бы не было.
                                              +1
                                              Могу предложить как вариант программку для винды jetscreenshot.com/demo-video.php.
                                              1. Делаем скриншон (програмка вешается на любой хоткей, например на клавишу принтскрин)
                                              2. Открывается рабочая область, где мы можем рисовать анотации (стрелочки всякие)
                                              3. Нажимаем расшарить и скриншот автоматом заливается на фтп сервер. (на какой указывается в настройках).
                                              4. Урл к скриншоту уже хранится в буфере обмена. Осталось только вставить его куда нужно.
                                              Очень удобно
                                                0
                                                Это делает кроссплатформенный сервис pix.am
                                                  0
                                                  Ну, это делает куча сторонних сервисов, просто было бы круто, если бы нативные средства ОСи могли бы так уметь )
                                                  а за ссылку спасибо, надо попробовать и этот
                                                    0
                                                    Удобная штука. Но 1 момент смущает: можно сделать как-нибудь, чтобы URL в буфер копировался, а не открывался в браузере?
                                                      0
                                                      Я лишь пользователь, этот вопрос нужно задать их разработчикам, которые, к слову, должны быть на хабре, если я не ошибаюсь.
                                                      И, кстати, в версии для Мака скриншот не открывается сразу, а появляется лишь уведомление, содержащее url, при клике на котором и происходит открытие.
                                                        0
                                                        Воспользуйтесь petromi.com
                                                        Там еще и простенький редактор есть. Впрочем, он почти везде есть.
                                                +1
                                                я бы таблицу саму трогал по-минимуму, а обернул бы ее в див, и там бы спозиционировал абсолютнно блоки с декорами краев.
                                                  +1
                                                  Добавлю еще MeasureIt — совершенно незаменимая вещь. Кстати, есть и для Хрома.
                                                    +1
                                                    можете удалять его так как есть аналог в веб девелопере.
                                                    «Панель Web Developer» -> «Разное» -> «Показать линейку»
                                                    +2
                                                    Есть более безопасный, но ограниченный способ передавать изменения стилей из фаербага: плагин для всех IDE от JetBrains — CSS-X-Fire. При изменении стилей в фаербаге в IDE появляется кнопочка для принятия изменений.
                                                      0
                                                      в статье есть ссылка на это)
                                                        +2
                                                        Простите, был слеп :)
                                                      +2
                                                      Я бы добавил ещё FireQuery для работающих с jQuery -_-
                                                        +2
                                                        А ещё Firebug Autocompleter и FireStorage.
                                                        +2
                                                        Наш верстальщик предлагает такое решение
                                                        «обернуть таблицу в div и в ней с помощью css3 разместить сразу 4 фоновых изображений с соответствующим позиционированием в процентах (css3 поддерживает множество фоновых картинок сразу в одном диве) плюс также и общий цвет фона.»
                                                        +1
                                                        Для работающих с ExtJS есть прекрасное расширение Illuminations: отображает объекты ExtJS, со всеми их атрибутами, методами, событиями и т.д.
                                                          +6
                                                          0
                                                          >Это Джастин Бибер в мире попсы

                                                          Кто это? Википедия подсказывает, что это какой-то подросток, взятый с ютуба в 2008-м. Куча каких-то немузыкальных наград. Он петь-то умеет или только улыбается на камеру?
                                                            0
                                                            Он сейчас как Ранетки в остальном мире.
                                                              +1
                                                              Дубль два — кто такие Ранетки?

                                                              Телевизор не смотрю, сорри :-) А по радио такого почему-то не крутят. Хотя я не ограничиваюсь какими-то радиостанциями, а скачу по FM-диапазону туда-сюда, избегая рекламы и диджейской болтовни. Но ни Ранеток, ни этого Бибера не слышал — возможно, повезло?

                                                              Ладно, извиняйте за затянувшийся оффтопик, просто фраза из поста зацепила внимание.
                                                                0
                                                                Странный ты.
                                                                  +1
                                                                  Завидую. Мне про Ранеток рассказал знакомый подросток, который их слышал у соседей через стену. Мне хватило; сделайте меня расслышать это.
                                                              +1
                                                              Помимо Firepicker и Stylizer есть еще, как минимум, ColorZilla. Удобная такая пипетка.

                                                              Кстати, в том же духе, еще можно размеры линейкой замерять — MeasureIt.
                                                                +1
                                                                После того, как стал на винде пользоваться PickPick для снятия скриншотов — удалил эти плагины
                                                                в PickPick они встроены и пользоватся можно ими не только в браузере
                                                                0
                                                                А разве вкладка Net в Firebug не показывает скорость загрузки и кол-во запросов? Советов правда не выдаёт.
                                                                  +1
                                                                  я бы добавил ещё
                                                                  Live HTTP Headers — просмотр HTTP заголовков
                                                                    +2
                                                                    так в firebug закладка «сеть», помоему полностью поглощает возможностями.
                                                                    +1
                                                                    Ещё есть хорошие линейки foxguide
                                                                      +1
                                                                      как раз уже наполовину подготовил пост про связку оного с еще одним плагином, тут не описанным
                                                                      +1
                                                                      Еще полезная штука это ShowIP. Когда рабочих проектов много и они порой размазаны по ряде компов на доменах, которые не всегда корректно резолвятся или же что-то даже крутиться локально, нужно быть уверенным, что смотришь именно тут, что правишь в редакторе.
                                                                        +1
                                                                        Firebug это нативно поддерживает на вкладке «Сеть» с августа 2011. (Открыть нужный столбец в настройках.)
                                                                        +4
                                                                        Я очень люблю и постоянно использую расширение CSS Reloader, у которого только одна функция перезагружать CSS сайта без перезагрузки страницы. Очень удобно перезагружать только CSS когда
                                                                        1) вся страница долго грузится (ну и вообще CSS грузится почти всегда намного быстрее чем вся страница).
                                                                        2) когда менялся HTML (DOM) в Firebug, и нажатие F5 бы удалило эти изменения.
                                                                        3) когда нужно потестировать какое-то состояние страницы, к которому нужно дойти за несколько кликов после F5 (типа открытый список, форма с ошибками, модальное окно).
                                                                          +1
                                                                          Да, забыл еще 2 полезных расшрирения: JSONView (JSON ответ от сервера будет не только раскрашен, но можно и сворачивать/разворачивать вложенные структуры) и User Agent Switcher для быстрого переключения user agent (больше нужен что бы посмотреть как реагирует сервер на разные агенты, в духе вывода надписи «обновите браузер»).
                                                                            0
                                                                            Обидно за сравнение бибера с Firebug.
                                                                              +1
                                                                              еще есть хорошая штука livereload, полезна при верстке для автоматической перезагрузки страницы в браузере после изменения файлов, к аддону FF нужно еще запустить сам gem livereload в корне сайта, есть модули для популярных цмс, для друпал точно есть, с удовольствием им пользуюсь.
                                                                                +1
                                                                                до него, кстати, использовал подобную штуку moz_repl, тоже гем+аддон, но он не прижился, надо было шорткат в редакторе шмякать чтоб в браузере файлы подгрузить
                                                                                  0
                                                                                  У меня в хроме работает, а в файрфоксе последнем нет. Должно?
                                                                                    0
                                                                                    должно
                                                                                      0
                                                                                      Спасибо, попробую посмотреть в чем может быть дело
                                                                                  0
                                                                                  Из всего вышеперечисленного я не пользовался только Firepicker'ом. Colorzilla как-то всегда устраивала, сейчас поставлю и сравню.
                                                                                    +1
                                                                                    В моей коробочке еще Yslow и HTML Validator

                                                                                    Последний правда пока как-то не так хорош для HTML5, как для более старых версий
                                                                                      0
                                                                                      он еще не слабо тормозить должен браузер.
                                                                                      0
                                                                                      Мой вариант: http://jsfiddle.net/z8TNu/

                                                                                      Не удалось избавиться от обертки вокруг таблицы :(, но нужен только 1 дополнительный div.
                                                                                        0
                                                                                        Кажется, вы куда-то не туда дали ссылку.
                                                                                          0
                                                                                          Ох, забыл сохранится :( И вариант только на домашней системе.
                                                                                            +1
                                                                                            Вариант без дополнительных элементов. Только таблица:

                                                                                            http://jsfiddle.net/p3nej/5/

                                                                                            Минус — добавляется граница, которую можно убрать отрицательным отступом.
                                                                                        0
                                                                                        огромное спасибо за cssUpdater
                                                                                          0
                                                                                          web developer использую года три точно. Без него было бы туго.
                                                                                            +1
                                                                                            Да как же я раньше жил без половины этих аддонов?! Автору большое спасибо!
                                                                                              0
                                                                                              Ещё добавлю HTTPFox. Это простой аналог HTTPWatch. Конечно можно и в FireBug смотреть, но в HTTPFox удобнее.
                                                                                                0
                                                                                                  0
                                                                                                  А я без PixelZoomer теперь не могу верстать.
                                                                                                    0
                                                                                                    Спасибо! А то постоянно мучаюсь с проверкой, если ли там 1 пиксель разницы или нет
                                                                                                    0
                                                                                                    А есть подобно cssUsage только для html?
                                                                                                      0
                                                                                                      html в firebug не очень удобно писать. Подсветки нет. Часто html из скриптов делается, лучше уж dreamviewer в этом случае.
                                                                                                      0
                                                                                                      Я бы еще добавил MeasureIt для измерения деталей на страничке и Flagfox. Flagfox кроме приятной возможности видеть флаг страны в которой находится сервер открытой странички дает быстрый доступ к полезным функциям как whois, Ip ресурса, страничка ресурса на Alexa и многое другое
                                                                                                        0
                                                                                                        Линейка есть в web developer, а флаги в веб-разработке как-то странно… Да и хуиз…
                                                                                                        0
                                                                                                        К слову, половину из этого я и так использую.
                                                                                                        Еще использую:
                                                                                                        Firefinder for Firebug
                                                                                                        FlashFirebug
                                                                                                        FireQuery
                                                                                                        Inline Code Finder for Firebug

                                                                                                        Хорошая статья. Добавил в избранное.
                                                                                                          0
                                                                                                          Спасибо. Только вчера я обновил шапку. Счел необходимым добавить новую информацию.

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

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