Экспорт изменений CSS из инспектора (webkit, firebug и т.д.)

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

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

Есть ли что-то подобное?

ОТВЕТЫ

Ответ 1

Я нашел ответ на это, по крайней мере, на Chrome v14.

В разделе "Элементы" просто нажмите ссылку "filename: linenumber" рядом с правилами CSS. Отображаемый файл CSS будет содержать все изменения.

Это место точно:

https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg

Ответ 2

В Chrome вы можете щелкнуть правой кнопкой мыши файл CSS на вкладке "Источники" и нажать "Локальные изменения"

Это показывает все ваши локальные изменения. Каждая ревизия имеет временную метку, и вы можете откат к любой предыдущей версии.

См. раздел "Живое редактирование и история изменений" в этом уроке.

Ответ 3

Firediff - это дополнение Firebug, которое отслеживает изменения, выполненные в Firebug. Он регистрирует все, что вы будете делать в области HTML (отлично), но также и краткое использование расширения панели инструментов веб-разработчика (не так уж и много), скажем Shift-Ctrl-F, чтобы получить информацию о размере шрифта в px.

Я видел расширение Firebug в Chrome, но не тестировал его, я использую Firediff с Firefox.

Ответ 4

Я предложил этот продукт на SO раньше (я не связан с ними каким-либо образом).

http://www.skybound.ca/

Отличный продукт. Похоже, именно то, что вы ищете, и многое другое.

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

Ответ 5

Если вы редактируете внешний CSS, вы можете перетащить последнюю версию с панели "Ресурсы" в любой текстовый редактор, поддерживающий DnD (см. http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/, раздел "Сохраняющиеся изменения" для более подробной информации.) Вы также можете вернуть свои изменения CSS в любую более раннюю версию ресурса таблицы стилей (в контекстном меню правой кнопки мыши любой версии таблицы стилей).

Ответ 6

Как упоминалось cloudworks, ответ на это изменился. Этого можно добиться довольно успешно при расширении Chrome DevTools Autosave. Этот инструмент отслеживает изменения CSS и JavaScript, сделанные в консоли Chrome Developer Tools, и сохраняет их обратно в локальные файлы. Инструкции по установке и настройке расширения см. В руководстве, написанном @addyosmani в своем блоге, здесь.

enter image description here

Существует также удобный screencast, который подробно описывает расширение.

Ответ 7

С Workspaces вы можете сохранить свой CSS при вводе их в своем инспекторе (в Chrome). Проблема в том, что каждое изменение автоматически сохраняется и нет возможности отключить эту функцию, как указано в http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ и Отключить автоматическое сохранение изменений CSS в инструментах разработчика Chrome.

Ответ 8

My in-beta-soon product LIVEditor делает это точно.

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

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

Ответ 9

Если вы используете инструменты разработчика акций Firefox, вы можете отредактировать css непосредственно в диалоговом окне инструментов - нажмите кнопку просмотра CSS (что кнопка вверху с символом {}) и отредактируйте свой css напрямую. Он будет обновляться в реальном времени в браузере, и когда вы закончите, просто скопируйте его прямо в свой файл css. Ницца!