Расширение для браузера: как сохранять правки из DevTools в SCSS, Pug и HTML
Веб-разработчики часто сталкиваются с задачей быстрого прототипирования прямо в браузере. Изменение стилей, HTML-разметки и даже JavaScript-кода через инструменты разработчика (DevTools) экономит время, но возникает проблема: как сохранить эти правки в исходные файлы проекта? В этой статье мы разберём, какие расширения для браузера позволяют автоматически экспортировать изменения из DevTools в SCSS, Pug и HTML, и как настроить рабочий процесс без ручного копирования.
Почему разработчики правят код в браузере?
Работа напрямую в DevTools даёт мгновенную обратную связь: вы меняете свойство CSS и сразу видите результат на странице. Это удобно для экспериментов с дизайном, адаптивной вёрсткой или отладкой скриптов. Однако стандартные инструменты браузера не умеют синхронизировать изменения с файловой системой - все правки теряются после обновления страницы. Чтобы этого избежать, нужны специальные утилиты или расширения.
Какое расширение для браузера сохраняет стили в SCSS?
Для сохранения изменений CSS (и SCSS) из DevTools в реальные файлы используется расширение «LiveStyle» (для Chrome и Safari). Оно работает в паре с плагином для редактора кода (например, Sublime Text или VS Code). Принцип: вы редактируете стили в браузере, а LiveStyle автоматически записывает их в нужный SCSS-файл, отслеживая соответствие селекторов. Расширение поддерживает препроцессоры и позволяет сохранять правки для каждой секции сайта в отдельный файл, если настроены карты источников (sourcemaps).
Как настроить LiveStyle для работы с SCSS:
- Установите расширение LiveStyle в браузер.
- Установите соответствующий плагин в ваш редактор (например, для VS Code - «LiveStyle for VS Code»).
- Откройте проект с SCSS-файлами, убедитесь, что sourcemaps включены в настройках сборщика (gulp, webpack).
- Начните редактировать стили в DevTools - изменения автоматически попадут в исходные .scss-файлы.
Сохранение HTML-разметки в Pug и импорт секций
Для работы с HTML и Pug (Jade) задача сложнее, так как LiveStyle не поддерживает шаблонизаторы напрямую. Однако есть альтернатива - использовать расширение «Web Scraper» или связку DevTools + BrowserSync. BrowserSync синхронизирует изменения между браузером и файлами, но не умеет разбивать секции на отдельные Pug-компоненты. Для автоматического разбиения HTML на секции и сохранения их в соответствующие .pug-файлы потребуется написать небольшой скрипт-парсер или использовать сборщик (например, Gulp с плагином gulp-html2pug).
Рабочий процесс для Pug:
- Верстайте в браузере, а затем копируйте изменённый HTML-код.
- Используйте утилиту html2pug (онлайн-конвертер или npm-пакет) для преобразования каждой секции в Pug.
- Автоматизируйте процесс через Gulp: настройте задачу, которая при сохранении HTML-файла разбивает его по селекторам и генерирует .pug-файлы с импортами в index.pug.
Изменение JS в DevTools и сохранение в файл
Для JavaScript существует функция «Local Overrides» в самом Chrome DevTools. Она позволяет сохранять изменения скриптов прямо в локальную папку. Включите её в панели Sources (Sources → Overrides), укажите папку проекта, и при изменении JS-кода в DevTools он будет автоматически записываться в соответствующий файл на диске. Это не требует сторонних расширений и работает «из коробки».
Альтернативы и комплексные решения
Если вы ищете единое расширение, которое делает всё сразу - сохраняет стили в SCSS, HTML в Pug и JS в файлы, - то на данный момент такого универсального инструмента нет. Лучший подход - комбинация: LiveStyle для CSS/SCSS, Local Overrides для JS и Gulp-сборка для конвертации HTML в Pug. Это даёт полный контроль и автоматизацию без потери производительности.
Рекомендации по настройке рабочего процесса
Чтобы минимизировать ручное копирование, используйте BrowserSync для горячей перезагрузки и синхронизации. Настройте sourcemaps для SCSS, включите Overrides для JS, а для Pug используйте шаблонизатор в связке с Gulp - это позволит редактировать секции по отдельности и автоматически импортировать их в главный файл. Такой подход почти полностью заменяет желаемое «универсальное расширение» и ускоряет разработку в 2-3 раза.