Почему я не могу сохранить изменения CSS в Firebug?[закрыто]
https://stackoverflow.com/questions/162644
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Firebug - самый удобный инструмент, который я нашел для редактирования CSS, так почему же для CSS нет простой опции "сохранить"?
Я всегда ловлю себя на том, что вношу изменения в Firebug, затем возвращаюсь к своему исходному файлу .css и копирую изменения.
Кто-нибудь придумал лучшее решение?
Редактировать: Я знаю, что код хранится на сервере (в большинстве случаев не моем собственном), но я использую его при создании своих собственных веб-сайтов.
Firebug просто использует файл .css, загруженный Firefox с сервера, он точно знает, какие строки в каких файлах он редактирует.Я не понимаю, почему нет опции "экспортировать" или "сохранить", которая позволяет вам сохранить новый файл .css.(Которым я мог бы затем заменить удаленный).
Я пробовал искать во временных местах и выбирать Файл > Сохранить... и экспериментирую с параметрами вывода в Firefox, но я до сих пор не нашел способа.
ПРАВКА 2: Официальная дискуссионная группа имеет очень много вопросов, но ответов нет.
Решение
Я попал сюда в поисках именно этой функции, то есть возможности сохранить отредактированные свойства CSS обратно в исходный файл (на моей локальной машине для разработки). К сожалению, после тщательного поиска и отсутствия чего-либо, соответствующего моим потребностям (хорошо, есть CSS Updater , но вы должны зарегистрироваться и это платное расширение ...) Я отказался от Firefox + Firebug и искал что-то похожее для Google Chrome. Угадайте, что ... Я только что нашел этот замечательный пост, который показывает хороший способ заставить это работать (встроенный в Chrome - нет необходимости в дополнительных расширениях):
Изменить CSS и СОХРАНИТЬ в локальной файловой системе с помощью инструментов разработчика Chrome
Я попробовал это сейчас, и он отлично работает, выделяя измененные строки. Просто нажмите Сохранить и все готово! :)
Вот видео, объясняющее это и многое другое: Google I / O 2011: Chrome Dev Tools Reloaded
Надеюсь, это поможет, если вам не нужно менять браузер при редактировании файлов CSS. Я уже внес изменения, но мне бы очень хотелось, чтобы эта функциональность была встроена в Firebug. :) <Ч>
[Обновление 1]
Сегодня я только что видел это видео: Прямое редактирование CSS Firefox в Sublimetext (работа в процессе) Выглядит действительно многообещающе.
[Обновление 2]
Если вы используете Visual Studio 2013 с Web Essentials вы сможете автоматически синхронизировать CSS, как показано в этом видео:
Другие советы
Уже довольно давно удивляюсь тому же самому,
просто душераздирающий, когда ваш моментальный фристайл css'ing с firebug разлетелся на кусочки
случайная перезагрузка или еще много чего ....
Для своих намерений я наконец-то нашел инструмент ....: FireDiff .
Он дает вам новую вкладку, возможно, странную ссылку Дэвида Боуи, называемую «изменения»;
который не только позволяет увидеть / сохранить то, что firebug, я. е. Вы, делаете,
но также при желании отслеживать изменения, сделанные самой страницей .... если она и / или вы так склонны.
Так что я благодарен за то, что мне не нужно ни вводить заново, ни заново представлять, а затем заново вводить каждое правило css, которое я создаю ...
Здесь - ссылка на разработчика (не унижайтесь при первом появлении, возможно, просто а также отправляйтесь прямо в репозиторий дополнений Mozilla .
надстройка для веб-разработчиков позволяет сохранять изменения , Я хотел бы объединить редактирование Firebug с функцией сохранения веб-разработчика.
Используйте " Сохранить " нажмите кнопку (нажмите меню CSS -> Изменить CSS), чтобы сохранить измененный CSS на диске.
Рекомендация . Используйте " Стик " кнопка, чтобы предотвратить потерю ваших изменений при переходе на другую вкладку. Если это возможно, используйте только одну вкладку для редактирования, а в другом окне Firefox - связанные запросы, веб-почту и т. Д.
CSS-X-Fire
Я удивлен, что он до сих пор не указан в этом вопросе, но, вероятно, потому что он новый, и автор еще не успел его продвинуть.
Он называется CSS-X-Fire и это плагин для IDE серии JetBrains: IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine .
Как это работает: вы устанавливаете одну из этих IDE и настраиваете развертывание (поддерживает FTP и SCP). Это позволит вам синхронизироваться с сервером. После этого вы устанавливаете этот плагин. Когда он запустится, он попросит вас сказать, что он установит плагин для Firefox, чтобы сделать интеграцию между Firebug и IDE. Если установить плагин не удается, просто используйте метод drag-n-drop для его установки. После установки он будет отслеживать все ваши изменения из Firebug, и вы сможете применить их простым щелчком мыши внутри de IDE.
FireFile - это альтернатива, которая требует, чтобы вы добавили один небольшой файл php на сторону сервера, чтобы иметь возможность загружать измененный css. 
FireFile
Я только что выпустил аддон firebug в песочнице аддона mozilla, который вполне может сделать то, что вы хотите:
https://addons.mozilla.org/en/firefox/addon/52365/
На самом деле сохраняет " тронутый " CSS-файлы по запросу на ваш веб-сервер (посредством связи с однофайловым PHP-скриптом веб-сервиса). Документация можно найти на моей домашней странице или на странице дополнений Я был бы признателен за любое тестирование, сообщения об ошибках, комментарии, оценки, обсуждение этого вопроса, поскольку он все еще находится в ранней бета-версии, но уже должен работать нормально.
Вы можете связать firebug , чтобы затмить с помощью fireclipse , а затем сохраните файл из eclipse
Я думаю, что ближе всего вы перейдете в режим редактирования в Firebug и скопируете и вставите содержимое файла CSS.
Мы только что представили Backfire, движок JavaScript с открытым исходным кодом, который позволяет сохранять изменения CSS, сделанные в Firebug и Webkit инспекторах, на сервер. Библиотека включает пример реализации на C # того, как сохранить входящие изменения в вашем CSS.
Вот сообщение в блоге о том, как это работает: http://blog.quplo.com / 2010/08 / Backfire-копи-CSS-изменения-сделанные в поджигатель /
А вот код, размещенный в Google Code: http://code.google.com/p/backfire/
Я знаю, что это не отвечает на ваш вопрос, но, что удивительно, в Internet Explorer 8 клон Firebug " панель инструментов разработчика " (доступно через 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.
Вы могли бы обойти это, только изменив стили для существующего селектора (the .space селектор класса на изображении инспектора webkit ниже).
И все же, вторая проблема.Интерфейс к этой штуке довольно грубый, в него трудно внести большие изменения - например, если вы хотите попробовать очень быстро скопировать этот блок css в это место или что-то еще.
Я бы предпочел просто придерживаться TextMate.
Идеально было бы просто написать CSS в вашем текстовом редакторе и пусть браузер отражает изменения без перезагрузки страницы.Таким образом, вы будете писать свой окончательный css по мере внесения небольших изменений.
Следующим уровнем было бы написать на динамическом языке CSS, таком как Stylus, Less, SCSS и т.д., и обновить браузер с помощью сгенерированного CSS.Таким образом, вы могли бы начать создавать миксины, такие как box-shadow(), это избавило от сложностей, с которыми веб-инспектор определенно не мог справиться.
Есть несколько вещей, которые вроде как делают это, но, на мой взгляд, ничто по-настоящему не оптимизирует это.
- Нагрузка на печень:загружает css в браузер без обновления при нажатии кнопки сохранить, но это приложение для Mac, так что это было бы трудно настроить.
- CodeKit ( Кодек):тоже приложение для Mac, но оно обновляет браузер каждый раз, когда вы сохраняете.
Отсутствие возможности легко настроить способ их работы - основная причина, по которой я ими не пользовался.
Я собрал воедино https://github.com/viatropos/design.io специально для того, чтобы решить эту проблему, и сделать ее такой:
- Браузер отображает css / js / html / etc в любое время, когда вы сохраняете, без перезагрузки страницы
- Он может обрабатывать любой шаблон / язык / фреймворк (Stylus, Less, CoffeeScript, Jade, Haml и т.д.)
- Он написан на JavaScript, и вы можете очень быстро создавать расширения на JavaScript.
Таким образом, когда вам нужно внести эти небольшие изменения в CSS, вы можете сказать: установите цвет фона, нажмите сохранить, увидите нет, не совсем, отрегулируйте оттенок на 10, сохраните, нет, отрегулируйте на 5, сохраните, выглядит хорошо.
Способ, которым это работает, заключается в просмотре всякий раз, когда вы сохраняете файл (на уровне операционной системы), обработке файла (именно здесь работают расширения) и отправке данных в браузер через websockets, которые затем обрабатываются (клиентская сторона расширения).
Не для того, чтобы подключить или что-то в этом роде, но я долго боролся с этой проблемой.
Надеюсь, это поможет.
Firebug работает на CSS computed (тот, который вы получаете, беря CSS в файлы и применяя наследование и т. д. плюс изменения, сделанные с помощью JavaScript). Это означает, что, вероятно, вы не можете использовать его напрямую для включения в файл HTML, который зависит от браузера / версии (если вы не заботитесь только о Firefox). С другой стороны, он отслеживает то, что является оригинальным и что вычисляется ... Я думаю, что не должно быть очень сложно добавить JS в Firebug, чтобы иметь возможность экспортировать этот CSS в текстовый файл.
Мне было интересно, почему я не могу чертовски хорошо выбрать и скопировать текст на моих глазах. Особенно, когда другие говорят, что вы можете просто «выбрать и скопировать». Оказывается, вы можете , вам просто нужно начать перетаскивание за пределы любого текста (т. Е. В канаву над или слева от текста), как любой mousedown - будь то это щелчок или перетаскивание - любой текст немедленно вызывает редактор свойств. Вы также можете щелкнуть вне текста, чтобы получить курсор (даже если он не всегда виден), который затем можно перемещать с помощью клавиш со стрелками и таким образом выделять текст.
К сожалению, текст, скопированный в буфер обмена, не имеет отступов, но, по крайней мере, избавляет вас от ручной расшифровки всего содержимого файла CSS. Просто сделайте так, чтобы ваша программа сравнения игнорировала изменения в пробелах при сравнении с оригиналом.
Вы можете написать свой собственный файл сценария сервера, который принимает параметр имени файла и параметр содержимого.
Серверный скрипт найдет запрошенный файл и заменит его содержимое новым.
Написание Javascript, который использует информацию о firebug и извлекает полезные данные, будет сложной задачей.
Я бы лично попросил команду разработчиков в firebug предоставить функцию, для них это не должно быть слишком сложно.
Наконец, Ajax отправляет пару имя файла / содержимое в созданный вами php-файл.
Цитируется из часто задаваемые вопросы о Firebug:
Редактирование страниц
Могу ли я сохранить в исходном коде изменения, внесенные на веб-страницу, которую я вижу?
Прямо сейчас ты не можешь.Как Джон Дж .Бартон написал в группе новостей:
Редактировать в Firebug - это все равно что вынимать маринованные огурцы и добавлять горчицу в ресторанный сэндвич:вы можете наслаждаться результатом, но следующий посетитель ресторана все равно получит соленые огурцы без горчицы.
Это давно востребованная функциональность, так что когда-нибудь она будет доступна непосредственно из Firebug.А пока вы можете попробовать Огненный Дифф, продолжение для firebug Кевина Декера.
Как я могу вывести все изменения, которые были внесены в CSS сайта в firebug?
Эта функция реализована в книге Кевина Декера Огненный Дифф.
Вот частичное решение. После внесения изменений нажмите на одну из ссылок на соответствующий файл. Это оригинальный файл, поэтому вам придется обновить файл, который находится под кнопкой меню параметров в правом верхнем углу панели Firebug. Теперь у вас есть измененная страница CSS, которую вы можете скопировать & amp; вставить. Очевидно, вам придется делать это для каждого файла CSS.
Изменить. Похоже, Марк Бик имеет более быстрая версия
Очень простой способ " редактировать " Ваша страница должна перейти на сайт через ваш интернет-браузер. Сохраните страницу в формате HTML только на свой рабочий стол. Перейдите на рабочий стол и щелкните правой кнопкой мыши новый файл веб-страницы и выберите «Открыть с помощью», выберите «Блокнот» и отредактируйте страницу оттуда, если вы знаете HTML, это будет легко. После того, как все ваши изменения завершены, сохраните файл и снова откройте веб-страницу, изменения должны быть внесены, если все сделано правильно. Затем вы можете использовать новую отредактированную страницу и экспортировать или скопировать ее в удаленное местоположение
На самом деле Firebug - это инструмент для отладки и анализа: он не является редактором и явно не считается таковым. Другая причина уже упоминалась: как вы хотите изменить CSS, хранящийся на сервере при отладке веб-страницы?
