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

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

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

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

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

10 ответов

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

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

  • После добавления папки вы должны предоставить Chrome доступ к этой папке.Разрешить доступ к 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 обслуживает измененный файл, а не сетевой ресурс.

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

Рабочие пространства предназначены для того, чтобы вы могли использовать 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 в инструментах разработчика на локальном диске. Иди проверь это.

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

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

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

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

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

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

Подробнее об этом Редактируйте файлы с помощью рабочих областей

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

Пока вы не придерживались CSS в element.style:

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

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

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

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

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

К вашему сведению, если вы используете встроенные стили или изменяете 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

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

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

Другие вопросы по тегам