Ответ 1

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

Измените CSS и сохраните его в локальной файловой системе с помощью инструментов разработчика Chrome

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

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

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

[Обновить 1]

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

[Обновить 2]

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

Рекомендация. Используйте кнопку Stick ", чтобы предотвратить потеря ваших изменений при изменении вкладки для выполнения других видов просмотра. Если это возможно, используйте только одну вкладку, чтобы сделать редактирование и другое окно firefox связанным поискам, веб-почте и т.д.

Ответ 4

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

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

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

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

Ответ 5

CSS-X-Fire

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

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

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

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

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

FireFile

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

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

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

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

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

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

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

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

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

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

Ответ 11

FireFile

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

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

Ответ 12

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

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

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

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

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

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

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

Ответ 13

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

Ответ 14

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

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

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

Ответ 15

Использовать Backfire.

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

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

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

Ответ 16

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

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

Браузер автоматически отображает изменения CSS без перезагрузки, когда вы нажимаете save в текстовом редакторе.

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

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

#element-127 {
  background: red;
}

Это заставило бы ваш css беспорядок.

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

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

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

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

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

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

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

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

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

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

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

То, как он работает, - это наблюдать, когда вы сохраняете файл (на уровне os), обрабатываете файл (там работают расширения) и нажимаете данные в браузере через websockets, которые затем обрабатываются ( клиентская сторона расширения).

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

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

Ответ 17

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

Ответ 18

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

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

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

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

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

Ответ 19

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

Ответ 20

Цитата из FAQ Firebug:

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

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

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

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

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

• Как я могу вывести все изменения, внесенные в CSS сайта в firebug?

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

Ответ 21

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

Изменить: выглядит как Mark Biek имеет более быструю версию

Ответ 22

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

Ответ 23

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