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

Быстрый ответ

1. Чтобы сохранить изменения на локальном уровне, воспользуйтесь функциональностью Рабочая область в Chrome DevTools.

2. Добавьте папку проекта в Рабочую область через контекстное меню во вкладке Источники, выбрав пункт Добавить папку в рабочую область.

3. Предоставьте браузеру Chrome доступ к указанной папке.

4. Сопоставьте локальные файлы с ресурсами из сети на панели Сеть посредством контекстного меню и пункта Сопоставить с ресурсом файловой системы.

5. После совершения сопоставления, все изменения, внесенные во вкладку Стили, будут автоматически применены к локальным CSS-файлам.

Проверка сопоставления: убедитесь, что правила, например .selector { color: red; }, успешно синхронизированы и видны в локальных файлах проекта после его обновления.

Пошаговое руководство: Легкое сохранение изменений CSS

Настройка Рабочей области: Ваша IDE внутри DevTools

Рабочие области в DevTools позволяют обрабатывать код в сходной с вашей локальной средой разработки IDE. Чтобы начать, добавьте папку проекта в Рабочую область и все внесенные изменения сохранятся на вашем жёстком диске.

// Проще говоря:
// Рабочая область == IDE, интегрированная в DevTools

Подробнее об этом расскажет наш спикер на видео

Локальные переопределения: Безопасные эксперименты с кодом

Пользуйтесь Локальными переопределениями для безопасного экспериментирования с кодом. Назначьте папку для хранения этих изменений и сохраняйте ваши корректировки с помощью CTRL + S.

// Запомните:
// CTRL + S == спасение ваших изменений

Сопоставление файлов: Ключ к сохранению изменений

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

// Не забывайте: 
// Точное сопоставление == успешное сохранение после перезагрузки

Управление изменениями: Отслеживание корректировок

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

// Потому что: 
// Архивация изменений == экономия времени

Визуализация

Как отразить внесенные вами CSS-модификации в DevTools Chrome:

| Действие           | Визуализация            |
| ------------------ | ---------------------- |
| Ручная настройка   | 🌳🌺=>🌳🌼              |
| Сохранение изменений | 📸                     |
| Сохранение в локальных файлах | 🏡            |

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

Исходный вид страницы: 🌳🌺🌿🌷
Изменения через DevTools: 🌳🌼🌿🌹
Сохранение изменений: 🏡🌳🌼🌿🌹

Не оставляйте свою страницу без ваших стилевых преобразований!

Распространенные сценарии: Обращаем сложности в возможности

Проблемы со сохранением изменений

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

// В программировании помните:
// Если не удаётся увидеть изменения сразу, попробуйте перезагрузить всё снова.

Версионирование кода

Аналогично работе в Git, Рабочие области в DevTools обеспечивают синхронизацию кода между вашим репозиторием и текущим состоянием веб-сайта.

Поиск сохраненных изменений

Все внесенные вами изменения хранятся в разделе "Фреймы" на панели Ресурсы, а не в "Локальном хранилище". Там их легко сравнить.

// Совет альпиниста:
// Ищите ваши изменения в "Фреймах", а не в "Локальном хранилище".

Работа вне рамок тестирования: Переопределения и Рабочие области

Используйте Переопределения для быстрого тестирования, а Рабочие области — в качестве вашей локальной среды разработки.

Настройка обновлений

Следите за обновлениями в Chrome DevTools. Например, в Chrome 65 была добавлена функция Локальных переопределений.

Полезные материалы

1. Редактирование и сохранение файлов в рабочей области | Chrome для разработчиков – руководство по работе с Рабочими областями Chrome DevTools.
2. Использование Chrome DevTools для CSS – YouTube – видеоурок по внесению изменений CSS через Chrome DevTools.
3. New in Chrome: CSS Overview | CSS-Tricks – обзор нововведений в DevTools для анализа CSS.
4. Что нового в DevTools (Chrome 65) | Chrome для разработчиков – обзор возможностей DevTools Chrome 65, включая переопределение CSS.
5. Что такое инструменты разработчика браузера? – MDN – руководство по инструментам разработчика браузера.