Edytor CSS z podglądem w czasie rzeczywistym i lokalizacją selektora

Tytuł mówi wszystko o tym, czego szukam. Zasadniczo powinno to być oprogramowanie, które zbiera wszystkie style stron internetowych, aby móc je edytować i zapisywać.

Proszę uważnie przeczytać pytanie, ponieważ chcę, aby wszystkie wymienione warunki zostały spełnione.

EDYCJA: Chcę być tutaj bardziej przejrzysty lub raczej opisać mój pożądany przepływ pracy. Sytuacja początkowa będzie polegała na tym, że masz źródła strony na swoim komputerze lokalnym.
Teraz chcę otworzyć zwykłe źródła (HTML / CSS) w moim edytorze / IDE / cokolwiek (bez WYSIWYG!). I chcę podgląd na żywo tuż obok niego lub w innym oknie (nie w innej karcie!), Chcę go zobaczyć podczas edycji źródła. Podgląd powinien być aktualizowany automatycznie (lub gdy zapisuję plik, który zasadniczo byłby taki sam, ponieważ CTRL + S jest rodzajem odruchu: P).
Dodatkowo powinien mieć inspektora działającego podobnie do Firebuga lub Chroma (e | ium). Kiedy klikam selektor CSS w tym inspektorze, kursor powinien przejść do niego w odpowiednim pliku źródłowym.

KOLEJNA EDYCJA: Znaleziono to https://stackoverflow.com/q/4680109/220652 . Prawie ten sam problem.

Istnieje kilka opcji.

Obecnie po prostu używam Narzędzi programistycznych Google Chrome ( Action Video ), ponieważ pozwala na szeroki zakres inspekcji, szczegółowych raportów i nadrzędności. Po wprowadzeniu zmian po prostu kopiuję zaktualizowany plik CSS i zapisuję odpowiednie sekcje pliku CSS, odśwież, kontynuuj podłączanie.

Tutaj edytowałem definicję w Narzędziu programisty Chrome

Mogę śledzić nazwę pliku i numer linii (po skopiowaniu zmian) i po prostu wkleić je do edytora

Poza tym istnieje niedawno uruchomione narzędzie o nazwie WebPutty, które ma na celu złagodzenie opisanego problemu. A ja nie używano go jeszcze osobiście to opracowana przez Joel Spolsky spółki Fog Creek Software (Joel jest również współzałożycielem StackOverflow) Więc byłbym skłonny się założyć, że jest to stosunkowo stabilny, prosty i skuteczny produkt.

To pytanie wydaje się już omówione, ale dokładniej mówisz o edytorze CSS. I jestem pewien, że dlatego nie oznaczyli twojego pytania jako zduplikowane.

Mogę jednak zasugerować korzystanie z kilku narzędzi, które zamieściłem w odpowiedziach na inne pytania, takich jak: Dreamweaver alternatywa w Ubuntu? , a nawet jeśli mogę założyć się, że już go widziałeś, transkrybuję go tutaj dla Twojej wygody:

Twoje pytanie wydaje się trochę niejednoznaczne.

Po pierwsze i odnosząc się do alternatywy dla Dreamweaver, wszystkie sugestie wszystkich pozostałych odpowiedzi były doskonałe, ale kiedy szukałem alternatywy dla Dreamweaver, najbliższą aplikacją - dla mnie - był projekt Amaya . Która wydaje się najbogatsza niż inne alternatywy i nieco bardziej wyrafinowana niż Kompozer.

Zrzut ekranu z oficjalnej strony jest tutaj, aby zobaczyć go w akcji:

Dodatkowe zrzuty ekranu można uzyskać, klikając następny link: http://www.w3.org/Amaya/screenshots/Overview.html

Może się okazać, że jest trochę niestabilny, a przynajmniej był dla mnie, ale może również pasować do twoich potrzeb.

Po graniu z edytorami WYSIWYG wolałem bezpośrednie kodowanie za pomocą BlueFish, ale nie jest to edytor WYSIWYG.

A jeśli chodzi o sugestie dotyczące twojego problemu z firebugiem, nie mogę nic powiedzieć, przepraszam.

Daj nam znać, jak ci poszło, jeśli dałeś Amayi szansę.

Powodzenia!

Edycja == Po zainstalowaniu Amaya uważam, że jest ona jeszcze daleka od stabilnej, ale wydaje się, że ma lepsze funkcje niż inne aplikacje, jeśli weźmiesz pod uwagę, że inne oprogramowanie to proste edytory tekstu, a Amaya jest jak edytor WYSIWYG.

Przetestowałem to, co powiedziałeś w swoim komentarzu i odkryłem, że Amaya nawet nie zauważa, że ​​coś zmieniło się w strukturze plików / folderów / nazwy. Co nie będzie odpowiadać twoim potrzebom związanym z tym.

Na następnym zrzucie ekranu widać, że nazwa folderu „zasoby” została zmieniona na „zasoby1”, a Amaya wciąż pokazuje go jako „zasoby” i nie ma możliwości wymuszenia jego odświeżenia. Nawet po ponownym uruchomieniu oprogramowania i ponownym załadowaniu projektu Amaya tego nie zauważy.

Mam zamiar śledzić twoje pytanie z nadzieją, że ktoś przyjdzie i rzuci dobrą alternatywę.

Powodzenia!

Ponadto w odpowiedziach innych użytkowników na te same pytania znalazłem „ Blue Griffon Web Editor ”, który wydaje się być jedynym stabilnym edytorem internetowym z oknem podglądu w czasie rzeczywistym, którego -btw- nie można zobaczyć w trybie podziału . Możesz zobaczyć tylko kod lub podgląd WYSIWYG, a nie oba jednocześnie.

Zrzuty ekranu umieszczone tutaj dla Twojej wygody:

Ekran podglądu:

Ekran kodu:

To narzędzie zawiera wiele przydatnych narzędzi, ale niektóre dodatki lub wtyczki mogą być niewolne (płatne). Co zmniejsza jego atrakcyjność.

Aptana Studio 3 , który polecam w tej odpowiedzi: Podstawowe Web Development IDE / Edytor jak Dreamweaver? jest dla mnie najlepszym narzędziem do programowania, ponieważ mogę podglądać na żywo za pomocą przeglądarki internetowej na moim rozszerzonym pulpicie z podwójnym widokiem. Co może nie być twoją sprawą.

To mogę zasugerować. Przepraszam, jeśli to nie pasuje do twoich potrzeb i ...

Powodzenia!

Ok, wszyscy słuchają! Geany jest po prostu NIESAMOWITE! Ma wtyczkę, która dodaje podgląd przeglądarki. Możesz umieścić go na pasku bocznym, na „pasku dolnym” lub w dodatkowym oknie. A teraz dwie dodatkowe bonusowe funkcje złego zabójcy. 1. Ta przeglądarka używa WebKit. Oznacza to, że ma tego niesamowitego inspektora! 2. Przeglądarka ładuje się ponownie po zapisaniu otwartego dokumentu.

Poza tym ma tak wiele innych niesamowitych funkcji, ale powinieneś spróbować sam. Po prostu zakochałem się. Oto zrzut ekranu:

Przepraszam, ale odpowiem na własne pytanie. Właśnie znalazłem Stylebota . Spełnia prawie wszystkie warunki, które mam. Nie ma żadnego automatycznego uzupełniania, ale mogę z tym żyć.

Oto zrzut ekranu. Pasek boczny to Stylebot. Masz podstawowy tryb edycji, w którym możesz szybko edytować niektóre proste właściwości, tryb zaawansowany, w którym możesz edytować zwykły CSS dla wybranego elementu, a za pomocą „Edytuj CSS” możesz edytować cały CSS strony.

Wypróbuj dodatek Firefox Firediff . Integruje się z Firebug dodając zakładkę „Zmiany”, która, jak sugeruje nazwa zen, pokazuje wszelkie zmiany wprowadzone w CSS lub DOM.

Kliknij prawym przyciskiem myszy zmianę CSS na karcie „Zmiany”, aby zapisać różnicę lub migawkę swoich zmian.

Jest też cssUpdater , chociaż go nie użyłem.

Jeśli chodzi o „lokalizację selektora”, nie jestem do końca pewien, co masz na myśli, ale istnieje selectBug , który możesz pobrać tutaj .

Aptana Studio to świetne IDE, ale jeśli się nie mylę, nie ma podglądu w czasie rzeczywistym. W każdym razie, jeśli jesteś zainteresowany: http://www.aptana.com/products/studio3

PS: Ma zestaw klawiszy szybkiego dostępu do podglądu, więc nie jest to taka wielka sprawa.

Nie oprogramowanie jako takie, ale Stylish Addon (chrome i firefox) aktualizuje stronę automatycznie po zapisaniu zastępującego arkusza stylów. W przeciwieństwie do FireBug, zapisuje go, więc możesz go skopiować i wkleić do odpowiedniego .csspliku, gdy będziesz zadowolony.

zaledwie kilka tygodni temu nowy gracz podbił na tym polu. Mówię o nawiasach otwartego edytora kodu Adobe. Wszystkie potrzebne informacje tutaj: https://github.com/adobe/brackets/wiki/Linux-Version

Wersja spring30 została właśnie wydana kilka dni temu :) Powodzenia!