Ответ 1
Я нашел ответ на это, по крайней мере, на Chrome v14.
В разделе "Элементы" просто нажмите ссылку "filename: linenumber" рядом с правилами CSS. Отображаемый файл CSS будет содержать все изменения.
Это место точно:
Экспорт изменений CSS из инспектора (webkit, firebug и т.д.)
Когда я работаю с CSS, я часто буду тестировать в браузере - например, Chrome - щелкните правой кнопкой мыши элемент, нажмите "Проверить элемент" и отредактируйте CSS прямо там. Использование клавиш со стрелками для изменения вещей, таких как край и отступы, упрощает подкладку вещей.
Не так сложно выполнить эти изменения и применить их к файлу CSS, но было бы здорово, если бы я мог просто щелкнуть правой кнопкой мыши селектор в инспекторе и выбрать "экспорт" или "копировать" и иметь содержимое доступный в моем буфере обмена.
Есть ли что-то подобное?
Ответы
Ответ 2
В Chrome вы можете щелкнуть правой кнопкой мыши файл CSS на вкладке "Источники" и нажать "Локальные изменения"
Это показывает все ваши локальные изменения. Каждая ревизия имеет временную метку, и вы можете откат к любой предыдущей версии.
См. раздел "Живое редактирование и история изменений" в этом уроке.
Ответ 3
Firediff - это дополнение Firebug, которое отслеживает изменения, выполненные в Firebug. Он регистрирует все, что вы будете делать в области HTML (отлично), но также и краткое использование расширения панели инструментов веб-разработчика (не так уж и много), скажем Shift-Ctrl-F, чтобы получить информацию о размере шрифта в px.
Я видел расширение Firebug в Chrome, но не тестировал его, я использую Firediff с Firefox.
Ответ 4
Я предложил этот продукт на SO раньше (я не связан с ними каким-либо образом).
Отличный продукт. Похоже, именно то, что вы ищете, и многое другое.
РЕДАКТИРОВАТЬ: Несколько других ответов здесь упомянули способность 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 в своем блоге, здесь.
Существует также удобный 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. Ницца!