Верстать прямо в браузере и сохранять изменения в файлы — возможно ли?

Question

[alexeidilos]

Мне нравится верстать прямо в браузере: менять стили элементов, менять html-разметку.
Мне нужно, чтобы я нажимал кнопку, и стили сохранялись для каждой секции сайта в соответствующий scss-файл.
И чтобы верстка сохранялась в index.html, а секции html сохранялись каждая секция в соответствующий pug-файл, и чтобы в index.pug они импортировались.
Было бы неплохо менять JS-код в DevTools и сразу же сохранять изменения в файл.
_____
Это было бы удобнее, чем каждый раз копировать html/css/js - код в редактор кода
____
Есть ли такое расширение для браузера, которое может всё или часть из перечисленных мною функций?

Comments

[Adamos]

Это называется WYSIWYG и устарело на двадцать лет.
Провоцирует верстку "по-секретарски" с наваленными кучей стилями вместо нормального стилевого решения.
Тем более, что сейчас статичные страницы вовсе уходят в прошлое, верстка собирается из подгруженных элементов.
Какая уж там "верстка в браузере".

[alexeidilos]

Adamos, хорошо, но для верстки обычного лендинга - подойдёт же?

[Владислав Лысков]

alexeidilos, не подойдёт, используйте современны инструменты как минимум hot-reload, пишете код и сразу видите что вы верстаете

Answer 1

[rPman]

Для хромиум браузеров есть фишка Workspaces
Нужно будет настраивать source maps, сам я не пробовал но читал, вроде даже html так можно редактировать, который как то генерируется на сервере ну и конечно css и прочее тоже работает

Comments

[alexeidilos]

Я посмотрел это видео)
Я добавил папку сайта в Workspace.
Пытался добавлять source mapы - что-то они не работают, и я стал просто сохранять измененный css-файл через Save As и перезаписывать оригинальный файл

Answer 2

[Refguser]

нет