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

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

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

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

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

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

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

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

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

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

п.с.

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

Автор и разработчик DevTools выступают здесь.

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

Установить переопределения

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

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

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

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

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

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

Смотрите: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

Я знаю, что это старый пост, но я сохраняю его так:

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

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

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

Это не в разделе «Локальное хранилище», а в разделе «Рамки»:

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

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

Веб-сайт Tin.cr

Интернет-магазин Chrome

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ОБНОВЛЕНИЕ 2019: Поскольку другие ответы немного устарели, я добавлю обновленный ответ здесь. В последней версии нет необходимости сопоставлять папку chrome с файловой системой.

Итак, предположим, у меня есть веб-папка, содержащая файлы HTML, CSS, JS на рабочем столе, которые я хочу обновить при внесении изменений в chrome: =

1) Вам понадобится работающий локальный сервер, такой как узел и т. Д., В качестве альтернативы это расширение vscode создает сервер для вас: расширение VSCode для живого сервера , установите его, запустите сервер.

2) загрузить HTML-страницу в Chrome с запуска локального сервера.

3) Откройте devTools-> Sources-> Filesystem-> Добавить папку в рабочую область.

4) Добавьте папку, которая используется при запуске локального сервера. Никаких дополнительных карт не требуется в последней версии Chrome! Та-да!

Подробнее об этом Редактировать файлы с рабочими областями

Обратите внимание, что изменения, сделанные на вкладке стилей, НЕ отразятся на файлах файловой системы. Вместо этого вам нужно перейти в devtools-> source-> your_folder, а затем внести свои изменения и перезагрузить страницу, чтобы увидеть эффект.