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

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

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

смотрите историю редактирования и редактирования в реальном времени раздел этого урока.

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

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

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

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

http://www.skybound.ca/

отличный продукт. Звучит как именно то, что вы ищете и многое другое.

EDIT: несколько других ответов здесь упоминали способность Google Chrome ссылаться на ваши локальные файлы (что очень и очень круто). Проверьте другие ответы!

Как упоминалось cloudworks, ответ на это изменился. Теперь это может быть достигнуто довольно хорошо с помощью Chrome DevTools Autosave

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

мой продукт in-beta-soon LIVEditor это точно.

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

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

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

чтобы добавить ответ для Safari конкретно-это своего рода возможно.

при редактировании CSS в разделе стили в Инспекторе для существующего файла CSS, вы можете нажать Cmd-S повторно сохранить файл с изменениями. Однако, если вы используете метаязык, такой как Sass / preprocessor / generating your CSS with bundling etc, я не думаю, что это действительно решает эту проблему, хотя это может быть возможно с исходными картами CSS.

при редактировании CSS в верхней части Раздел стили, под Style Attribute чтобы добавить встроенные стили (не привязанные к существующему файлу CSS), не представляется возможным легко экспортировать все эти изменения. На данный момент я просто копирую и вставляю переопределения вручную для каждого элемента.

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

Я построил расширение Chrome, которое делает именно это.

Это называется StyleURL - Он принимает любые изменения CSS, которые вы сделали в Chrome Inspector, и выводит действительный CSS в качестве diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

вот пример, где я добавил "padding-bottom: 50px" на эту страницу:

Это с открытым исходным кодом на GitHub тоже: https://github.com/Jarred-Sumner/styleurl-extension