Ошибка функции live preview brackets

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

5 ответов 5

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

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

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

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

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

Надо в меню Brackets Отладка вызвать Перезагрузить с расширениями F5

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

Что такое live preview?

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

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

В прошлых уроках мы уже мельком затрагивали live preview. Находится он в правом верхнем сайдбаре (первый значек), на молнию еще похоже.

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

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

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

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

Настройка live preview

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

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

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

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

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

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

Это молодой бесплатный редактор от adobe с открытым кодом для веб-разработчиков. он ориентирован на работу с HTML, CSS и JavaScript. Привлек он меня тем что в нем есть встроенный плагин Live preview

Благодаря него вы можете наблюдать за изменениями сайта без перезагрузки страницы, прямо во время верстки. Но в ней есть одна особенность, она работает только с Google Chrome.

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

Чтобы Live preview работало в mozilla нужно :

В редакторе открыть : Debug/Open Preference File

Для тех у кого на русском : Отладка/Открыть файл настроек

Откроется 2 файла defaultPreferences.json и brackets.json

defaultPreferences.json можно сразу закрыть а в brackets.json добавить строчку

Желательно добавить ее в самый верх документа. Должно получится примерно так

«fonts.fontFamily»: «’SourceCodePro-Medium’, ＭＳ ゴシック, ‘MS Gothic’, monospace»,

После этого при запуски плагина Live preview страница будет отображаться в Мазиле

Прежде решение я не находил, поэтому решил поделится им на нескольких русскоязычных ресурсах, одним из них стал Pickabu. Может кому то пригодится