https://www.high-endrolex.com/41 Простой и универсальный LivePreview
DroidScript
https://www.high-endrolex.com/41
DroidScript
скрипим понемногу

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

Статьи  
15.11.2023

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

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

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

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

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

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

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

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

Статьи  
© 2016-2024  Александр Страшко