Простой и универсальный LivePreview

15.11.2023

Для просмотра работы кода HTML, CSS, JavaScript и др. в браузере без перезагрузки страницы используется режим live preview, как, например, в codepen.io. При работе в офф-лайн радакторах для этого требуется либо установить соответствующий плагин, либо воспользоваться сторонними решениями, например LiveReload. Эти способы работают при редактировании локального файла. А что делать, если редактируется файл на сервере?

Кто-то может спросить, а для чего редактировать файл сразу на сервере? Не лучше ли сначала изменить страницу локально, проверить её работоспособность и только после этого обновить её на сервере? Можно, но настройки сервера, как правило, не совпадают с настройками локального сервера разработчика и в таком случае практичнее сразу отлаживать код в тестовом файле на удалённом сервере, а после отладки обновлять рабочий файл. С другой стороны, существует немало задачь, которые можно решить сразу правкой файла на сервере, например, изменить стиль элемента, исправить ошибку в слове. Это удобно, но приводит к необходимости регулярного создания локальных копий файлов на случай, если файны на сервере будут утрачены.

Для обновления страницы в браузере необходимо определить факт изменения её файла. Для этого нужно отслеживать момент сохранения файла на сервере. Но мы сделаем намного проще и будем отслеживать не это, а вызов пользователем команды сохранения файла при помощи AutoHotkey.

Код скрипта автоматизации.

Здесь всё просто:

Отследить нажатие на клавиатуре сочетание клавиш для сохранения файла Ctrl + S
Вызвать команду меню редактора "Cохраненить файл"
Поставить задержку, поскольку файл на сервере сохранится не мгновенно
Если браузер открыт, то отправить ему команду F5 для обновления страницы
Вернуть фокус в редактор для продолжения редактирования файла

Зачем вызывать команду меню, если можно сразу по Ctrl + S сохранять файл? Мои эксперименты показали то, что AutoHotkey работает не так хорошо, как хотелось бы и зачастую при нажатии на Ctrl + S вместо сохранения файла в область редактирования кода вставляется символ s.

Способ не идеальный, но простой и универсальный.

actech