Как сохранить изменения CSS Панель стилей Инструменты разработчика Google Chrome?
На веб-сайте инструмента упоминалось, что мы видим все изменения в панели ресурсов
Но я работаю локально в файле CSS, но изменения не отображаются в панели ресурсов для меня
Кстати, знаете ли вы какие-либо надстройки, инструменты для сохранения изменений в css для инструментов разработчика Chrome? Я знаю, что для Firebug существует много https://stackoverflow.com/search?q=firebug+CSS+changes+save
Вы можете сохранить свои изменения CSS из самого инструмента Chrome Dev. Теперь Chrome позволяет добавлять локальные папки в рабочую область. Предоставив Chrome доступ к папке и добавив папку в локальную рабочую область, вы можете сопоставить веб-ресурс с локальным ресурсом.
После добавления папки вам нужно будет предоставить Chrome доступ к этой папке.
Затем вам нужно сопоставить сетевой ресурс с локальным ресурсом.
CTRL + S при редактировании файла.p.s.
Возможно, вам придется открыть сопоставленный файл и начать редактирование, чтобы Chrome применял локальную версию (дата 201604.12).
В новых версиях Chrome есть функция, называемая рабочими пространствами, которая устраняет эту проблему. Вы можете определить, какие пути на вашем веб-сервере соответствуют каким путям в вашей системе, а затем редактировать и сохранять только с помощью ctrl-s.
Смотрите: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
Автор и разработчик DevTools выступают здесь.
Начиная с Chrome 65, Local Overrides - это новый, легкий способ сделать это. Это другая функция, чем в рабочих пространствах.
background:rosybrown сохраняется при загрузке страницы. 
Когда вы вносите изменения в DevTools, DevTools сохраняет изменения в измененной копии файла на вашем компьютере. Когда вы перезагружаете страницу, DevTools обслуживает измененный файл, а не сетевой ресурс.
Рабочие пространства предназначены для того, чтобы вы могли использовать DevTools в качестве вашей IDE. Он сопоставляет код вашего репозитория с кодом сети, используя исходные карты. Реальное преимущество заключается в том, что если вы минимизируете свой код или используете код, который необходимо передать, например, SCSS, то изменения, которые вы вносите в DevTools (обычно), возвращаются в исходный исходный код. Переопределения, с другой стороны, позволяют вам изменять и сохранять любые файлы в Интернете. Это хорошее решение, если вы просто хотите быстро поэкспериментировать с изменениями и сохранить эти изменения при загрузке страниц.
Вы смотрите неправильный раздел "Ресурсы".
Это не под "Local Storage", это под "Frames":
На приведенном выше снимке экрана показаны отличия от оригинальных стилей от новых изменений, сделанных в devtools. Вы можете щелкнуть правой кнопкой мыши элемент на левой панели и сохранить его обратно на диск.
Я знаю, что это старый пост, но я сохраняю его так:
Вы также можете увидеть Локальные модификации, чтобы увидеть ваши ревизии, очень интересная функция. Также работайте со скриптами.
Расширение Tincr Chrome проще в установке (нет необходимости запускать сервер node), а также поставляется с функцией LiveReload как функция! Поговорите о двунаправленном редактировании!:)
Теперь, когда Chrome 18 был выпущен на прошлой неделе с необходимыми API, я опубликовал расширение chrome в веб-магазине Chrome. Расширение автоматически сохраняет изменения в CSS или JS в инструментах разработчика на локальном диске. Пойдите, проверьте это.
Чтобы ответить на последнюю часть вашего вопроса о любых расширениях, которые могут сохранять изменения, есть hotfix
Он позволяет вам сохранять изменения с помощью инструментов Chrome Dev прямо в GitHub. Оттуда вы можете настроить почтовый прием на GitHub для автоматического обновления вашего веб-сайта.
FYI. Если вы используете встроенные стили или напрямую изменяете DOM (например, добавляете элемент), рабочие пространства не решают эту проблему. Это потому, что DOM живет в памяти, и нет фактического файла, связанного с активным состоянием DOM.
Для этого мне нравится делать снимок dom до и после "до" с консоли:
copy(document.getElementsByTagName('html')[0].outerHTML)
Затем я помещаю его в инструмент diff, чтобы увидеть мои изменения.
Полная статья: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a
В настоящее время существует API для расширений DevTools для получения уведомлений о изменяемых ресурсах, поэтому вы можете создать расширение, которое будет интегрироваться с вашей IDE по выбору или просто разместить содержимое ресурса на сервере WebDAV:
element.style: 
Нажмите на него, и он откроет все CSS, добавленные вами на панели источников
Скопируйте и вставьте его - yay!
element.style:Вы можете просто щелкнуть правой кнопкой мыши по элементу HTML, нажать "Редактировать как HTML", а затем скопировать и вставить HTML с встроенными стилями.