Live Previev - интерактивный просмотр в brackets

Live Preview (интерактивный просмотр) в Brackets

Привет читатель. Продолжаем изучать редактор Brackets. И сегодня я расскажу о такой обалденно-удобной функции как live preview. У многих сразу мелькнула ассоциация с трансляциями в инстаграме, но на самом деле лайв превью переводится как интерактивный просмотр.


Что такое live preview?

Интерактивный просмотр. Ну а если по человечески, то просмотр изменений на сайте в реальном времени.
Это почти как раньше (что то поменял, сохранил, обновил страницу), но намного проще — что-то добвил/удалил/изменил и сразу увидел все изменения без сохранений там всяких, обновлений…в общем очень удобная вещь, как для профи, так и для новичков и чайников.


Как включить итнреактивный просотр?

В прошлых уроках мы уже мельком затрагивали live preview. Находится он в правом верхнем сайдбаре (первый значек), на молнию еще похоже.
включить режим лайв пресью Live Previev - интерактивный просмотр в brackets
Для запуска достаточно просто кликнуть по значку. Во время первого запуска откроется окно с предупреждением что интерактивный просмотр находится на стадии тестирования, а это значит что — айм сорри если вдруг что-то не работает мы предупреждали..
Еще там будет сказано что работает функция на данный момент только с html, css и частично javascript файлами. Для верстки этого будет вполне достаточно а вот допиливать и натягивать на движок придется уже по старинке. Ах, да не забудьте скачать google chrome. Другие браузеры не поддерживаются.

Для демонстрации я скачал первый попавшийся более-менее чистый шаблон (html5up dimension) и запустил live находясь в файле index.html (это важно, ведь какой может быть лайв из css файла??).

выделение параграфа Live Previev - интерактивный просмотр в brackets

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

Live Preview - интерактивный просмотр в brackets внесение изменений в сайт или проект
Возвращаемся к коду и начнем менять заголовок h1. Заметили как после клика на заголовок на странице он выделился цветом а потом осталась только обводка? При замене слова все изменения будут видны в минимальной задержкой сразу в браузере. Работать можно не только из редактора т.е. можно кликнуть в нужном месте страницы и автоматически выделится кусок нужного кода в редакторе.


Настройка live preview

Настроек редактор имеет мало, вернее одна. Убирать подсветку при клике по элементу как в коде так на странице. Отключается и включается она комбинацией клавиш ctrl+shift+c или «Вид» — «Подсвечивать в Live Preview«.


Почему не работает live preview?

Причин на самом деле не так уж и много, и разберем мы их от начала до конца.

Итак, первая причина не запуска интерактивного просмотра это не нажатая клавиша молнии о которой мы говорили выше в этой статье.
Вторая причина может крыться в отсутствии браузера хром о котором мы так же сегодня упоминали.
Если проблема не решена то смотрим что бы браузер хром был установлен браузером по умолчанию.
Четвертая причина, вы просто открыли файл html файл в редакторе и меняете css. Так тоже не пойдет. Открываем всё дерево проекта.
Пятая причина — интерактивный просмотр не работает с php файлами, или каими либо другими кроме html, css и частично js.
Всё равно не работает? Шестым пунктом проверьте не включено ли ничего лишнего наподобие «инструментов разработчика» в браузере (ctrl+shift+i или f12)
Никак? В редакторе жмем F5 — перезагрузить с расширениями и пробуем заново.

Это все известные мне причины неработающего live preview. Как правило обычно проблема кроется в первых трех пунктах.

2 thoughts to “Live Preview (интерактивный просмотр) в Brackets”

  1. Через Live Preview все норм. А сам Index.html открывается, но ни фона, ни картинок нет. Только кнопки, чекбоксы и.т.д. Что делать???

    1. Пришлите пожалуйста скриншот, либо папку с проектом на почту: sensesbit@gmail.com . Посмотрим что там не так 🙂
      Предварительно могу сказать что не сохранены изменения в файлах, далее проверьте кэширование (ctrl+f5 — полная перезагрузка), ну и разумеется пути к файлам с изображениями как я понял в стилевом файле перепроверить нужно.

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

Ваш e-mail не будет опубликован.