Редактор CSS с предварительным просмотром и селектором в режиме реального времени

Question 1

У меня была аналогичная проблема с Kubuntu 12.04 в течение длительного времени: экран входа в систему появился как обычно, но вход в систему не приведет меня к плазменному компьютеру, а скорее к экрану входа в систему. Я предполагаю, что проблема работает примерно так же для Ubuntu с gdm, как и для меня, используя kdm.

В качестве временного решения я смог добраться до надлежащей среды рабочего стола, введя:

sudo service kdm stop
startx

из консоли tty, с которой я сбежал с помощью ctrl + alt + f3 на экране входа в систему.

Подозреваю, что проблема с правами доступа с .Xauthority и / или моим /tmp/ каталогом на многие другие ответы на этот же вопрос), я побежал:

ls -la ~/.Xauthority

и подтвердил, что его владельцы были установлены в username username, а не root root, и побежали

ls -ld /tmp

[d5 ] и обеспечил его разрешения как drwxrwxrwt. Я также попытался удалить файл .Xauthority в целом, надеясь, что он будет правильно восстановлен при следующем входе в систему, но это не сработало для меня (другие, похоже, уже успели попробовать это.)

Next Я проверил свой ~/.profile для посторонних строк и прочитал мой файл .xsession-errors для подсказок безрезультатно.

Что в конечном итоге сработало для меня, это удаление моего файла ~/.dmrc.

[d10 ] Из https://help.ubuntu.com/community/dmrcErrors:

«Файл .dmrc - это файл инициализации, который система проверяет во время регистрации сеанса. В частности, gnome проверяет файл на любой конкретный язык или информация о сеансе, которую он не нашел в другом месте. Хотя часто файл пуст, за исключением базовых данных заголовка, он может содержать определенный язык для использования при запуске сеанса ».

Этот файл Что в конечном итоге сработало для меня, так это то, что у моего есть 644 разрешения для правильной работы (EDIT: приведенная выше ссылка фактически дает несколько других разрешений, которые будут работать помимо 644, но 644 это явно разрешенное задание), поэтому перед его удалением убедитесь, что

ls -la ~/.dmrc

дает разрешения drwxr-xr-x 143 user user, и если не попробовать использовать

chmod 644 /home/username/.dmrc

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

cp /home/username/.dmrc /home/username/.dmrc.backup
rm /home/username/.dmrc

При следующем входе в систему новый файл .dmrc будет сгенерирован и настроен правильно, и в моем случае я, наконец, смог войдите в систему, не отрываясь до tty, убивая kdm и начинать x вручную.

ПРИМЕЧАНИЕ. Я подозреваю, что основная причина этого произошла, когда раздел моей домашней папки был заполнен во время сеанса, что вызвало целое количество других проблем с файлами конфигурации, которые не были написаны, которые необходимо было записать. После этого сразу же возникла проблема с бесконечным циклом входа в систему, и я заметил, что файл .dmrc имеет размер 0, а не содержит:

[Desktop]
Session=default

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

Question 2

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

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

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

[d5 ]

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

enter image description here

[d10 ] Помимо того, что недавно был запущен инструмент под названием Инструменты разработчика Google Chrome , который предназначен для облегчения описанной проблемы. Хотя я еще не использовал его лично, он разработан компанией Джоэла Спольски Action Video (Джоэл также является соучредителем StackOverflow). Поэтому я готов поспорить, что он относительно стабилен, прост и эффективный продукт.

Question 3

Question 4

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

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

. Ваш вопрос кажется немного неоднозначным. Прежде всего, и связанный с альтернативой Dreamweaver, я нашел все предложения по всем остальным ответам превосходными, но при поиске альтернативы Dreamweaver, ближайшему приложению, для меня это был проект Amaya. Кажется, что он богаче других альтернатив и немного сложнее, чем Kompozer. Скриншот из официального веб-сайта предназначен для вас, чтобы увидеть его в действии. Дополнительные скриншоты можно найти, щелкнув следующую ссылку: http://www.w3.org/Amaya/screenshots/Overview.html. Вы можете найти это немного бит нестабильный, или, по крайней мере, это было для меня, но оно также может соответствовать вашим потребностям. После игры с редакторами WYSIWYG я предпочел прямое кодирование с помощью BlueFish, но это не редактор WYSIWYG. И о предложениях по вашей проблеме с firebug я ничего не могу сказать, извините. Пожалуйста, сообщите нам, как вы это сделали, если дадите Амайе шанс. Удачи! Edit == После установки Amaya, я считаю, что она еще далека от стабильной, но почему-то она обладает лучшими функциями, чем другие приложения, если вы считаете, что другое программное обеспечение является простым текстовым редактором и Amaya - это как редактор WYSIWYG. Я протестировал то, что вы сказали в своем комментарии, и я обнаружил, что Amaya даже не заметил, что что-то изменилось в структуре / названии файлов / папок. Это не соответствует вашим потребностям, связанным с этим. На следующем снимке экрана вы можете увидеть, что я переименовал папку «resources» в «resources1», и Amaya пока еще показывает ее как «ресурсы», и нет способа заставить ее обновить. Даже после перезапуска программного обеспечения и загрузки проекта снова Amaya не заметит его. Я буду внимательно следить за вашим вопросом, надеясь, что кто-нибудь придет и уложит хорошую альтернативу. Удачи!

Кроме того, в ответах других пользователей на те же вопросы я нашел альтернативу « Dreamweaver в ubuntu? », которая, кажется, является единственным стабильным веб-редактором, который показывает реальное время окно предварительного просмотра, что -btw- невозможно увидеть в режиме разделения. Вы можете видеть только код или предварительный просмотр WYSIWYG, но не оба одновременно.

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

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

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

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

Aptana Studio 3, о котором я рекомендую в этом ответе: Basic Web Development IDE / Editor, например Dreamweaver? для меня - лучший инструмент для программирования, так как я могу просматривать превью с помощью веб-браузера в своем двойном представлении расширенного рабочего стола. Это может быть не ваше дело.

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

Удачи!

Question 5

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

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

Question 6

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

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

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

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

Question 7

Question 8

Aptana Studio - отличная среда разработки, но если я не ошибаюсь, у нее нет предварительного просмотра в режиме реального времени. В любом случае, если вас интересует: http://www.aptana.com/products/studio3

P.S: У него есть набор горячих клавиш для предварительного просмотра, поэтому он не такой большой.

Question 9

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

Question 10

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

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

Community · Answer 1 · 25 May 2018 в 19:03

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

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

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

[d5 ]

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

enter image description here

[d10 ] Помимо того, что недавно был запущен инструмент под названием Инструменты разработчика Google Chrome , который предназначен для облегчения описанной проблемы. Хотя я еще не использовал его лично, он разработан компанией Джоэла Спольски Action Video (Джоэл также является соучредителем StackOverflow). Поэтому я готов поспорить, что он относительно стабилен, прост и эффективный продукт.

Как именно вы копируете CSS? И можете ли вы сделать это в файле? WebPutty, похоже, не может обрабатывать локальные веб-сайты, но спасибо за подсказку. — dAnjou, 8 September 2011 в 04:38
@jAnjou Я попытался предоставить несколько скриншотов, чтобы показать вам, как будет работать рабочий процесс. — Marco Ceppi♦, 15 September 2011 в 02:00
Ах хорошо. Таким образом, этот рабочий процесс почти такой же, как у Stylebot. Самая большая разница: Stylebot сохраняет CSS, чтобы вы могли перезагрузить страницу или перейти на другие страницы этого веб-сайта. Во всяком случае, этот get-upvote. — dAnjou, 15 September 2011 в 02:52

Community · Answer 2 · 25 May 2018 в 19:03

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

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

. Ваш вопрос кажется немного неоднозначным. Прежде всего, и связанный с альтернативой Dreamweaver, я нашел все предложения по всем остальным ответам превосходными, но при поиске альтернативы Dreamweaver, ближайшему приложению, для меня это был проект Amaya. Кажется, что он богаче других альтернатив и немного сложнее, чем Kompozer. Скриншот из официального веб-сайта предназначен для вас, чтобы увидеть его в действии. Дополнительные скриншоты можно найти, щелкнув следующую ссылку: http://www.w3.org/Amaya/screenshots/Overview.html. Вы можете найти это немного бит нестабильный, или, по крайней мере, это было для меня, но оно также может соответствовать вашим потребностям. После игры с редакторами WYSIWYG я предпочел прямое кодирование с помощью BlueFish, но это не редактор WYSIWYG. И о предложениях по вашей проблеме с firebug я ничего не могу сказать, извините. Пожалуйста, сообщите нам, как вы это сделали, если дадите Амайе шанс. Удачи! Edit == После установки Amaya, я считаю, что она еще далека от стабильной, но почему-то она обладает лучшими функциями, чем другие приложения, если вы считаете, что другое программное обеспечение является простым текстовым редактором и Amaya - это как редактор WYSIWYG. Я протестировал то, что вы сказали в своем комментарии, и я обнаружил, что Amaya даже не заметил, что что-то изменилось в структуре / названии файлов / папок. Это не соответствует вашим потребностям, связанным с этим. На следующем снимке экрана вы можете увидеть, что я переименовал папку «resources» в «resources1», и Amaya пока еще показывает ее как «ресурсы», и нет способа заставить ее обновить. Даже после перезапуска программного обеспечения и загрузки проекта снова Amaya не заметит его. Я буду внимательно следить за вашим вопросом, надеясь, что кто-нибудь придет и уложит хорошую альтернативу. Удачи!

Кроме того, в ответах других пользователей на те же вопросы я нашел альтернативу « Dreamweaver в ubuntu? », которая, кажется, является единственным стабильным веб-редактором, который показывает реальное время окно предварительного просмотра, что -btw- невозможно увидеть в режиме разделения. Вы можете видеть только код или предварительный просмотр WYSIWYG, но не оба одновременно.

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

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

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

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

Aptana Studio 3, о котором я рекомендую в этом ответе: Basic Web Development IDE / Editor, например Dreamweaver? для меня - лучший инструмент для программирования, так как я могу просматривать превью с помощью веб-браузера в своем двойном представлении расширенного рабочего стола. Это может быть не ваше дело.

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

Удачи!

dAnjou · Answer 3 · 25 May 2018 в 19:03

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

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

scottl · Answer 4 · 25 May 2018 в 19:03

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

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

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

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

2

ответ дан scottl 25 May 2018 в 19:03

1

Firediff, похоже, не работает здесь на Natty и Fx 6.0.2. Я внес некоторые изменения здесь и там, но изменений в «Изменения» нет. Вкладка. Я почти уверен, что cssUpdater будет тем, что я ищу, но он недоступен для Linux. Посредством "местоположения селектора" Я имею в виду селектор CSS. Когда я нажимаю правой кнопкой мыши на веб-сайте и нажимаю " Inspect Element & quot ;, Firebug или Chrom (e | ium) Inspector показывают мне соответствующий элемент и его CSS. – dAnjou 8 September 2011 в 14:54
2

Он работает, я использую его в Natty и последнем Firefox прямо сейчас. Убедитесь, что все изменения отображаются (щелкните небольшую стрелку вниз на вкладке изменений). – scottl 8 September 2011 в 21:46
3

Хорошо, теперь Firediff работает внезапно, но это немного грязно, и рабочий процесс с ним не очень приятный. – dAnjou 9 September 2011 в 22:01

Lilian A. Moraru · Answer 5 · 25 May 2018 в 19:03

Aptana Studio - отличная среда разработки, но если я не ошибаюсь, у нее нет предварительного просмотра в режиме реального времени. В любом случае, если вас интересует: http://www.aptana.com/products/studio3

P.S: У него есть набор горячих клавиш для предварительного просмотра, поэтому он не такой большой.

Я не вижу, как Аптана отвечает моим условиям (?). — dAnjou, 8 September 2011 в 04:48

Tarek Fadel · Answer 6 · 25 May 2018 в 19:03

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

Я не понимаю. Могут ли они найти селекторы? — dAnjou, 8 September 2011 в 04:39

Rho · Answer 7 · 25 May 2018 в 19:03

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

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

Редактор CSS с предварительным просмотром и селектором в режиме реального времени

7 ответов

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

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