Как сохранить изменения CSS из панели Стили в Google Chrome Инструменты разработчика ?
На сайте инструмента упоминается, что мы можем увидеть все изменения в панели ресурсов.
Но я работаю локально над файлом CSS, но изменения не отображаются на панели ресурсов для меня
Кстати, знаете ли вы какие-либо дополнения, инструменты для сохранения изменений CSS в инструментах разработчика Chrome? Я знаю, что для Firebug есть много https://stackoverflow.com/search?q=firebug+CSS+changes+save
html
css
google-chrome
google-chrome-extension
google-chrome-devtools
Джитендра Вьяс
источник
источник
Ответы:
Вы можете сохранить свои изменения CSS из самого Chrome Dev Tools. Теперь Chrome позволяет добавлять локальные папки в рабочую область. После разрешения Chrome доступа к папке и добавления папки в локальное рабочее пространство вы можете сопоставить веб-ресурс с локальным ресурсом.
После добавления папки вы должны предоставить Chrome доступ к папке.
Далее необходимо сопоставить сетевой ресурс с локальным ресурсом.
CTRL + Sпри редактировании файла.п.с.
Возможно, вам придется открыть сопоставленные файлы и начать редактирование, чтобы Chrome применил локальную версию (дата 201604.12).
источник
Автор и разработчик DevTools выступают здесь.
Начиная с Chrome 65, Local Overrides - это новый, легкий способ сделать это. Это другая функция, чем в рабочих пространствах.
Установить переопределения
background:rosybrownизменение сохраняется при загрузке страницы.Как работает переопределение
Когда вы вносите изменения в DevTools, DevTools сохраняет изменения в измененной копии файла на вашем компьютере. Когда вы перезагружаете страницу, DevTools обслуживает измененный файл, а не сетевой ресурс.
Разница между переопределениями и рабочими пространствами
Workspaces позволяет вам использовать DevTools в качестве вашей IDE. Он сопоставляет код вашего репозитория с кодом сети, используя исходные карты. Реальное преимущество заключается в том, что если вы минимизируете свой код или используете код, который необходимо передать, например, SCSS, то изменения, которые вы вносите в DevTools (обычно), возвращаются в исходный исходный код. Переопределения, с другой стороны, позволяют вам изменять и сохранять любые файлы в Интернете. Это хорошее решение, если вы просто хотите быстро поэкспериментировать с изменениями и сохранить эти изменения при загрузке страницы.
источник
В новых версиях Chrome есть функция рабочих пространств, которая решает эту проблему. Вы можете определить, какие пути на вашем веб-сервере соответствуют каким путям в вашей системе, затем отредактировать и сохранить с помощью всего лишь ctrl-s.
Смотрите: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
источник
Я знаю, что это старый пост, но я сохраняю его так:
Вы также можете увидеть локальные модификации, чтобы увидеть ваши ревизии, очень интересная функция. Также работайте со скриптами.
источник
Вы смотрите не в том разделе "Ресурсы".
Это не в разделе «Локальное хранилище», а в разделе «Рамки»:
На приведенном выше снимке экрана показаны различия между оригинальными стилями и изменениями, внесенными в 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:Нажмите на него, и он откроет все CSS, которые вы добавили в панель источников
Скопируйте и вставьте его - ууу!
Если вы уже использовали
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, а затем внести свои изменения и перезагрузить страницу, чтобы увидеть эффект.
источник