Firebug - це найзручніший інструмент, який я знайшов для редагування CSS - так чому ж для CSS не існує простого "збереження"?

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

Хтось придумав краще рішення?

EDIT: Мені відомо, що код зберігається на сервері (у більшості випадків не є моїм власним), але я використовую його під час створення власних веб-сайтів.

Firebug просто використовує .css файл Firefox, завантажений з сервера, він точно знає, у яких рядках, у яких файлах редагується. Я не можу зрозуміти, чому немає опції "експорту" чи "збереження", яка дозволяє зберігати новий .css файл. (Який потім міг би замінити віддалений).

Я спробував шукати у тимчасових місцях і вибрав « Файл» > « Зберегти ...» та експериментувати з параметрами виводу на Firefox, але досі не знайшов способу.

EDIT 2: Офіційна дискусійна група має багато питань , але відповідей немає.

Я потрапив сюди саме на цю функцію, тобто можливість зберегти відредаговані CSSвластивості назад у вихідний файл (на моїй локальній машині розробки). На жаль, після того, як я багато шукав і не знайшов нічого, що відповідає моїм потребам (Гаразд, є CSS Updater, але ви повинні зареєструватися, і це платне розширення ...) Я відмовився від Firefox + Firebug і шукав щось подібне для Google Chrome. Здогадайтесь, що ... Щойно я знайшов цей чудовий пост, який показує чудовий спосіб його роботи (вбудований у Chrome - додаткові розширення не потрібні):

Змініть CSS та SAVE у локальній файловій системі за допомогою Інструментів для розробників Chrome

Я спробував це зараз, і він чудово підкреслює змінені лінії. Просто натисніть кнопку «Зберегти», і ви закінчите! :)

Ось відео, що пояснює це та багато іншого: 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: інтеграція браузерних інструментів

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

Для моїх намірів та цілей я нарешті знайшов інструмент ....: FireDiff .

Це дає вам нову вкладку, ймовірно, якусь дивну посилання на Девіда Боуї, що називається "зміни"; яка не тільки дозволяє побачити / зберегти те, що робиться firebug, тобто ви, робили,
але й необов'язково відстежувати зміни, внесені самою сторінкою .... якщо вона та / або ви настільки схильні.

Тож вдячний, що не потрібно повторно вводити, або переосмислювати, а потім повторно вводити кожне правило css, яке я роблю ...

Ось посилання на розробника (не варто зневажати за першою появою, можливо, так само добре перейдіть до сховища додатків Mozilla .

Додаток Веб-розробник дозволить вам зберегти свої зміни. Я хотів би поєднати редагування Firebug із функцією збереження веб-розробника.

Скористайтеся пунктом " Зберегти" " (натисніть меню CSS -> Редагувати CSS), щоб зберегти змінений CSS на диску.

Рекомендація : Використовуйте кнопку " Дотримуватися ", щоб запобігти втраті змін, коли ви змінюєте вкладку для інших переглядів. Якщо це можливо, скористайтеся лише однією вкладкою, щоб зробити вікно редагування та інший Firefox для відповідних пошукових запитів, веб-пошти тощо.

Щойно я випустив аддону firebug у пісочниці mozilla addon, яка цілком може робити те, що ти хочеш: 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. Якщо не вдалося встановити плагін, просто використовуйте техніку перетягування n-drop, щоб встановити його.

Після встановлення він відстежує всі ваші зміни від Firebug, і ви зможете застосувати їх простим клацанням всередині de IDE.

FireFile

FireFile - це альтернатива, яка вимагає додати один невеликий файл PHP на сторону сервера, щоб мати можливість завантажувати змінений css.

Ви можете пов’язати firebug з затемненням з fireclipse, а потім зберегти файл від затемнення

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

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

Ось запис у блозі про те, як це працює: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

А ось код, розміщений у коді Google: 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селектор класів на зображенні інспектора веб-сайту нижче).

І все-таки друга проблема. Інтерфейс до цієї речі досить грубий, важко вносити великі зміни - наприклад, якщо ви хочете спробувати швидке швидке копіювання цього блоку 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 / тощо у будь-який час, коли ви зберігаєте, не перезавантажуючи сторінку
2. Він може обробляти будь-який шаблон / мову / фреймворк (Stylus, Less, CoffeeScript, Jade, Haml тощо)
3. Він написаний на JavaScript, і ви можете швидко з’єднати розширення в JavaScript.

Таким чином, коли вам потрібно внести ці невеликі зміни в CSS, ви можете сказати, встановити колір тла, натиснути зберегти, побачити nope, не зовсім, відрегулювати відтінок на 10, зберегти, nope, відрегулювати на 5, зберегти, виглядає добре.

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

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

Сподіваюся, що це допомагає.

Firebug працює над обчисленою CSS (тією, яку ви отримуєте, беручи CSS у файли та застосовуючи спадщину тощо, плюс зміни, внесені JavaScript). Це означає, що, ймовірно, ви не могли використовувати його безпосередньо для включення до HTML-файлу, який є специфічним для браузера / версії (якщо ви не піклуєтесь лише про Firefox). З іншого боку, він відслідковує, що є оригінальним і що обчислюється ... Я думаю, що не повинно бути дуже складно додати деякі файли JS до Firebug, щоб мати можливість експортувати цей CSS у текстовий файл.

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

Ви можете написати власний файл сценарію сервера, який приймає параметр імені файла та параметр вмісту.

Серверний скрипт знайде потрібний файл і замінить його вміст на новий.

Написання Javascript, що вписується в інформацію firebug та отримує корисні дані, було б складною частиною.

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

Нарешті, Ajax надсилає ім’я / пару вмісту до створеного вами файлу php.

Цитується з FAQ щодо Firebug :

Редагування сторінок

• Чи можу я зберегти до джерела зміни, які я вніс на веб-сторінку, яку я бачу?

  Зараз ви не можете. Як писав Джон Дж. Бартон у групі новин:

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

  Це довгозатребувана функціональність, тому колись вона буде доступна безпосередньо з Firebug. Тим часом ви можете спробувати Firediff , розширення для firebug від Кевіна Декера.

• Як я можу вивести всі зміни, внесені до CSS сайту в firebug?

  Це особливість, реалізована у « Фіредіффі» Кевіна Декера .

Ось часткове рішення. Після внесення змін натисніть на одне із посилань на відповідний файл. Це оригінальний файл, тому вам доведеться оновити файл, який знаходиться під кнопкою меню параметрів у верхньому правому куті панелі пожежних помилок. Тепер у вас є модифікована сторінка css, яку ви можете скопіювати та вставити. Очевидно, вам доведеться робити це для кожного файлу css.

Редагувати: схоже, Марк Бік має більш швидку версію

Дуже простий спосіб "редагувати" свою сторінку - це перейти на сайт через Інтернет-браузер. Збережіть сторінку як HTML лише на робочому столі. Перейдіть на робочий стіл і клацніть правою кнопкою миші на новому файлі веб-сторінки та виберіть "Відкрити", виберіть блокнот та відредагуйте сторінку звідти, якщо ви знаєте, що HTML буде це легко. Після завершення редагування збережіть файл і знову відкрийте веб-сторінку, зміни повинні бути там, якщо виконано правильно. Потім можна використовувати нову відредаговану сторінку та експортувати або копіювати її у віддалене місце

Насправді Firebug - це налагодження та аналіз-інструмент: не редактор і, очевидно, не вважається ним. Інша причина вже згадувалася: як потрібно змінити CSS, що зберігається на сервері при налагодженні веб-сторінки?