Редактор CSS с предварительным просмотром в реальном времени и локализацией селектора

Редактор CSS с предварительным просмотром в реальном времени и локализацией селектора

Название говорит все о том, что я ищу. По сути, это должно быть программное обеспечение, которое собирает все стили веб-сайта, чтобы я мог редактировать их и сохранять.

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

РЕДАКТИРОВАТЬ:Я хочу быть более ясным здесь или, скорее, описать желаемый мной рабочий процесс. Начальная ситуация будет такой: у вас есть исходники веб-сайта на локальной машине.
Теперь я хочу открыть простые исходники (HTML/CSS) в моем редакторе/IDE/чем угодно (без WYSIWYG!). И я хочу предварительный просмотр прямо рядом с ним или в другом окне (не в другой вкладке!), я хочу видеть его по мере редактирования исходника. Предварительный просмотр должен обновляться автоматически (или когда я сохраняю файл, что по сути будет тем же самым, потому что CTRL+S — это своего рода рефлекс :P). Кроме того, у
него должен быть инспектор, который работает так же, как в Firebug или Chrom(e|ium). Когда я нажимаю на селектор CSS в этом инспекторе, курсор должен переместиться прямо на него в соответствующем исходном файле.

ДРУГОЕ ИЗМЕНЕНИЕ:Нашел этоhttps://stackoverflow.com/q/4680109/220652. Почти та же проблема.

решение1

Есть несколько вариантов.

В настоящее время я просто используюИнструменты разработчика Google Chrome(Видео действия), поскольку он позволяет проводить широкий спектр проверок, создавать подробные отчеты и переопределять. После внесения изменений я просто копирую обновленный CSS и перезаписываю соответствующие разделы файла CSS, обновляю и продолжаю работать.

Здесь я отредактировал определение в инструменте разработчика Chrome.

введите описание изображения здесь

Я могу отследить имя файла и номер строки (после копирования изменений) и просто вставить их в редактор.

введите описание изображения здесь

Кроме того, недавно был запущен инструмент под названиемВеб-Puttyкоторый предназначен для облегчения описанной вами проблемы. Хотя я еще не использовал его лично, он разработанДжоэл СпольскикомпанияПрограммное обеспечение Fog Creek(Джоэл также является соучредителем StackOverflow) Так что я готов поспорить, что это относительно стабильный, простой и эффективный продукт.

решение2

Этот вопрос, кажется, уже обсуждался, но вы говорите конкретно о CSS Editor. И я уверен, что именно поэтому они не отметили ваш вопрос как дубликат.

Однако я могу вам порекомендовать использовать несколько инструментов, которые я разместил в ответах на другие вопросы, например:Альтернатива Dreamweaver в Ubuntu?, и даже если я могу поспорить, что вы уже это видели, я перевожу его здесь для вашего удобства:

Ваш вопрос кажется немного двусмысленным.

Прежде всего, что касается альтернативы Dreamweaver, я нашел все предложения во всех других ответах превосходными, но когда я искал альтернативу Dreamweaver, наиболее близким приложением для меня былАмайяПроект. Который, кажется, богаче других альтернатив и немного сложнее Kompozer.

Скриншот с официального сайта, на котором вы можете увидеть его в действии:

введите описание изображения здесь

Дополнительные скриншоты можно получить, нажав на следующую ссылку: http://www.w3.org/Amaya/screenshots/Overview.html

Возможно, вам он покажется немного нестабильным (по крайней мере, мне так показалось), но он также может подойти вам.

Поэкспериментировав с редакторами WYSIWYG, я предпочел прямое кодирование с помощью BlueFish, но это не редактор WYSIWYG.

А по поводу предложений по вашей проблеме с поджигателем ничего сказать не могу, извините.

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

Удачи!

Редактировать == После установки Amaya я обнаружил, что она все еще далека от стабильности, но каким-то образом у нее, похоже, больше функций, чем у других приложений, если учесть, что другое программное обеспечение — это простые текстовые редакторы, а Amaya — это что-то вроде WYSIWYG-редактора.

Я проверил то, что вы сказали в своем комментарии, и обнаружил, что Amaya даже не замечает, что что-то изменилось в структуре/имени файлов/папок. Что не соответствует вашим потребностям, связанным с этим.

На следующем снимке экрана вы можете видеть, что я переименовал папку "resources" в "resources1", и Amaya все еще показывает ее как "resources", и нет способа принудительно обновить ее. Даже после перезапуска программного обеспечения и повторной загрузки проекта Amaya этого не заметит.

введите описание изображения здесь

Я буду внимательно следить за вашим вопросом, надеясь, что кто-нибудь предложит хорошую альтернативу.

Удачи!

Также, в ответах других пользователей на те же вопросы я нашел "Веб-редактор Blue Griffon" который, похоже, является единственным стабильным веб-редактором, который имеет окно предварительного просмотра в реальном времени, которое, кстати, нельзя увидеть в разделенном режиме. Вы можете видеть только код или предварительный просмотр WYSIWYG, но не то и другое одновременно.

Для вашего удобства здесь размещены скриншоты:

Экран предварительного просмотра: введите описание изображения здесь

Экран кода: введите описание изображения здесь

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

TheАптана Студия 3, который я рекомендую в этом ответе:Базовая среда разработки веб-приложений/редактор, например Dreamweaver?- для меня - лучший инструмент для программирования, так как я могу просматривать в реальном времени с помощью веб-браузера на моем расширенном рабочем столе с двойным видом. Что может быть не в вашем случае.

Вот что я могу предложить. Извините, если это не соответствует вашим потребностям и...

Удачи!

решение3

Итак, слушайте все!Джинипросто УДИВИТЕЛЬНО! У него есть плагин, который добавляет предварительный просмотр браузера. Вы можете разместить его в боковой панели, в "нижней панели" или в дополнительном окне. А теперьдвадополнительные бонусные крутые функции.1.Этот браузер использует WebKit. Это значит, что у него есть этот классный инспектор!2.Браузер перезагружается при сохранении открытого документа.

Помимо этого, у него есть еще много других потрясающих функций, но вы должны попробовать его сами. Я, например, просто влюбился. Вот вам скриншот:

Джини

решение4

Попробуйте дополнение FirefoxФайрдифф. Он интегрируется с Firebug, добавляя вкладку «Изменения», которая, как следует из названия в стиле дзен, отображает все изменения, которые вы вносите в CSS или DOM.

Щелкните правой кнопкой мыши по изменению CSS на вкладке «Изменения», чтобы сохранить разницу или снимок изменений.

скриншот firediff

А также естьcssUpdater, хотя я им не пользовался.

Что касается «локализации селектора», я не совсем понимаю, что вы имеете в виду, но естьвыберитеОшибка, который вы можете скачатьздесь.

Связанный контент