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

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

Считайте вопрос тщательно, потому что я хочу, чтобы были встречены все упомянутые условия.

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

ДРУГОЕ РЕДАКТИРОВАНИЕ: Найденный этим https://stackoverflow.com/q/4680109/220652. Почти та же проблема.

9
задан 23 May 2017 в 05:39

8 ответов

Хорошо, все слушают! Geany является просто ПОТРЯСАЮЩИМ! Это имеет плагин, который добавляет предварительный просмотр браузера. Можно поместить его в боковую панель в "bottombar" или в дополнительном окне. И теперь две дополнительных премии плохие уничтожающие функции задницы. 1. Этот браузер использует WebKit. Это означает, это имеет этого удивительного инспектора! 2. Браузер перезагружает, когда Вы сохраняете открытый документ.

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

Geany

5
ответ дан 23 November 2019 в 04:46

Существует несколько опций.

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

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

enter image description here

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

enter image description here

Кроме того существует инструмент, недавно запустился, назвал WebPutty, который разработан для облегчения описанной проблемы. В то время как я лично еще не использовал его, это разрабатывается программным обеспечением Ручья Вуали компании Joel Spolsky (Joel является также Соучредителем StackOverflow), Таким образом, я был бы готов держать пари, что это - относительно стабильный, простой, и эффективный продукт.

12
ответ дан 23 November 2019 в 04:46

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

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

Ваш вопрос, кажется, немного неоднозначен.

В первую очередь, и связанный с альтернативой DreamWeaver, я нашел все предложения всех других ответов превосходными, но при поиске альтернативы DreamWeaver, самому близкому приложению - для меня - это был Проект Amaya. Который, кажется, является самым богатым, чем другие альтернативы и сложным, чем Kompozer.

Снимок экрана от официальной сети здесь, чтобы Вы видели его в действии:

enter image description here

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

Можно найти это немного нестабильным, или по крайней мере это было для меня, но это может также соответствовать потребностям.

После проигрывания с WYSIWYG-редакторами я предпочел прямое кодирование BlueFish, но это не WYSIWYG-редактор.

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

Сообщите нам, как Вы делали, если Вы даете Amaya шанс.

Удачи!

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

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

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

enter image description here

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

Удачи!

Кроме того, в ответах других пользователей к тем же вопросам я нашел "Синий веб-редактор Грифона", который, кажется, единственный стабильный веб-редактор, который показывает оперативное окно предварительного просмотра, что-btw-не может быть замечен в режиме разделения. Можно только видеть код или предварительный просмотр WYSIWYG, не обоих одновременно.

Снимки экрана, помещенные здесь для Вашего удобства:

Экран предварительного просмотра: enter image description here

Экран кода: enter image description here

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

Aptana Studio 3, который я reccomend в этом ответе: Основная веб-разработка IDE/редактор как DreamWeaver? - для меня - лучший инструмент для программирования, так как я могу жить, предварительный просмотр с помощью веб-браузера в моем двойном представлении расширил рабочий стол. Который может быть не Вашим случаем.

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

Удачи!

5
ответ дан 23 November 2019 в 04:46

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

Вот снимок экрана. Боковой панелью является Stylebot. У Вас есть основной режим редактирования, где можно быстро отредактировать некоторые простые свойства, расширенный режим, где можно отредактировать плоскость CSS для выбранного элемента и с "Редактированием CSS", можно отредактировать целый CSS для страницы.

enter image description here

4
ответ дан 23 November 2019 в 04:46

Попробуйте дополнение Firefox Firediff. Это интегрируется с Firebug, добавляющим вкладку "Changes", которая, как подобное дзэн имя предполагает, показывает любые изменения, которые Вы вносите в CSS или DOM.

Щелкните правой кнопкой по изменению CSS на вкладке "Changes" для сохранения или разности или снимка изменений.

firediff screenshot

Существует также cssUpdater, хотя я не использовал его.

Что касается "селекторной локализации", я не полностью уверен, что Вы имеете в виду, но существует selectBug, который можно загрузить здесь.

2
ответ дан 23 November 2019 в 04:46

Studio Aptana является большой IDE, но если я не ошибаюсь, он не имеет Предварительного просмотра В реальном времени. Так или иначе, если Вы r заинтересовали: http://www.aptana.com/products/studio3

P.S.: Этому установили Горячую клавишу для Предварительного просмотра поэтому дело не в этом большой из соглашения.

0
ответ дан 23 November 2019 в 04:46

Программное обеспечение Not по сути, но Стильное Дополнение (хром и Firefox) обновляет страницу автоматически при сохранении таблицы стилей переопределения. В отличие от FireBug, это действительно сохраняет его так, можно скопировать и вставить его в надлежащее .css файл, когда Вы удовлетворены.

0
ответ дан 23 November 2019 в 04:46

только несколько недель назад новый плеер повышен на этом поле. Я говорю о редакторе открытого исходного кода Adobe Brackets. Вся информация Вам нужно, здесь: https://github.com/adobe/brackets/wiki/Linux-Version

Версия spring30 была просто выпущена несколько дней назад :) Удачи!

0
ответ дан 23 November 2019 в 04:46

Другие вопросы по тегам:

Похожие вопросы: