Верстать прямо в браузере и сохранять изменения в файлы — возможно ли?
Мне нравится верстать прямо в браузере: менять стили элементов, менять html-разметку.
Мне нужно, чтобы я нажимал кнопку, и стили сохранялись для каждой секции сайта в соответствующий scss-файл.
И чтобы верстка сохранялась в index.html, а секции html сохранялись каждая секция в соответствующий pug-файл, и чтобы в index.pug они импортировались.
Было бы неплохо менять JS-код в DevTools и сразу же сохранять изменения в файл.
_____
Это было бы удобнее, чем каждый раз копировать html/css/js - код в редактор кода
____
Есть ли такое расширение для браузера, которое может всё или часть из перечисленных мною функций?
Это называется WYSIWYG и устарело на двадцать лет.
Провоцирует верстку "по-секретарски" с наваленными кучей стилями вместо нормального стилевого решения.
Тем более, что сейчас статичные страницы вовсе уходят в прошлое, верстка собирается из подгруженных элементов.
Какая уж там "верстка в браузере".
live reload / hot reload так и работает. только код пишется в удобном редакторе, а изменения сразу же отображаются в браузере. вы каким-то не тем путем пошли.
Сергей delphinpro, я знаю про синхронизацию браузера с кодом в файлах. Неудобно постоянно переключаться между вкладками IDE и браузера.
Использовать режим разделения экрана? Это тоже не очень удобно, сайт показывает версию верстки для планшетов.
Тогда единственный вариант использовать hot reload:
это использовать его на двух мониторах: на одном IDE, на другом - браузер.
(но у меня нет двух мониторов)
alexeidilos, как-то вы делите вьюпорт браузера и девтулз. Значит, на ту площадь, которую занимает девтулз можно открыть код из редактора.
Стили можно редактировать через workspace/overrides в девтулзах. Но вряд ли он лягут в scss. Я пробовала только с css.
Если вы используете препроцессор и шаблонизатор, то желание вносить изменения в скомпилированную разметку в браузере выглядит совсем странным.
(но у меня нет двух мониторов)
Самый умный вариант это начать решать именно эту задачу.
Очень экономит время.
Если вы используете препроцессор и шаблонизатор, то желание вносить изменения в скомпилированную разметку в браузере выглядит совсем странным.
Было бы круто верстать на препроцессоре прямо в браузере, и потом сохранять измененную верстку и стили из браузера в формате .pug и .scss
___
Да, два монитора хорошая идея (ещё и кронштейны к ним, чтоб место на столе не занимали)
Для хромиум браузеров есть фишка Workspaces
Нужно будет настраивать source maps, сам я не пробовал но читал, вроде даже html так можно редактировать, который как то генерируется на сервере ну и конечно css и прочее тоже работает
Я посмотрел это видео)
Я добавил папку сайта в Workspace.
Пытался добавлять source mapы - что-то они не работают, и я стал просто сохранять измененный css-файл через Save As и перезаписывать оригинальный файл
Эта штука нужна, чтобы поправить мелкий баг отображения в конкретной версии браузера и передать разработчикам необходимые правки. И потом уже в нормальной среде разработки их встроить и зафиксировать с необходимыми комментариями.
Рассматривать этот инструмент как основной не стоит.
Можно. В developer console если вы нажмёте правую кнопку на файле в разделе network, увидите Save As. Но сохранить вы сможете на свой компьютер, не на сервер. Хотя, если смонтируете удалённую папку, то сможете и на сервер сохранить.
Простой
