Как сохранить изменения CSS панели «Стили» в Chrome Developer Tools?

Question

Как сохранить изменения CSS в Панель стилей из Инструменты разработчика Google Chrome ?

На веб-сайте инструмента упоминается, что мы видим все изменения впанель ресурсов

Но я работаю локально над файлом CSS, но изменения не отображаются на панели ресурсов для меня

Кстати Знаете ли вы какие-либо дополнения, инструменты для сохранения изменений CSS в инструментах разработчика Chrome? Я знаю, что для Firebug их много https://stackoverflow.com/search?q=firebug+CSS+changes+save

Answer 1

Вы можете сохранить свои изменения CSS из самого Chrome Dev Tools.Chrome теперь позволяет вам добавлять локальные папки в ваше рабочее пространство.После разрешения Chrome доступа к папке и добавления папки в локальное рабочее пространство вы можете сопоставить веб-ресурс с локальным ресурсом.

• Перейдите на панель «Источники» в инструментах разработчика, Справа-нажмите на левой панели (где перечислены файлы) и выберите Добавить папку в рабочую область . Можно быстро перейти к таблице стилей на панели «Источники», щелкнув таблицу стилей в правом верхнем углу каждого правила CSS для выбранного элемента на панели «Элементы».

• После добавления папки вам потребуется предоставить Chrome доступ к папке.

• Далее необходимо сопоставить сетевой ресурс с локальным ресурсом.

• После перезагрузки страницы Chrome теперь загружает локальные ресурсы для сопоставленных файлов.Чтобы упростить задачу, Chrome отображает только локальные ресурсы (так что вас не смущает, редактируете ли вы локальный или сетевой ресурс).Чтобы сохранить изменения, нажмите CTRL + S при редактировании файла.

ps

Возможно, вам придется открыть сопоставленные файлы и начать редактирование, чтобы Chrome применил локальныйверсия (дата 201604.12).

Answer 2

Технический писатель и разработчик DevTools выступают здесь.

Начиная с Chrome 65, Local Overrides - это новый, легкий способ сделать это.Это другая функция, чем в рабочих пространствах.

Настройка переопределений

1. Перейти к панели Источники .
2. Перейти к Переопределения * вкладка 1015 *.
3. Нажмите Выбрать папку для переопределений .
4. Выберите каталог, в который вы хотите сохранить изменения.
5. В верхней части окна просмотра нажмите Разрешить , чтобы дать DevTools права на чтение и запись в каталог.
6. Внесите изменения.В GIF ниже вы можете видеть, что изменение background:rosybrown сохраняется при загрузке страниц.

Как работают переопределения

Когда вы вносите изменения в DevTools, DevTools сохраняет изменения в измененной копии файла на вашем компьютере.При перезагрузке страницы DevTools обслуживает измененный файл, а не сетевой ресурс.

Разница между переопределениями и рабочими пространствами

Рабочие пространства позволяют вам использовать DevTools в качестве IDE.Он сопоставляет код вашего репозитория с кодом сети, используя исходные карты.Реальное преимущество заключается в том, что если вы минимизируете свой код или используете код, который необходимо передать, например, SCSS, то изменения, которые вы вносите в DevTools (обычно), возвращаются в исходный исходный код.Переопределения, с другой стороны, позволяют вам изменять и сохранять любые файлы в Интернете.Это хорошее решение, если вы просто хотите быстро поэкспериментировать с изменениями и сохранить эти изменения при загрузке страниц.

Answer 3

Новые версии Chrome имеют функцию, называемую рабочими пространствами, которая решает эту проблему. Вы можете определить, какие пути на вашем веб-сервере соответствуют каким путям в вашей системе, затем отредактировать и сохранить с помощью всего лишь ctrl-s.

См .: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

Answer 4

Я знаю, что это старый пост, но я сохраняю его следующим образом:

1. Перейти к панели источников.
2. Нажмите Показать навигатор (чтобы отобразить панель навигатора слева).
3. Щелкните нужный файл CSS.(Он откроется в редакторе со всеми внесенными вами изменениями)
4. Щелкните правой кнопкой мыши на редакторе и сохраните изменения.

Вы также можете увидеть Локальные модификации чтобы увидеть ваши изменения, очень интересная особенность.Также работайте со скриптами.

Answer 5

Вы смотрите не в том разделе "Ресурсы".

Это не в разделе "Локальное хранилище", а в разделе "Кадры":

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

Answer 6

Расширение Tincr Chrome проще в установке (не нужно запускать сервер узлов), а также поставляется с LiveReload, как функциональность из коробки!Разговор о двунаправленном редактировании!:)

Сайт Tin.cr

Интернет-магазин Chrome Ссылка

Статья в блоге Энди

Answer 7

Теперь, когда Chrome 18 был выпущен на прошлой неделе с необходимыми API, я опубликовал свое расширение Chrome в интернет-магазине Chrome.Расширение автоматически сохраняет изменения в CSS или JS в инструментах разработчика на локальном диске.Иди проверь это.

Answer 8

FYI, если вы используете встроенные стили или изменяете DOM напрямую (например, добавляете элемент), рабочие пространства не решают эту проблему.Это потому, что DOM живет в памяти, и нет фактического файла, связанного с активным состоянием DOM.

Для этого я хотел бы сделать снимок "до" и "после" dom изconsole: copy(document.getElementsByTagName('html')[0].outerHTML)

Затем я помещаю его в инструмент сравнения, чтобы увидеть мои изменения.

Полный текст статьи: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

Answer 9

Чтобы ответить на последнюю часть вашего вопроса о любых расширениях, которые могут сохранять изменения, есть исправление

Это позволяет сохранять изменения из Chrome Dev Tools непосредственно в GitHub.Оттуда вы можете настроить перехват получения на GitHub для автоматического обновления вашего сайта.

Answer 10

Пока вы не вставляете CSS в element.style:

1. Перейдите к стилю, который вы добавили.Там должна быть ссылка с надписью инспектор-таблица стилей:

Нажмите на него, и он откроет все CSS, которые вы добавили на панели источников

Скопируйте и вставьте его - ура!

Если вы использовали element.style:

Вы можете просто щелкнуть правой кнопкой мыши на элементе HTML, нажать «Изменить как HTML», а затем скопировать и вставить HTMLсо встроенными стилями.