Brackets как изменить браузер - Исправление ошибок и поиск оптимальных решений проблем

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

если я правильно понял, 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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками adobe-brackets или задайте свой вопрос.

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Brackets Live Preview

Bracket’s Live Preview is a beautiful feature which enables us to see the changes on a browser as soon as we do the changes.

The Shortcut for Live Preview is:
Ctrl + Alt + P -> For Windows
Cmd + Alt + P -> For Mac

Once you enable this option, your changes will be visible in the Browser immediately as soon as you edit the code without even saving the changes.

Brackets Live Preview Highlight

The Shortcut for Live Preview Highlight is:
Ctrl + Shift + C -> For Windows
Cmd + Shift + C -> For Mac

Bracket’s Live Preview Highlight is an extremely useful feature.

Before using this feature, you should make sure that the “Live Preview” is enabled.

This helps to fix any layout issues fast as you can place your cursor on the tag and it shows the layout/outline of that tag.

The “Live Preview Highlight” feature highlights the selected tag from the editor on the browser like below –

For Example, if you place your cursor on the <html> tag, the entire document will be highlighted. Similarly, if you place cursor on <body> tag, the entire content area will be highlighted and so on.

In the Example above, we have placed cursor on <h2> tag and it highlights that particular <h2> tags in the browser.

If you are in the CSS file and place your cursor on the <h2> tag, then it will highlight all the <h2> tags on the browser.

Note/Info:
The Live preview Highlight feature inspired by the Developer Tools feature of browser like Chrome.

Live Preview Overview

State of Live Preview (formerly known as «Live Development») as of January, 2015.

Live Preview has been implemented 2 ways:

Original implementation uses Chromium Dev Tools Web Socket to connect to browser

New Multibrowser implementation uses Injected Scripts to connect to browser

Currently disabled and can be switch to with a feature flag
Connects to default browser
URL can be pasted into any other browser
See Live Preview MultiBrowser for details about this implementation.

Live Preview Server

Servers defined in LiveDevelopment/Servers:

BaseServer : Built-in nodejs server — this is the default connection type.
UserServer : Use local server — this is done by specifying Base URL in Project Settings. dialog.
FileServer : Fallback is file:// protocol.

For more info see Server API and URL Mapping docs.

Loaded to ensure a connection before starting agents and then navigating to document url.

brackets-shell Native Implementation

NativeApp.openLiveBrowser() and NativeApp.closeLiveBrowser() defined in appshell/appshell_extensions.js calls operating system specific native OpenLiveBrowser() and CloseLiveBrowser() methods, respectively. Defined in:

Used to toggle Live Preview on/off. Can also use File > Live Preview menu item.

Icon shows 3 different states: disconnected, connecting, and connected. Tooltips display more detailed state information. Twipsy is displayed at icon when browser is disconnected for external reasons.

Agents/RemoteAgent.js injects Agents/RemoteFunctions.js into Live Preview page for:

Highlighting
Live HTML
Live Preview MultiBrowser Connection

Editing

CSS in browser is updated immediately as it is edited, so no need to save to disk:

a. LiveDevelopment.js _styleSheetAdded() creates a CSSDocument for each stylesheet b. Updates trigger CSSDocument.onChange() which sends entire updated stylesheet to browser

Highlighting

All elements that apply to rule being edited are highlighted. LESS and SCSS are also supported:

Can enable/disable with View > Live Preview Highlight menu item
Implemented using remote function injection & calling

Currently only supported with nodejs server

Highlighting current element

All Other File Types

Live Preview is reloaded on File Save in LiveDevelopment.js function _onDocumentSaved() .

Other Use Cases:

Live Preview works for files:

When using built-in server: file extensions defined in FileUtils.isStaticHtmlFileExt()
When a Base URL is provided for a local server: file extensions defined in FileUtils.isServerHtmlFileExt() will also work.
Note: These lists should really be preferences

When starting Live Preview.

if .css or .js file is selected, Brackets searches for nearest index.html
if .php is selected and Base URL is not specified, prompt for Base URL

If Live Preview is running.

and another HTML file is selected, it switches to that file
and switch to a different project, Live Preview is disconnected

Footer

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

This is an experimental implementation of Live Preview to replace the current LiveDevelopment architecture with something more flexible that isn’t tied solely to Chrome Developer Tools. Since is still experimental, the basic functionality for CSS/HTML editing is working but there are could be some scenarios that might be partially or entirely not covered yet. There are also some known issues and key things to do (see the list below).

How to make it work

It can be enabled by setting livedev.multibrowser preference to true. If enabled, it will launch the page in your default browser when clicking on the Live Preview icon as it works today. You should then also be able to copy and paste the URL from that browser into any other browser, live edits will then update all connected browsers at once.

Landing in Brackets Core

Main assets are placed under LiveDevelopment/MultiBrowserImpl while the main module LiveDevMultiBrowser (equivalent to LiveDevelopment) will land under LiveDevelopment folder. This is probably not the more elegant choice but the decision mainly relies on these two needs:

Keep current modules from LiveDevelopment without moving them from the original place since many extensions require them as dependencies
Keep multi-browser implementation under this folder since it is an (still experimental) implementation of LiveDevelopment.

Changes included in LiveDevelopment/main.js allows managing both implementations. Both modules are loaded and initialized. A listener for preference changes is in charge of setting the active implementation based on pref value. Current implementation will be active and work as today by default.

Basic architecture

The primary difference in this architecture is that communication with the browser is done via an injected script rather than CDT’s native remote debugging interface, and the browser connects back to Brackets rather than Brackets connecting to the browser. This makes it so:

launching a preview, injecting scripts into the HTML, and establishing the connection between the previewed page and Brackets are relatively simple and largely decoupled
live preview can work in any browser, not just Chrome
multiple browsers can connect to the same live preview session in Brackets
browsers could theoretically connect from anywhere on the network that can see Brackets (though right now it’s only implemented for localhost)
opening dev tools in the browser doesn’t break live preview

Communication between Brackets and the browser is factored into three layers:

a low-level «transport» layer, which is responsible for launching live preview in the browser and providing a simple textual message bus between the browser and Brackets.
the «protocol» layer, which sits on top of the transport layer and provides the actual semantic behavior (currently just «evaluate in browser»)
the injected RemoteFunctions script, which is the same as in today’s LiveDevelopment and provides Brackets-specific functionality (highlighting, DOM edit application) on top of the core protocol.

The reason for this factoring is so that the transport layer can be swapped out for different use cases, and so that anything higher-level we need that can be easily built in terms of eval doesn’t have to be built into the protocol.

The transport layer currently implemented uses a WebSocket server in Node, coupled with an injected script in the browser that connects back to that server. However, this could easily be swapped out for a different transport layer that supports a preview iframe directly inside Brackets, where the communication is via postMessage().

The protocol layer currently exposes a very simple API that currently just contains specific protocol functions:

evaluate which evals in the browser
reload which reload the page in the browser
navigate which allow the browser navigate to a given URL

The over-the-wire protocol is a JSON message that more or less looks like the CDT wire protocol, although it’s not an exact match right now.

Explanation of the flow

A block diagram of how the various bits talk to each other ca be found at https://raw.githubusercontent.com/wiki/njx/brackets-livedev2/livedev2-block-diagram.png

Here’s a short summary of what happens when the user clicks on the Live Preview button on an HTML page.

LiveDevelopment creates a LiveHTMLDocument for the page, passing it the protocol handler (LiveDevProtocol). LiveHTMLDocument manages communication between the editor and the browser for HTML pages.
LiveDevelopment tells StaticServer that this path has a live document. StaticServer is in charge of actually serving the page and associated assets to the browser. (Note: eventually I think we should get rid of this step — StaticServer shouldn’t know anything about live documents directly; it should just have a way of request instrumented text for HTML URLs.)
LiveDevelopment tells the launcher to open the page via the StaticServer URL, then it opens the page in the default browser.
The browser requests the page from StaticServer. StaticServer notes that there is a live document for this page, and requests an instrumented version of the page from LiveHTMLDocument. (The current «requestFilterPaths» mechanism for this could be simplified, I think.)
LiveHTMLDocument instruments the page for live editing using the existing HTMLInstrumentation mechanism, and additionally includes remote scripts provided by the protocol (LiveDevProtocolRemote), transport (NodeSocketTransportRemote), remote functions (RemoteFunctions) and document observation (DocumentObserver) which tracks related documents. The transport script includes the URL for the WebSocket server created when the transport is started after being set to the protocol layer.
The instrumented page is sent back to StaticServer, which responds to the browser with the instrumented version. Other files requested by the browser are simply returned directly by StaticServer.
As the browser loads the page, it encounters the injected scripts. The transport script connects back to the NodeSocketTransport’s WebSocket server created in step 3 and sends it a «connect» message to tell it what URL has been loaded in the browser. The NodeSocketTransport assigns the socket a client id so it can keep track of which socket is associated with which page instance, then raises a connect event.
LivDevProtocol receives the connect event and makes a note of the associated client ID updating the current active connections. LiveDevelopment also receives the connect event, it checks that the URL that comes on the message matches the current live doc instance and updates session status to STATUS_ACTIVE in case this is the first client connected.
After the live document is loaded in the browser, DocumentObserver scan related stylesheets and Javascript files and send a message DocumentRelated which contains their URLs. LiveDevelopment receives the message, extract stylesshes and creates a LiveCSSDocument instance per each of them. LiveHTMLDocument listen to the same message and further notifications (added/removed) to keep info about its related docs which is needed by LiveDocument (eg. when saving changes of a JS file).
As the user makes live edits or changes selection, LiveHTMLDocument calls the protocol handler’s «evaluate» function to call functions from the injected RemoteFunctions.
The protocol’s «evaluate» method packages up the request as a JSON message and sends it via the transport.
The remote transport handler unpacks the message and passes it to the remote protocol handler, which finally interprets it and evals its content.
If another browser loads the same page (from the StaticServer URL), steps 4-8 repeat, with LiveHTMLDocument just adding the new connection’s client ID to its list. Future evals are then sent to all the associated client IDs for the page.

Источник

Brackets

– это бесплатная среда разработки от семейства
Adobe
, для быстрого написания
HTML /CSS/JavaScript
кода. Среда доступна для
Windows
,
Mac OS
и
Linux
, кроме того переведена на русский язык.

Благодаря работе локального сервера на Node.js

, есть встроенный предпросмотр (
Live Preview
). Вы пишите код и изменения сразу видны в браузере, без перезагрузки страницы.
Live Preview
работает только с браузером
Chrome
.

Утилита для создания и редактирования машинного кода отличается большим набором функций. Инструментами могут пользоваться как любители, так и профессионалы в сфере разработки сайтов. К основным возможностям софта относятся:

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

С помощью надстроек пользователь может изменить или дополнить уже имеющийся функционал. Таким способом можно превратить Brackets в уникальное средство для написания кода, которое будет соответствовать требованиям конкретного программиста.

Описание и возможности Brackets

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

Софт оснащен многофункциональным и удобным текстовым редактором.
Можно самостоятельно внести настройки и назначить горячие клавиши по своему усмотрению.
Ошибки в тексте подсвечиваются в режиме реального времени.
Пользователь может работать в режиме отладки.
Несколько файлов можно сравнивать в автоматическом режиме.
В приложении используется многофункциональный поиск.

Имеющиеся в утилите функции пользователь может дополнить с помощью надстроек. Это помогает превратить программу в уникальный инструмент для написания кодов.

Как пользоваться

Мы составили инструкцию по установке и использованию ПО.

Загрузка и установка

Скачивая версию софта с нашего сайта, вы получаете полноценную и стабильную программу. Для загрузки и установки воспользуйтесь представленным алгоритмом:

Прокрутите страницу вниз и нажмите на кнопку скачивания. Распакуйте архив на жесткий диск, и запустите инсталлятор двойным кликом ЛКМ.

Выберите папку, в которой будут располагаться файлы программы.

Подождите некоторое время, пока шкала инсталляции заполнится до конца.

Инструкция по работе

В интерфейсе и функционале легко разберется любитель или профессионал в сфере программирования. Новичкам рекомендуется ознакомиться с видеоуроками или пройти специальные курсы.

Вместе с этим смотрят: Hot Potatoes 6.3.0.5

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

Стандартная рабочая сессия в приложении Brackets выглядит следующим образом:

Запуск программы и создание файла с кодом. Также поддерживается редактирование ранее созданных файлов.
Внесение необходимых корректив с помощью синтаксиса языка и встроенных инструментов.
Тестирование страницы посредством запуска в браузере Google Chrome. Сохранение файла с кодом программы.

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

Brackets обзор редактора кода

Людям, работающим с компьютерным кодом – программистом, веб-мастерам, системным администраторам и т.д., требуется удобный инструмент, где можно этот код просматривать и редактировать. По факту для этого вполне подойдёт обычный «Блокнот». Однако его возможности и функционал настолько примитивен, что делает работу в этом редакторе крайне неэффективной.

В качестве альтернативы было разработано множество удобных программ, где вы можете писать, просматривать и редактировать уже готовый код. Одной из таких альтернатив является текстовый редактор Brackets от Adobe.

Поддерживаемый синтаксис языков разметки и веб-программирования

Brackets обзавёлся высокой популярностью у веб-программистов и верстальщиков сайтов благодаря большой поддержки различных языков разметки и языков программирования, которые часто используются в веб-разработке. Всего имеется следующее количество языков: HTML, CSS, Java, JavaScript, C++, C, C#, JSON, Perl, SQL, PHP, Python и ещё около 43 менее известных и распространённых языков.

Синтаксис указанного языка разметки/программирования подсвечивается отдельным цветом. Это позволяет верстальщику лучше ориентироваться в написанном коде, легко находить начало и конец выражения. Дополнительно в редакторе все строки имеют нумерацию, что ещё сильнее упрощает ориентацию в написанном коде. Блоки с определёнными выражениями или тэгами можно свернуть, чтобы опять же облегчить ориентацию в коде и упростить с ним работу.

Использование в качестве текстового редактора

В программе есть поддержка работы с простым текстом. То есть вы можете создавать здесь документы по аналогии с различными офисными приложениями. Однако стоит понимать, что Brackets изначально разрабатывался для тех, кому приходится верстать страницы и писать программный код, поэтому для офисной работы он адаптирован плохо.

Здесь вы можете изменить кодировку текста. В редакторе представлен огромный перечень кодировок: UTF-8, которая используется везде по умолчанию, Windows 1250-1258, KOI8-Ru и другие. Однако стоит понимать, что возможности изменить шрифт в определённой части документа, добавить заголовки и т.д. в Brackets не предусмотрено.

Взаимодействие с браузером

Ранее для того, чтобы просматривать изменения в браузере в режиме реального времени, в Brackets и сам браузер требовалось установить дополнительное расширение. Однако в новой версии редактора есть встроенный плагин, который позволяет отображать изменения в коде в браузере Google Chrome в режиме реального времени без использования каких-либо дополнительных надстроек. Благодаря этому верстальщик может сразу видеть, как будет меняться интерфейс при внесении изменений в код HTML и CSS файлов.

Взаимодействие с другими файлами

Редактор Brackets даёт возможность работы сразу с несколькими файлами одновременно. Все файлы, открытые в данный момент отображаются в левом меню. Между ними можно удобно переключаться. Дополнительно предусмотрена возможность сортировки документов по разным параметрам: имени, дате добавления, типу. Вы можете переключаться между ними при помощи специальных клавиш, даже не задействовав мышку.

Интеграция в контекстное меню

После того, как программа Brackets будет установлена на ваш компьютер, в «Проводнике Windows» вы сможете открывать файлы с её помощью. Для этого просто нажмите правой кнопкой мыши по нужному файлу и выберите из контекстного меню вариант «Open with Brackets». Это очень удобно, так как можно получить доступ к нужному файлу без непосредственного запуска программы.

Режим отладки

В среду разработки Brackets встроен режим отладки, который позволяет редактировать документ в режиме, аналогичном «Режиму разработчику» в браузерах. С его помощью вы можете видеть ошибки, которые могут возникнуть во время работы страницы.

Поиск и замена

С помощью комбинации клавиш Ctrl+F вы можете открыть специальное окошко для поиска и замены по написанному коду. Этот инструмент очень облегчает работу тем, кому приходится сталкиваться с однотипными выражениями.

Доступные расширения

Вы можете существенно расширить функционал программы, установив туда дополнительное расширение. Для удобного управления расширениями в программу встроен специальный «Менеджер расширений». С его помощью вы можете добавлять в программу новые расширения, удалять или отключать ненужные на данный момент. Расширения в свою очередь позволяют включить поддержку новых языков разметки и программирования, изменить темы оформления интерфейса, настроить работу с удалённым FTP-сервером, управлять версиями приложений. Также вы сможете встраивать абсолютно другой функционал, который не предусмотрен в исходном варианте текстового редактора.

Преимущества и недостатки

У программы Brackets, как и любой другой есть свои достоинства и недостатки. Ниже рассмотрим их все и сделаем вывод из всей статьи.

Достоинства и недостатки

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

Плюсы:

управление горячими клавишами;
поддержка популярных языков программирования;
поддержка сторонних плагинов;
удобный и настраиваемый интерфейс;
интеграция с Google Chrome.

Минусы:

нет совместимости с другими браузерами;
часть названий не переведена на русский язык.

Плюсы и минусы

Пройдемся по основным положительным и отрицательным сторонам обозреваемого софта.

Достоинства:

Возможность выполнения управления горячими клавишами.
В приложении поддерживаются популярные языки программирования.
Готовый результат можно просмотреть в Google Chrome.
Есть возможность загрузить и установить сторонние плагины.
Интерфейс на русском языке и настраивается под предпочтения пользователя.

Недостатки:

Интеграция с другими браузерами не поддерживается.
Некоторые пункты в интерфейсе не переведены на русский язык.

Скачать Brackets для Windows 10

Если вас заинтересовала программа, то скачивайте установщик с помощью данной ссылки.

Версия:	1.14.2
Разработчик:	Adobe
Год выхода:	2020
Название:	Adobe Brackets
Платформа:	Microsoft Windows 7, 8.1, 10
Язык:	Русский, Английский
Лицензия:	Бесплатно
Пароль к архиву:	bestsoft.club

( 1 оценка, среднее 5 из 5 )

Источник

5 ответов 5

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

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

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

Надо в меню 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. Может кому то пригодится

Источник

Brackets Live Preview Feature