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

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

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

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

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

Обновлено: похоже, что у Марк Бик есть более быстрая версия

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

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

_{(source: mozilla.org)}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На самом деле это сохраняет "затронутые" файлы css по запросу на ваш веб-сервер (путем взаимодействия с однофайловым скриптом php webservice).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В этом случае необходимо реализовать что-то вроде надстройки FireFile.

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

FireFile

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

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

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

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

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

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

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

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

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

CSS-X-Fire

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

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

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

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

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

FireFile

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

Я являюсь автором 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/

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

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

Editing Pages

• Can I save to the source the changes I made to the webpage I'm seeing?

  Right now you can't. As John J. Barton wrote on the newsgroup:

  Editing in Firebug is kinda like taking out the pickles from and adding mustard to a restaurant sandwich: you can enjoy the result, but the next customer at the restaurant will still get pickles and no mustard.

  This is a long-requested functionality, so someday it'll be available directly from Firebug. Meanwhile, you can try Firediff, an extension for firebug by Kevin Decker.

• How can I output all changes that have been made to a site's CSS within firebug?

  That's a feature implemented in Kevin Decker's Firediff.

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

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

The browser automatically reflects CSS changes without reloading when you press save in your text editor.

Основная причина, по которой мы редактируем 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, сохранить, выглядит хорошо.

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

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

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

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

Измените CSS и СОХРАНИТЕ в локальной файловой системе с помощью инструментов разработчика Chrome.

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

Вот видео, объясняющее это и многое другое: Google I / O 2011: перезагрузка инструментов разработчика Chrome

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

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

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

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

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

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