Live preview brackets как настроить
Перейти к содержимому

Live preview brackets как настроить

  • автор:

Предварительный просмотр работы кода (Live Preview) на этапе разработки ПО: сложности и решения

При взаимодействии пользователя с компьютерной системой, имеющей экран, происходит визуализация действий, данных и работы программного кода — их отображение на нём. Пользователь перемещает мышь или нажимает на клавиши клавиатуры — это действия, которые сразу видны на экране посредством движения курсора мыши, текстового курсора и появления текста. Движение курсора по экрану, щелчок по кнопке, выбор пункта меню — это тоже действия. К данным в широком смысле относится текст и графика — интерфейсы, элементы дизайна, данные в таблице, графики и др. Действия и данные напрямую связаны с работой программного кода и можно сказать, что последний визуализируется посредством первых двух. Например, в графическом редакторе пользователь выбрал фигуру, а затем перемещает курсор мыши с зажатой клавишей в рабочем поле. Вслед за движением курсора на экране начинает отображаться фигура и данные — её положение, размеры, форма, цвет, контур и т.д. Часть данных отображается при помощи элементов интерфейса, а часть мы видим и анализируем непосредсвенно, что происходит одновременно с действиями. Также происходит при редактировании текста, видео, музыкальных данных и др. При достаточной вычислительной мощности компьютера пользователь сразу видит изменения на экране и не задумывается об этом. Если что-то работает недостаточно быстро, то решить задачу качественно он может путём приобретения более производительного компьютера или комплектующих. Программисты-разработчики также могут воспользоваться более мощной аппаратной конфигурацией, но последнее может не дать ожидаемого эффекта. А нужен ли живой просмотр при разработке ПО? Конечно! Если отображение работы кода происходит практически одновременно с его редактированием, что называется Live Priview или живой просмотр, то эффективность работы увеличится по сравнению со случаем, когда сначала код редактируется, а затем производится его запуск на выполнение. Проверить это легко. Какие эмоции будут у пользователя, если изображение или текст в редакторе будут появляться через несколько секунд после движения мыши и нажатия на клавиши? Но компиляция кода может происходить значительно дольше, а при разработке её приходится делать постоянно, на что тратится немало времени и ресурсов. Значит, нужно каким-то образом ускорить компиляцию кода. А можно ли при использовании компилируемых языков программирования добиться живого просмотра? Теоретически, да, путём увеличения аппаратно-программной вычислительной мощности и использованием менее требовательного к ресурсам ПО (прошлых лет). Например, можно увеличить размер оперативной памяти, создать в ней виртуальный диск и установить на него среду разработки, что вся работа происходила в ней без обращения к твёрдотельному или жесткому диску. Но устроит ли работа с устаревшим ПО заказчика и разработчика? Нет. Значит, компиляция с последующей сборкой (установкой) и запуском приложения в современных средах разработки пока останется затратным по времени процессом. Для её компенсации используют разные подходы:

  • увеличевают функциональность и удобство работы в редакторах кода
  • включают в пакет редактор форм, позволяющий визуальным образом располагать в рабочей области элементы и настраивать их свойства. При этом невозможно интерактивное взаимодействие с ними, но эффективность разработки всё равно повышается в большинстве случаев
  • используют интерактивные среды прототипирования. Здесь другой недостаток — примерное (эскизочное) отображение интерфейса и ограниченная функциональность
  • программируют динамическое изменение кода без необходимости его перекомпиляции
  • применяют в разработке интерпретируемые языки программирования и скрптовые движки

Последний пункт вызывает особый интерес, так как вокруг существует немало интерпретируемых языков программирования. Но многие ли из них позволяют осуществить удобный и столь необходимый на этапе разработки интерактивный живой просмотр? Сходу можно вспомнить Dreamweaver с вкладкой Live, Brackets с функцией Live Preview, браузер Chrome с workspace, несколько Интернет-ресурсов, имеющих on-line редакторы и «песочницы» для быстрого знакомства с возможностями предлагаемых технологий и создания набросков (скетчей), а также пару сред разработки мобильных приложений — App Inventor, Corona SDK, PhoneGap. Кажется, что всё неплохо, но живой просмотр в Dreamweaver более или менее хорошо работает только с простой статичной разметкой. В Brackets он привязан к браузеру Chrome и работает крайне нестабильно, если вообще работает. В Chrome также случаются странности, не позволяющие испытывать удовольствия от работы. Имитация мобильных устройств в настольных средах разработки не отличается наглядностью (в большинстве случаев), а web-редакторы не поражают своей функциональностью. Получается так, что живой просмотр на этапе разработки приложений используется, главным образом, для демонстрации некоторых возможностей интерпретируемых технологий, обучения и создания набросков, тогда как на этапе выполнения приложения он является важнейшей и неотъемлемой частью, которую пользователи воспринимают как нечто необходимое и само сабой разумеющееся. Почему так происходит?

Одна из причин — различие конфигураций среды разработки и выполнения, например, разработка ведётся в оконной среде, а выполняется в браузерной, или прототипирование происходит в одной операционной системе для другой и т.п. В Dreamweaver для отображения результатов используется эмулятор браузера, работа которого, надо сказать, весьма существенно отличается от работы популярных браузеров. Разработчики Brackets и Chrome выбрали другой подход — живой просмотр в рабочей среде (в браузере), но, к сожалению, пока их решения работаю нестабильно. Браузерные on-line редакторы позволяют вести разработку в среде выполнения, но тут есть нюансы со спецификой работы разных браузеров, да и по функциональности они отстают от оконных сред разработки.

Из сказанного можно сделать вывод о том, что существует два основных способа организации живого просмотра:

  • в рабочей среде, например, разработка в Windows под Windows
  • в имитации рабочей среды с использованием эмуляторов браузеров, операционных систем и др.

Для этого можно:

  • использовать существующую (официальную или стороннюю) среду разработки
  • воспользоваться существующим редактором или модулем редактора и дополнить его нужной функциональностью
  • разработать свой редактор

Последний вариант потребует немало времени и усилий, и в большинстве случаев это будет мало кому нужным решением.

Использование модуля редактора является неплохой идеей, но и здесь потребуется немало времени на его адаптацию и дополнение необходимой функциональностью. Для интереса можно посмотреть браузерный редактор DroidScript. Его можно доработать, но не получится выйти на уровень эффективности работы в полнофункциональных средах разработки. Также можно, например, в редакторе NotePad++ добавить подсветку qml-кода и создать сценарий для его запуска на выполнение, но от этого он не превратится в Qt Creator, Visual Studio или Android Studio.

Остаётся первый вариант — использовать готовую среду разработки и дополнить её возможностью интерактивного живого просмотра. Вот здесь, пожалуй, и начинается самое интересное. Рассмотрим подход, который позволит осуществить живой просмотр при использовании практически любого редактора или среды разработки для интерпретируемых языков программирования, что даст:

  • Работу в удобной среде разработки
  • Независимость среды разработки от среды выполнения
  • Интерактивный живой просмотр в среде выполнения

Для осуществления этого нам потребуются:

  • Редактор кода
  • Детектор изменений целевой директории
  • Сервер
  • Клиенты

Модуль детектора регулярно опрашивает целевую директорию на предмет изменения в ней количества файлов или их содержимого. При обнаружении этого он выдаёт команду серверу, который, в свою очередь, уведомляет клиентов (или изменяет флаг состояния, регулярно опрашиваемых клиентами) о необходимости получения ими данных для отображения на экране. Для запуска этого механизма разработчику остаётся регулярно сохранять файлы проекта в целевой директории.

При выборе периода сканирования целевой директории меньше секунды, использования достаточно скоростной сети и производительных устройств — телефонов, планшетов, ноутбуков, настольных компьютеров и др., возможно реализовать одновременный просмотр выполнения кода на разных устройствах в реальном времени.

Код такого проекта, скорее всего, будет дан в разделе Qt Quick применительно к среде разработки Qt Creator, но некоторые общие моменты поясню здесь.

Детектор проверяет время изменения файлов и может отправлять серверу либо полный путь к изменённому файлу, либо пересылать его содержимое. Если проект состоит из главного файла и нескольких подключаемых к нему файлов-модулей, то при изменении модулей клиенты должны обновить главный файл. В первом случае им передаётся имя файла для загрузки, а во втором — текстовая строка, которую нужно интерпретировать в код, что умеют делать, например, движки на JavaScript и QML. После интерпретации кода он отображается в рабочей среде устройства или в браузере. Для обмена данными стоит обратить внимание на веб-сокеты, работа с которыми, к слову, происходит просто в QML.

Думается, что наибольшую пользу показанный подход может принести при кроссплатформенной разработке и тестировании, когда можно сразу после сохранения кода увидеть его работу на телефоне, планшете, эмуляторе, большом мониторе. За это глаза не скажут спасибо, но необязательно одного разработчика загружать десятком устройств. При одноплатформенной разработке эффект также будет виден, так как не придётся долго думать над тем, какой выбрать редактор, есть ли в нём Live Preview и куда выводятся результаты. Разработчик это выбирает сам, что делает его менее зависимым от среды разработки и визуализации работы кода.

Как включить live preview для js в brackets?

Есть такое видео (короткое)
В нем начиная с 1 минуты 15 сек. примерно автор открывает файлы как я понял с гидхаба и меняет настройки так что бы live preview работал для js. Только как он открыл эти файлы я не понял. Может кто то подскажет?

И еще заинтересовала такая штука автор на 45 секунде тянет мышку и она плавно меняет значение, давно хотел такую функцию. Если есть на видео значит ее можно как то включить. Подскажите как?

  • Вопрос задан более трёх лет назад
  • 744 просмотра

Комментировать
Решения вопроса 2

SanDiesel

HTML CSS JS

1) Он открыл скаченный репозиторий локально на машине. Как включить режим LP подробно описано тут.
2) Вроде как с зажатым alt. Можно установить это

Ответ написан более трёх лет назад
Нравится 2 1 комментарий
freeman0204 @freeman0204 Автор вопроса

Я так понял он скачал с репозитория уже установление файлы брекетс? Но он у меня уже установлен, и как я понимаю что нужно менять файлы в уже установленном брекетс? Но там похожих файлов нет.. Как повлияют настройки в скачанном репозитории на мой уже установленный брекетс?

На видео автор использует dev-версию https://github.com/adobe/brackets/wiki/How-to-Hack. и исправляет конфигурацию в коде расширения. Сейчас этого делать не надо, экспериментальный режим Live Preview включается галочкой в меню Файл. Да и относится это не к js, а вроде к запуску не в отдельном браузере.

Live Preview при изменении файлов html и css даже без сохранения по мере набора применяет изменения без перезагрузки страницы, а при изменении других файлов, в том числе js, перезагружает страницу после сохранения файла, настраивать отдельно это не нужно.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 0
Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

  • JavaScript

Как разэкранировать строку js?

  • 1 подписчик
  • 16 минут назад
  • 14 просмотров

веб-разработка

  • Веб-разработка
  • +2 ещё

Как оптимизировать сервер с большим количеством запросом?

  • 1 подписчик
  • час назад
  • 46 просмотров

Brackets не работает Live Preview что делать?

Сломался у меня как-то Sublime Text 3 и решил попробовать я чего-нибудь новенького , скачал Brackets , все его функции мне очень понравились , но когда я решил доверстать свой предыдущий проект у меня появились проблемы . Дело в том , что live prewiew буквально не реагировал ни на какие мои изменения в коде , не выделял блоки ,в общем ничего , изменения появлялись лишь после того как я сохранял файл. С CSS’ом же все в порядке , работает как надо.
Пробовал создавать index.html в самом редакторе , все отлично работало , но как только я сохраняю его куда-нибудь , в папку с проектом например live prewiew перестает работать. Подскажите как побороть этот баг?
ОПЕРАЦИОНКА- Winows 7 64x
Версия редактора- 1.3

  • Вопрос задан более трёх лет назад
  • 22511 просмотров

Комментировать

Решения вопроса 1

Serjabos

Serjabos @Serjabos Автор вопроса

Разобрался .
Для тех кому может быть понадобиться ( Там нужно просто в выборе директории выбрать папку , в которой лежат все файлы , нужные для верстки и оттуда уже все открывать .

Ответ написан более трёх лет назад

Нравится 10 7 комментариев

В Brackets не работает Live Preview, нужно обновлять страницу браузера, что изменения вступили в силу

В Brackets не работает Live Preview, кто то сталкивался с этим? как это решить? вношу изменения в коде, а они не отображаются автоматически. Только если обновить страницу браузера.

Отслеживать
13.8k 12 12 золотых знаков 44 44 серебряных знака 77 77 бронзовых знаков
задан 9 сен 2015 в 9:06
Denis Korytkin Denis Korytkin
57 1 1 золотой знак 1 1 серебряный знак 9 9 бронзовых знаков
В каком браузере вы работете? Live Preview работает только с Google Chrome.
15 апр 2016 в 21:07

6 ответов 6

Сортировка: Сброс на вариант по умолчанию

если я правильно понял, Live Preview в Brackets работает только если HTML файл был создан в редакторе.

Отслеживать
ответ дан 22 сен 2015 в 17:04
Denis Korytkin Denis Korytkin
57 1 1 золотой знак 1 1 серебряный знак 9 9 бронзовых знаков
Нет, Live Preview работает с любым HTML файлом, не зависимо от того в каком редакторе он был создан.
1 ноя 2016 в 22:28

Для того чтобы всё работало, в боковой панели нужно открыть директорию с сайтом/проектом.

Отслеживать
ответ дан 14 апр 2016 в 7:07
21 1 1 бронзовый знак

В моём случае, проблема решилась временным назначением браузера Chrome по-умолчанию. После вернул Opera обратно. Дальше редактор уже находил браузер Chrome нормально.
До этого, редактор Brackets, так и ругался, что не мог найти Chrome в системе Windows.

PS: Вопрос хоть и старый, но находится в топе Google, по-этому написал здесь

Отслеживать
ответ дан 26 ноя 2016 в 21:47
11 1 1 бронзовый знак

Live Preview работает только с Google Chrome. Перестает работать если в браузере вызваны инструменты разработчика по Ctrl-Shift-I или F12 . Чтобы Live Preview снова заработал нужно просто опять в Brackets при выбранном HTML файле нажать Ctrl-Alt-P либо же кликнуть мышкой по значку молнии на боковой панели в правом верхнем углу редактора.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *