войти зарегистрироваться

Web-разработка whois

индекс
184,85

Developer Tools — online изменения CSS на сервере

Как то сидя на работе и смотря как дизайнер «ковыряется» в «кишках» нашего веб проекта, я заметил что дизайнер по «100 раз» перегружает сайт ради того что бы применились CSS. Да, есть FireBug, но он меняет css «на лету» и не сохраняет изменения в файлы. Порой это и не возможно, так как сайт находится на удалённой машине.
Посмотрев на мучения, решено было сделать нечто похожее на FireBug, но очень легкое. Так появился Developer Tools.
Основные возможности:
* — динамическая перегрузка CSS файла(ов).
* — изменение CSS файлов на сервере.
* — выбор DOM элементов, похож на FireBug.
* — парсинг CSS файлов, построение иерархии наложение CSS.



К сожелению пока это все работает только под IIS + .NET 3.5

Для разворачивания на сайте данной утилиты:
1) Установить сервис Developer.Tools.Service.
2) Настроить путь до тем или хранилища css файлов в web.config, appSettings->key =«ThemePath».
3) Разрешить сервису изменять содержимое каталогов в которых хранятся CSS.
4) Подключить jQuery и скрипт developer.tools.js из каталога Scripts к веб странице.

При загрузке страницы утилита подключит, если это необходимо, jQuery UI, а так же своё CSS оформление.

Программа распространяется под лицензией GPL 3.0.
Исходники и инсталятор.

P.S. Желательно IIS 6, так как под 5 геморройно настраивать права сервиса.

Так как проект бесплатный, да и времени у всех не хватает, с трудом удалось уговорить дизайнера что бы он хотя бы привел в сносный вид этот проект, поэтому буду рад любой помощи, критике и предложениям по улучшению.
+28
3 ноября 2008, 15:41
DisDis

комментарии (50)

  • мде, жаль что на апаче не прокатит.
    • можно переписать серверную часть на php, код сервера очень простой, к сожалению практически не знаю PHP
    • Notepad ++ отлично справляется с редактированием удаленных файлов.

      Правда он сначала кэширует редактируемый файл, а после сохранения налету перезаписывает на сервере.

      Дополнения -> FTP_synchronize
      • ну и поправите вы css через notepad++, но потом же все равно придется обновлять страницу в браузере, чтобы увидеть результат… разве не так?
        а тут, как я понял, говорится о правке css и просмотру своей правки в динамической форме, без обновления страницы…
        кстати, очень интересная идея… (:
        • Согласен.

          Не до конца поянл суть.
  • надеюсь, что ктонить скоро напишет firefox плагин, который бы просто использовал ftp, чтобы сохранить измененния в указанном css файле при работе с firebug
    • тогда уже плагин к firebug :)
    • Под Firefox есть плагин — Web Developer. Можно в живую править CSS, правда поддержки FTP нет, но это в принципе не такая уж и большая проблема в данном случае.
  • не так уж сложно скопировать подходящие значения из окошка CSS Firebug'а

    а то, что мы видим на скриншоте, я пожалуй не решусь поставить
    • Да но после этого нужно перегрузить сайт, а тут CSS применяется «на лету».
      Для статических страниц всегда проще скопировать из FireBug`a, так вообщем то и поступаю.
      • FireBug и применяет правки на лету, только вот на сервере они не сохраняются.
  • Скриншот подозрительный :)
    • Что было у жены в браузере открыто, то и отскриншотил)
      • скрытая такая реклама «Вконтакте»… (:
        • Твой коммент — это скрытая такая реклама «Вконтакте»… (:
          До его прочтения я и не знал, что там «Вконтакте»
          • упаси Бог, заниматься мне скрытой такой рекламой
            просто грех это не заметить на заднем фоне… (:
            • грешен, не заметил, так как не пользуюсь
  • Да идея хороша, но вот посмотрел в другом браузере — не в FF?
    Например все поедет в IE?
    Опять переходить Developer Tools?

    Так я для этих целей пользуюсь winSCP в одном окошке, браузерами в другом.
    • Да, забыл указать что под IE (браузер который портит жизнь)) ) не работает, необходимости не было.
  • Как-то монструозно выглядит. А подпись «IIS + .NET 3.5» внушает еще большее недоверие. (:
  • Класс, спасибо.
  • как дизайнер «ковыряется» в «кишках» нашего веб проекта, я заметил что дизайнер по «100 раз» перегружает сайт

    О боже! Вы прямо на боевой версии экспериментируете с дизайном?
    Обычно это отлаживают на локальной машине, а потом заливают на сервер. Желательно при этом иметь SVN.

    К сожелению пока это все работает только под IIS + .NET 3.5

    Вместо того чтобы придумывать подобные извращения а-ля меняем дизайн проекта на бою, нужно просто грамотно построить технологический процесс.
    • Дизайнер работает на МакОС, и ставить всякую хрень не хочет, поэтому заставили его через шары ходить на сайт, но проблема в том что сайт, трейдинговая платформа, полностью динамический, и значит при перезагрузке приходиться снова совершать тело движения например при редактировании «окошка» настройки, надо совершить телодвижения. А так он меняет и на лету перегружает только CSS, сам контент страници не перегружается.
      • «Дизайнер работает на МакОС, и ставить всякую хрень не хочет»
        Классно у вас процесс поставлен. Каждый работает как хочет. Дизайнер определяет процесс выкладки кода… Прошу прощения, но это п*здец.

        Кстати, неужели вашему дизайнеру хватает только правки CSS? А html-шаблоны он не трогает?
        • проблема в том что сорс коды в TFS хранятся, под мак ось есть только платные тулзы, но это пол бяды. Проблема еще в том что IIS на мак ос не поставить).Пришлось виртуальную машину ставить. Но дизайнеры люди творческие, да и он закоренелый маковод, так что ему не охота да и не нужно разбераться как деплоить и т.д.
          Шаблоны и CSS правит.
          • Да, похоже в вашем случае действительно проще поставить костыль, чем перестраивать весь процесс. Но такие подпорки ни к чему хорошему не приводят. В любом случае удачи!

            Да, еще хотел у вас спросить, можно посмотреть на проект? А то вы сказали что проект бесплатный, а потом заявили, что это «трейдинговая платформа». Уж больно любопытно на это взглянуть.
            • Developer Tools — бесплатный
              а применялся он как раз на трейдинговой платформе, ссылку не могу дать так как хз как начальство отреагирует
      • «ставить всякую хрень не хочет» =)))
        Расскажите мне сколько хрени надо поставить, чтобы поправить верстку? =)
        • А причем тут верстка?
          Может меня не правильно поняли, изменять на «боевом» сайте не кто не даст. Все изменения идут на дев сайте, который естественно лежит в локалке.
          Доступ к css у дизайнера есть, задача была применение CSS «на лету» без перегрузки сайта.
          Под всякой «хренью», подразумевается: виртуальная машина, IIS, MVS для TFS
    • При обсуждении любой скольугодно малой локальной проблемы найдётся человек, который скажет, что это п*здец и надо изменить весь техпроцесс и переписать всё заново :)
  • Я думаю зря Вы так все начали говорить, что инструмент подозрительный/не нужный/нужное_вставить, т.к. человек сделал очень даже полезный инструмент.
    Кого не устраивает — дописывайте! GPL всё таки, так что каждый может написать, переписать.
    DisDis — спасибо. Это то что нужно. Не для меня правда, а для моего верстальшика, но так, как он не зарегистрирован на Хабре, то от него тоже спасибо!
  • Дык обычно чтобы применить новый css — имя файла же вроде надо поменять еще — да? А то часто видел картину, когда у себя та я принудительно обновил, а у пользователей кешированный css грузится и непонятно какими силами браузеру автоматом обьяснять что css обновился :(
    • Все довольно просто. Вам неоходимо передавать фалу css или js дополнительный параметр. т.е. в итоге конечный код будет выглядеть в виде:

      В результате после изменения файла браузер переобновит его.
      • Хабр сьел код? Так что там должно быть?
        • /myfile.js?1225660769
          /myfile.css?1225660769
          где 1225660769 это время модификации файла, filemtime()
          • о — круто. попробую — да.
          • Это ни хрена не круто, не делайте так, ваши файлы не будут кешироваться. почитайте на webo.in кажется есть статья как это сделать
    • Ctrl+R
      • С обновлением каждого css объявление на сайте «Всем пользователям! Пожалуйста, нажмите Ctrl+R»
        • глупость несусветная, особенно когда пользователь увидет как верстка разлетелась.
          почти любой пользователь покинет ресурс, где его каждые 5 минут просят сделать ctrl+R и все ползет.
          • Товарищ, это был саркастический сарказм.
  • НЛО прилетело и опубликовало эту надпись здесь.
    • Spy
    • Spy
    • 4 ноября 2008, 14:36
    • #
      • 0
    с firebug все таки проще
  • если кому то интересен бы был скрипт для редактирования css буду рад такой написать
    • в данный момент занимаюсь скриптом для редактирования css селектора, что конкретно нужно?
  • «сайт находиться» поправьте пожалуйста
  • Для FF есть плагин обновляющий только CSS по хоткею. Активно использую связку Notepad++ с ftp и этим плагином.
    • Упомянутое расширение основано на маленьком JS скрипте от Daniel Andrade —
      www.danielandrade.net/2007/02/25/css-refresh/.
      Имхо проще воспользоваться им.
      • По мне, так плагин лучше букмарка :) Кстати, в коментариях с авторскому скрипту есть ссылка на еще один плагин — CSS Sync. Я его не трогал, но судя по описанию он сам проверяет и обновляет CSS.
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.