Firebug - самый удобный инструмент, который я нашел для редактирования CSS - так почему же нет простой опции «сохранить» для CSS?

Я всегда обнаруживаю, что делаю твики в Firebug, затем возвращаюсь к своему исходному файлу .css и копирую твики.

Кто-нибудь придумал лучшее решение?

РЕДАКТИРОВАТЬ: я знаю, что код хранится на сервере (в большинстве случаев не мой), но я использую его при создании своих собственных веб-сайтов.

Firebug просто использует .css файл, загруженный с сервера Firefox, он точно знает, какие строки в каких файлах он редактирует. Я не понимаю, почему нет опции «экспорт» или «сохранить», которая позволяет вам сохранить новый файл .css. (Который я мог тогда заменить удаленным с).

Я пытался искать во временных местоположениях, выбирал « Файл» > « Сохранить» и экспериментировать с параметрами вывода в Firefox, но до сих пор не нашел способа.

РЕДАКТИРОВАТЬ 2: Официальная дискуссионная группа имеет много вопросов , но нет ответов.

Я попал сюда в поисках именно этой функции, то есть возможности сохранять отредактированные CSS свойства обратно в исходный файл (на моей локальной машине разработки). К сожалению, после того, как я много искал и не нашел ничего подходящего для меня (хорошо, есть CSS Updater, но вы должны зарегистрироваться, и это платное расширение ...) Я отказался от Firefox + Firebug и искал что-то похожее для Google Chrome. Угадайте, что ... Я только что нашел этот замечательный пост, который показывает хороший способ заставить это работать (встроенный в Chrome - нет необходимости в дополнительных расширениях):

Изменить CSS и сохранить в локальной файловой системе с помощью Chrome Developer Tools

Я попробовал это сейчас, и он отлично работает, выделяя измененные строки. Просто нажмите Сохранить и все готово! :)

Вот видео, объясняющее это и многое другое: Google I / O 2011: Chrome Dev Tools Reloaded

Надеюсь, это поможет, если для вас не имеет значения, что вы меняете браузер при редактировании своих CSS-файлов. Я уже внес изменения, но мне бы очень хотелось, чтобы эта функциональность была встроена в Firebug. :)

[Обновление 1]

Сегодня я только что видел это видео: Firefox CSS live edit в Sublimetext (работа в процессе) Выглядит действительно многообещающе.

[Обновление 2]

Если вы используете Visual Studio 2013 с Web Essentials, вы сможете автоматически синхронизировать CSS, как показано в этом видео:

Web Essentials: интеграция инструментов браузера

Уже довольно давно удивляюсь тому же, просто мучительно, когда твое мгновенное вождение в стиле фристайл с огненной клопом разлетается на куски в
результате случайной перезагрузки или чего-то еще ....

Для моих намерений и целей я наконец нашел инструмент ....: FireDiff .

Это дает вам новую вкладку, возможно, странную ссылку Дэвида Боуи, называемую «изменения»; который не только позволяет вам видеть / сохранять то, что делал firebug, то есть вы,
но также и опционально отслеживать изменения, сделанные самой страницей ... если она и / или вы так склонны.

Так благодарен за то, что мне не нужно ни вводить заново, ни заново представлять, а затем заново вводить каждое правило css, которое я делаю ...

Вот ссылка на разработчика (не оскорбляйтесь при первом появлении, так же возможно, перейдите прямо в репозиторий дополнений Mozilla) .

Web Developer надстройка позволяет вам сохранить изменения. Я хотел бы объединить редактирование Firebug с функцией сохранения веб-разработчика.

Используйте « Сохранить кнопку » (выберите меню CSS -> Изменить CSS), чтобы сохранить измененный CSS на диск.

Рекомендация : используйте кнопку « Придерживаться », чтобы предотвратить потерю изменений при переходе на другую вкладку. Если это возможно, используйте только одну вкладку для редактирования, а в другом окне Firefox - связанные запросы, веб-почту и т. Д.

Я только что выпустил аддон firebug в песочнице аддона Mozilla, который вполне может делать то, что вы хотите: https://addons.mozilla.org/en/firefox/addon/52365/

На самом деле он сохраняет «тронутые» CSS-файлы по запросу на вашем веб-сервере. (путем связи с однофайловым PHP-скриптом -сервиса).

Документация можно найти на моей домашней странице или на странице дополнений

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

CSS-X-Fire

Я удивлен тем, что он до сих пор не указан в этом вопросе, но, вероятно, потому что он новый, и автор еще не успел его продвинуть.

Он называется CSS-X-Fire и является плагином для IDE серии JetBrains: IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine .

Как это работает: Вы устанавливаете одну из этих IDE и настраиваете развертывание (поддерживает FTP и SCP). Это позволит вам синхронизироваться с сервером.

После этого вы устанавливаете этот плагин. Когда он запустится, он попросит вас сказать, что он установит плагин для Firefox, чтобы сделать интеграцию между Firebug и IDE. Если не удается установить плагин, просто используйте технику перетаскивания, чтобы установить его.

После установки он будет отслеживать все ваши изменения из Firebug, и вы сможете применить их простым щелчком внутри de IDE.

FireFile

FireFile - это альтернатива, которая требует, чтобы вы добавили один небольшой php-файл на серверную часть, чтобы иметь возможность загружать измененный css.

Вы можете связать Firebug с Eclipse с помощью Fireclipse, а затем сохранить файл из Eclipse.

Я думаю, что ближе всего вы перейдете в режим редактирования в Firebug и скопируете и вставите содержимое файла CSS.

Мы только что представили Backfire, движок javascript с открытым исходным кодом, который позволяет сохранять изменения CSS, сделанные в Firebug и Webkit inspector, на сервер. Библиотека включает в себя пример реализации C #, как сохранить входящие изменения в вашем CSS.

Вот сообщение в блоге о том, как это работает: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

А вот код, размещенный на Google Code: http://code.google.com/p/backfire/

Я знаю, что это не отвечает на ваш вопрос, но удивительно, что клон Firebug в Internet Explorer 8 «панель инструментов разработчика» (доступный через F12) предлагает опцию «сохранить html». Эта функция сохраняет текущий DOM в локальном файле, что означает, что если вы каким-либо образом редактируете DOM, например, добавляя атрибут стиля где-то, это тоже будет сохранено.

Не особенно полезно, если вы используете Firebug, чтобы возиться с CSS, как это делают все, но шаг в правильном направлении.

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

Вот сценарии:

Работа на веб-сайте, размещенном на удаленной машине

В этом случае вы должны указать подробности FTP, а расположение CSS / HTML / Javascript и Firebug обновят эти файлы при сохранении ваших изменений. Возможно, он даже сможет найти файлы сам, а затем попросит вас проверить, что он имеет правильный файл. Если имена файлов уникальны, это не должно быть проблемой.

Работа на веб-сайте, работающем на вашем локальном компьютере

В этом случае вы можете предоставить Firebug локальную папку на веб-сайте, и то же поведение будет использоваться для сопоставления и проверки файлов. Доступ к локальной файловой системе может быть выполнен через FireFTP при необходимости.

Работа на веб-сайте, размещенном удаленно без доступа по FTP

В этом случае должно быть реализовано что-то вроде дополнения FireFile.

Дополнительной функцией будет возможность сохранять и открывать файлы проекта, в которых хранятся сопоставления между локальными файлами и URL-адресами, с которыми они связаны, а также сохранять подробности FTP, как это делает FireFTP.

Я автор CSS-X-Fire, о котором Сорин Сбарнеа также любезно разместил в этой теме. Думаю, я немного опоздал;)

CSS-X-Fire испускает изменения свойств CSS из Firebug в IDE, где изменения могут быть применены или отменены.

У этого решения есть несколько преимуществ по сравнению с большинством других существующих инструментов, которые знают только имена файлов и контент, загруженный браузером (см. Комментарий NickFitz в оригинальном сообщении).

Сценарий 1. У вас есть веб-сайт (проект), в котором есть несколько тем, из которых пользователь может выбирать. Каждая тема имеет свой собственный CSS-файл, но Firebug известен только один, текущий. CSS-X-Fire обнаружит все подходящие селекторы в проекте и позволит вам решить, какие из них следует изменить.

Сценарий 2. У веб-проекта есть таблицы стилей, созданные во время компиляции или во время развертывания. Они могут быть объединены из нескольких файлов, и имена файлов могут измениться. CSS-X-Fire не заботится об именах файлов, он имеет дело только с именами селекторов CSS и их свойствами.

Выше приведены примеры сценариев, в которых CSS-X-Fire превосходит другие. Поскольку он работает с исходными файлами и знает о структуре языка, он также помогает находить дубликаты, неизвестные Firebug, переход к коду и так далее.

CSS-X-Fire является открытым исходным кодом под лицензией Apache 2. Домашняя страница проекта: http://code.google.com/p/css-x-fire/

FireFile

Firebug был создан, чтобы обнаружить проблему не быть отладчиком. но вы можете сохранить изменения, если добавите новый инструмент, который объединяет Firebug с сохранением изменений. это FireFile, нажмите здесь http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html .

FireFile обеспечивает желаемую функциональность, добавляя небольшой файл PHP на стороне сервера.

Поскольку Firebug не работает на вашем сервере, он берет CSS с сайта, сохраняет его локально и показывает сайт с этими локальными изменениями.

Используйте редактор CSS на панели инструментов Firefox Web Developer:

http://chrispederick.com/work/web-developer/

У него достаточно хороших вещей, чтобы использовать их вместе с Firebug, и это позволяет вам сохранить свой CSS в текстовом файле.

Используйте Backfire.

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Это решение с открытым исходным кодом, которое отправляет изменения CSS обратно на сервер и сохраняет их.

Backfire использует один файл javascript, а пакет исходного кода имеет работающий пример реализации сервера .NET, который легко переносится на другие платформы.

У меня тоже была эта проблема навсегда, и в конце концов я решил, что мы не должны редактировать что-то в веб-инспекторе, и создал что-то для нее ( https://github.com/viatropos/design.io ).

Лучшее решение:

Браузер автоматически отражает изменения CSS без перезагрузки при нажатии кнопки «Сохранить» в текстовом редакторе .

Основная причина, по которой мы редактируем css в веб-инспекторе (я использую webkit, но FireBug работает по тем же принципам), заключается в том, что нам нужно вносить небольшие корректировки, а перезагрузка страницы занимает слишком много времени.

Есть 2 основных проблемы с этим подходом. Во-первых, вы можете редактировать отдельный элемент, который может не иметь idселектора. Таким образом, даже если бы вы могли скопировать / вставить сгенерированный CSS из веб-инспектора, он должен был бы сгенерировать idобласть действия CSS. Что-то вроде:

#element-127 {
  background: red;
}

Это сделало бы ваш CSS беспорядком.

Вы можете обойти это, только изменив стили для существующего селектора ( .spaceселектор классов на изображении инспектора webkit ниже).

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

Я бы предпочел просто придерживаться TextMate.

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

Следующим уровнем будет писать на динамическом языке CSS, таком как Stylus, Less, SCSS и т. Д., И обновлять браузер созданным CSS. Таким образом, вы можете начать создавать такие миксины box-shadow(), которые абстрагируют от сложностей, которые веб-инспектор определенно не может сделать.

Есть несколько вещей, которые делают это, но, на мой взгляд, ничего не оптимизирует.

• LiveReload : передает CSS в браузер без обновления, когда вы нажимаете сохранить, но это приложение для Mac , так что его будет сложно настроить.
• CodeKit : также приложение для Mac, но оно обновляет браузер при каждом сохранении.

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

Я собрал https://github.com/viatropos/design.io специально для решения этой проблемы и сделал так:

1. Браузер отображает css / js / html / etc в любое время, когда вы сохраняете, без перезагрузки страницы
2. Он может обрабатывать любые шаблоны / языки / рамки (Stylus, Less, CoffeeScript, Jade, Haml и т. Д.)
3. Он написан на JavaScript, и вы можете быстро собрать вместе расширения в JavaScript.

Таким образом, когда вам нужно внести эти небольшие изменения в CSS, вы можете сказать, установить цвет фона, нажать сохранить, увидеть нету, не совсем, отрегулировать оттенок на 10, сохранить, нет, отрегулировать на 5, сохранить, выглядит хорошо.

Это работает путем наблюдения за каждым сохранением файла (на уровне операционной системы), обработки файла (здесь работают расширения) и передачи данных в браузер через веб-сокеты, которые затем обрабатываются (на стороне клиента). расширение).

Не для подключения или что-нибудь, но я боролся с этой проблемой в течение долгого времени задницу.

Надеюсь, это поможет.

Firebug работает на вычисленном CSS (тот, который вы получаете, принимая CSS в файлах и применяя наследование и т. Д. Плюс изменения, сделанные с помощью JavaScript). Это означает, что, вероятно, вы не можете использовать его напрямую для включения в файл HTML, который зависит от браузера / версии (если вы не заботитесь только о Firefox). С другой стороны, он отслеживает то, что является оригинальным и что вычисляется ... Я думаю, что не должно быть очень трудно добавить JS в Firebug, чтобы иметь возможность экспортировать этот CSS в текстовый файл.

Мне было интересно, почему я не могу чертовски хорошо выбрать и скопировать текст на моих глазах. Особенно, когда другие говорят, что вы можете просто «выбрать и скопировать». Оказывается, вы можете , вам просто нужно начать перетаскивание за пределы. любого текста (то есть в канаву над или слева от текста), как любой mousedown - будь то щелчок или перетаскивание - любой текст немедленно вызывает свойство редактор. Вы также можете щелкнуть вне текста, чтобы получить курсор (даже если он не всегда виден), который затем можно перемещать с помощью клавиш со стрелками и таким образом выделять текст.
К сожалению, текст, скопированный в буфер обмена, не имеет отступов, но, по крайней мере, избавляет вас от ручной расшифровки всего содержимого файла CSS. Просто сделайте так, чтобы ваша программа сравнения игнорировала изменения в пробелах при сравнении с оригиналом.

Вы можете написать свой собственный файл сценария сервера, который принимает параметр имени файла и параметр содержимого.

Серверный скрипт найдет запрошенный файл и заменит его содержимое новым.

Написание Javascript, который подключается к информации Firebug и получает полезные данные, будет сложной задачей.

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

Наконец, Ajax отправляет пару имя файла / содержимое в файл php, который вы создали.

Цитируется из FAQ по Firebug :

Редактирование страниц

• Могу ли я сохранить в источнике изменения, которые я внес на веб-страницу, которую я вижу?

  Прямо сейчас ты не можешь. Как писал Джон Бартон в группе новостей:

  Редактировать в Firebug - это все равно, что вынимать маринады и добавлять горчицу в сэндвич: вы можете наслаждаться результатом, но следующий клиент в ресторане все равно получит соленые огурцы и не будет горчицы.

  Это давно запрошенная функциональность, поэтому когда-нибудь она будет доступна прямо из Firebug. Между тем, вы можете попробовать Firediff , расширение для firebug Кевина Декера.

• Как вывести все изменения, которые были сделаны в CSS сайта в firebug?

  Эта функция реализована в Firediff Кевина Декера .

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

Редактировать: похоже, Марк Бик имеет более быструю версию

Очень простой способ «отредактировать» свою страницу - перейти на сайт через интернет-браузер. Сохраните страницу как HTML только на свой рабочий стол. Перейдите на рабочий стол и щелкните правой кнопкой мыши новый файл веб-страницы и выберите «Открыть с помощью», выберите «Блокнот» и отредактируйте страницу оттуда, если вы знаете HTML, это будет легко. После того, как все ваши изменения завершены, сохраните файл и снова откройте веб-страницу, изменения должны быть внесены, если все сделано правильно. Затем вы можете использовать новую отредактированную страницу и экспортировать или скопировать ее в удаленное местоположение.

На самом деле Firebug - это инструмент для отладки и анализа: он не редактор и явно не считается таковым. Другая причина уже упоминалась: как вы хотите изменить CSS, хранящийся на сервере при отладке веб-страницы?