Редактор CSS з попереднім переглядом у режимі реального часу та локалізацією селектора

У заголовку сказано все про те, що я шукаю. В основному це має бути програмне забезпечення, яке збирає всі стилі веб-сайту, щоб я міг їх редагувати та зберігати.

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

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

ІНШИЙ РЕДАКТ: Знайдено це https://stackoverflow.com/q/4680109/220652 . Майже така ж проблема.

Є кілька варіантів.

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

Тут я відредагував визначення в Інструменті розробника Chrome

Я можу прослідкувати за ім'ям файлу та номером рядка (після копіювання змін) і просто вставити їх у редактор

Крім цього, нещодавно запущений інструмент під назвою WebPutty, який призначений для полегшення описаної вами проблеми. У той час як я не використовував його ще особисто він розроблений Джоел Спольскі компанії з Fog Creek Software (Joel також співзасновник StackOverflow) Так що я готовий посперечатися , що це відносно стабільний, простий і ефективний продукт.

Це питання, здається, вже обговорювалося, але ви конкретніше говорите про редактор CSS. І я впевнений, що тому вони не позначили ваше запитання дублюючим.

Однак, що я можу запропонувати вам, це використання декількох інструментів, які я розмістив у відповідях на інші запитання, як-от: Альтернатива Dreamweaver в ubuntu? , і навіть коли я можу зробити ставку на те, що ви вже бачили це, я перекладаю його тут для вашої зручності:

Ваше запитання здається трохи неоднозначним.

Перш за все, що стосується альтернативи Dreamweaver, я знайшов усі пропозиції всіх інших відповідей відмінними, але коли шукав альтернативу Dreamweaver, найближче застосування - для мене - це проект Amaya . Що здається найбагатшим за інші альтернативи і трохи досконалішим, ніж Композер.

Скріншот з офіційної мережі є для вас, щоб побачити його в дії:

Додаткові знімки екрана можна отримати, натиснувши наступне посилання: http://www.w3.org/Amaya/screenshots/Overview.html

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

Граючи з редакторами WYSIWYG, я віддав перевагу прямому кодуванню з BlueFish, але це не редактор WYSIWYG.

А щодо пропозицій щодо вашої проблеми з firebug я нічого не можу сказати, вибачте.

Будь ласка, повідомте нам про те, як ви зробили, якщо даєте шанс Амаї.

Удачі!

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

Я перевірив те, що ви сказали у своєму коментарі, і виявив, що Amaya навіть не помічають, що щось змінилось у структурі / імені файлів / папок. Що не відповідає вашим потребам, пов’язаним із цим.

На наступному скріншоті ви бачите, що папку "ресурси" перейменував на "ресурси1", і Amaya поки що показує її як "ресурси", і немає ніякого способу змусити її оновити. Навіть після перезавантаження програмного забезпечення та завантаження проекту знову, Amaya цього не помітить.

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

Удачі!

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

Скріншоти, розміщені тут для вашої зручності:

Екран попереднього перегляду:

Екран коду:

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

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

Ось що я можу запропонувати. Вибачте, якщо це не відповідає вашим потребам та ...

Удачі!

Гаразд, коли-небудь слухайте! Geany - це просто ДУЖЕ! У ньому є плагін, який додає попередній перегляд браузера. Розмістити його можна на бічній панелі, на "нижній панелі" або в додатковому вікні. А тепер дві додаткові бонусні функції вбивці дупи. 1. Цей браузер використовує WebKit. Це означає, що у цього дивовижного інспектора! 2. Браузер перезавантажується під час збереження відкритого документа.

Крім цього, у нього є безліч інших дивовижних функцій, але ви повинні спробувати його самостійно. Я за одного просто закохався. Тут у вас є скріншот:

Вибачте, але я відповім на власне запитання. Я щойно знайшов Stylebot . Він відповідає майже всім умовам, які маю. У нього немає автоматичного завершення, але я можу з цим жити.

Ось скріншот. Бічна панель - Stylebot. У вас є основний режим редагування, де ви можете швидко редагувати деякі прості властивості, розширений режим, де ви можете редагувати звичайний CSS для обраного елемента, а за допомогою "Редагувати CSS" ви можете редагувати весь CSS для сторінки.

Спробуйте Firefox addon Firediff . Він інтегрується з Firebug, додаючи вкладку "Зміни", яка, як підказує назва дзен, показує будь-які зміни, які ви вносите в CSS або DOM.

Клацніть правою кнопкою миші зміну CSS на вкладці "Зміни", щоб зберегти різницю або знімок змін.

Є також cssUpdater , хоча я не використовував його.

Що стосується "локалізації селектора", я не зовсім впевнений, що ви маєте на увазі, але є selectBug , який ви можете завантажити тут .

Aptana Studio - це чудова IDE, але якщо я не помиляюся, у неї немає попереднього попереднього перегляду. У будь-якому разі, якщо вас цікавить: http://www.aptana.com/products/studio3

PS: У ньому є набір гарячих клавіш для попереднього перегляду, тому це не так вже й велика угода.

Сам по собі програмне забезпечення не є, але стильний Addon (хром і firefox) автоматично оновлює сторінку, коли ви зберігаєте таблицю стилів перезапис. На відміну від FireBug, він зберігає його, щоб ви могли скопіювати та вставити його у відповідний .cssфайл, коли будете задоволені.

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

Версія spring30 щойно вийшла пару днів тому :) Удачі!