Firebug to najwygodniejsze narzędzie do edycji CSS, jakie znalazłem - dlaczego więc nie ma prostej opcji „zapisz” dla CSS?

Zawsze robię poprawki w Firebug, a następnie wracam do mojego oryginalnego pliku .css i powielam poprawki.

Czy ktoś wymyślił lepsze rozwiązanie?

EDYCJA: Zdaję sobie sprawę, że kod jest przechowywany na serwerze (w większości przypadków nie jest to mój własny), ale używam go podczas tworzenia własnych witryn internetowych.

Firebug po prostu używa pliku .css, który Firefox pobrał z serwera, wie dokładnie, jakie wiersze, w których plikach edytuje. Nie rozumiem, dlaczego nie ma opcji „eksportu” lub „zapisz”, która umożliwia przechowywanie nowego pliku .css. (Którym mógłbym wtedy zastąpić zdalny).

Próbowałem przeszukać tymczasowe lokalizacje i wybrać Plik > Zapisz ... i eksperymentować z opcjami wyjściowymi w przeglądarce Firefox, ale nadal nie znalazłem sposobu.

EDYCJA 2: Oficjalna grupa dyskusyjna ma wiele pytań , ale nie ma odpowiedzi.

Przyszedłem tutaj, szukając dokładnie tej funkcji, to znaczy móc zapisać edytowane CSSwłaściwości z powrotem do oryginalnego pliku (na moim lokalnym komputerze programistycznym). Niestety po wielu poszukiwaniach i nie znalezieniu niczego, co odpowiada moim potrzebom (OK, jest CSS Updater ale musisz się zarejestrować i to płatne rozszerzenie ...) zrezygnowałem z Firefoksa + Firebug i szukałem czegoś podobnego dla Google Chrome. Zgadnij co ... Właśnie znalazłem ten świetny post, który pokazuje dobry sposób na uruchomienie tego (wbudowany w Chrome - nie ma potrzeby stosowania dodatkowych rozszerzeń):

Zmień CSS i ZAPISZ w lokalnym systemie plików za pomocą narzędzi programistycznych Chrome

Wypróbowałem to teraz i działa świetnie, podkreślając zmienione linie. Po prostu kliknij Zapisz i gotowe! :)

Oto film wyjaśniający to i wiele więcej: Google I / O 2011: Chrome Dev Tools Reloaded

Mam nadzieję, że to pomoże, jeśli zmiana przeglądarki podczas edycji plików CSS nie ma dla Ciebie znaczenia. Na razie wprowadziłem zmianę, ale naprawdę chciałbym mieć tę funkcję wbudowaną w Firebug. :)

[Aktualizacja 1]

Dzisiaj właśnie obejrzałem ten film: Edycja na żywo Firefox CSS w Sublimetext (w toku) Wygląda naprawdę obiecująco.

[Aktualizacja 2]

Jeśli korzystasz z programu Visual Studio 2013 z Web Essentials , będziesz mógł zsynchronizować CSS automagicznie, jak pokazano w tym filmie:

Web Essentials: integracja z narzędziami przeglądarki

Zastanawiałem się nad tym samym już od jakiegoś czasu,
po prostu szarpałem się, gdy twój freestyle-css z firebugem został rozerwany na kawałki przez
przypadkowe przeładowanie lub coś takiego ...

Dla moich zamiarów i celów w końcu znalazłem narzędzie ....: FireDiff .

Daje ci nową kartę, prawdopodobnie jakieś dziwne odniesienie Davida Bowie, zwane „zmianami”; który nie tylko pozwala zobaczyć / zapisać, co firebug, czyli ty, zrobiłeś,
ale także opcjonalnie śledzić zmiany dokonane przez samą stronę ... jeśli ona i / lub jesteś do tego skłonny.

Jestem bardzo wdzięczny za to, że nie muszę ponownie wpisywać lub wymyślać, a następnie ponownie wpisywać, każdej reguły CSS, którą tworzę ...

Tutaj jest link do dewelopera (nie lekceważ go pierwsze pojawienie się, równie dobrze może się udać prosto do repozytorium Mozilla Add-On .

Dodatek Web Developer umożliwia zapisywanie zmian. Chciałbym połączyć edycję Firebuga z funkcją zapisu programu Web Developer.

Użyj przycisku „ Zapisz ” (kliknij menu CSS -> Edytuj CSS), aby zapisać zmodyfikowany CSS na dysku.

Rekomendacja : Użyj przycisku „ Przyklej ”, aby zapobiec utracie zmian po zmianie zakładki na inne przeglądanie. Jeśli to możliwe, użyj tylko jednej zakładki, aby dokonać edycji, a inne okno przeglądarki Firefox związane z wyszukiwaniem, pocztą internetową itp.

Właśnie wydałem dodatek do firebuga w piaskownicy mozilla addon, która może robić to, co chcesz: https://addons.mozilla.org/en/firefox/addon/52365/

W rzeczywistości zapisuje "dotknięte" pliki css na żądanie na serwerze sieciowym (poprzez komunikację z jednoplikowym skryptem php usługi sieciowej).

Dokumentację można znaleźć na mojej stronie domowej lub na stronie dodatków

Byłbym wdzięczny za wszelkie testy, raporty o błędach, komentarze, oceny, dyskusje na ten temat, ponieważ jest to wciąż we wczesnej fazie beta, ale powinno już działać dobrze.

CSS-X-Fire

Dziwię się, że nadal nie ma go na liście do tego pytania, ale prawdopodobnie dlatego, że jest nowy i autor nie miał jeszcze czasu go promować.

Nazywa się CSS-X-Fire i jest to wtyczka do serii IDE JetBrains: IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine .

Jak to działa: instalujesz jedno z tych IDE i konfigurujesz wdrożenie (obsługuje FTP i SCP). Pozwoli ci to pozostać zsynchronizowanym z serwerem.

Następnie zainstaluj tę wtyczkę. Po uruchomieniu zapyta Cię, że zainstaluje wtyczkę do Firefoksa, aby przeprowadzić integrację między Firebug i IDE. Jeśli nie uda się zainstalować wtyczki, po prostu użyj techniki przeciągnij i upuść, aby ją zainstalować.

Po zainstalowaniu będzie śledzić wszystkie zmiany wprowadzone przez Firebug i będziesz mógł je zastosować jednym kliknięciem w IDE.

FireFile

FireFile to alternatywa, która wymaga dodania jednego małego pliku php po stronie serwera, aby móc załadować zmodyfikowany plik css.

Można połączyć Firebug do eclipse z fireclipse a następnie zapisz plik z Eclipse

Myślę, że najbliższym osiągnięciem jest przejście do trybu edycji w Firebug i skopiowanie i wklejenie zawartości pliku CSS.

Właśnie wprowadziliśmy Backfire, silnik javascript o otwartym kodzie źródłowym, który umożliwia zapisywanie zmian CSS dokonanych w Firebug i Webkit Inspector na serwerze. Biblioteka zawiera przykładową implementację C # dotyczącą sposobu zapisywania nadchodzących zmian w CSS.

Oto post na blogu o tym, jak to działa: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

A oto kod przechowywany w Google Code: http://code.google.com/p/backfire/

Wiem, że to nie odpowiada na twoje pytanie, ale, co zaskakujące, "pasek narzędzi programisty" klonu Firebug programu Internet Explorer 8 (dostępny za pomocą F12) oferuje opcję "zapisywania html". Ta funkcja zapisuje bieżący DOM do lokalnego pliku, co oznacza, że ​​jeśli w jakiś sposób edytujesz DOM, np. Dodając gdzieś atrybut stylu, to również zostanie on zapisany.

Niezbyt przydatne, jeśli używasz Firebuga do majstrowania przy CSS, jak wszyscy, ale krok we właściwym kierunku.

Proponuję rozwiązanie, które obejmuje połączenie Firebug i FireFTP, a także kod, który bezpośrednio uzyskuje dostęp do lokalnego systemu plików podczas lokalnego uruchamiania strony internetowej.

Oto scenariusze:

Praca nad witryną internetową hostowaną na komputerze zdalnym

W takim przypadku podasz szczegóły FTP i lokalizację CSS / HTML / Javascript, a Firebug zaktualizuje te pliki po zapisaniu zmian. Może nawet być w stanie zlokalizować same pliki, a następnie poprosić o sprawdzenie, czy ma poprawny plik. Jeśli nazwy plików są unikalne, nie powinno to stanowić problemu.

Praca nad witryną internetową działającą na komputerze lokalnym

W takim przypadku możesz podać Firebug lokalizację lokalnego folderu witryny i to samo zachowanie zostanie użyte do dopasowania i weryfikacji plików. W razie potrzeby dostęp do lokalnego systemu plików można uzyskać za pośrednictwem protokołu FireFTP.

Praca na serwisie WWW hostowanym zdalnie bez dostępu do FTP

W takim przypadku należałoby zaimplementować coś w rodzaju dodatku FireFile.

Dodatkową funkcją byłaby możliwość zapisywania i otwierania plików projektu, które przechowują mapowania między plikami lokalnymi i adresami URL, z którymi są skojarzone, a także zapisywania szczegółów FTP, tak jak robi to FireFTP.

Jestem autorem CSS-X-Fire, o którym Sorin Sbarnea również uprzejmie opublikował w tym wątku. Chyba trochę się spóźniłem;)

CSS-X-Fire emituje zmiany właściwości CSS z Firebug do IDE, gdzie zmiany można zastosować lub odrzucić.

To rozwiązanie ma kilka zalet w porównaniu z większością innych istniejących narzędzi, które wiedzą tylko o nazwach plików i zawartości pobieranej przez przeglądarkę (patrz komentarz NickFitz w oryginalnym poście).

Scenariusz 1: Masz witrynę internetową (projekt), która zawiera kilka motywów, spośród których użytkownik może wybierać. Każdy motyw ma swój własny plik CSS, ale tylko jeden jest znany Firebugowi, aktualny. CSS-X-Fire wykryje wszystkie pasujące selektory w projekcie i pozwoli Ci zdecydować, które z nich należy zmodyfikować.

Scenariusz 2: Projekt sieci Web zawiera arkusze stylów utworzone w czasie kompilacji lub podczas wdrażania. Mogą zostać scalone z kilku plików, a nazwy plików mogą ulec zmianie. CSS-X-Fire nie dba o nazwy plików, zajmuje się tylko nazwami selektorów CSS i ich właściwościami.

Powyżej znajdują się przykłady scenariuszy, w których CSS-X-Fire przoduje. Ponieważ działa z plikami źródłowymi i zna strukturę języka, pomaga również znaleźć duplikaty nieznane Firebugowi, przeskoczyć do kodu itp.

CSS-X-Fire to oprogramowanie typu open source na licencji Apache 2. Strona główna projektu: http://code.google.com/p/css-x-fire/

FireFile

Firebug został stworzony, aby wykrywać problem, a nie być debugerem. ale możesz zapisać zmiany, jeśli dodasz nowe narzędzie integrujące firebug z zapisywaniem zmian. to jest plik FireFile, kliknij tutaj http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html .

FireFile zapewnia pożądaną funkcjonalność, dodając mały plik PHP po stronie serwera.

Ponieważ Firebug nie działa na twoim serwerze, ale pobiera CSS z witryny i przechowuje go lokalnie i pokazuje witrynę z tymi lokalnymi zmianami.

Użyj edytora CSS na pasku narzędziowym Firefox Web Developer:

http://chrispederick.com/work/web-developer/

Ma wystarczająco dużo dobrych rzeczy do użycia w połączeniu z Firebug i pozwala zapisać CSS do pliku tekstowego.

Użyj Backfire.

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Jest to rozwiązanie typu open source, które wysyła zmiany CSS z powrotem na serwer i zapisuje je.

Backfire używa pojedynczego pliku javascript, a pakiet kodu źródłowego zawiera działający przykład implementacji serwera .NET, który można łatwo przenieść na inne platformy.

Miałem ten problem od zawsze i ostatecznie zdecydowałem, że nie powinniśmy edytować rzeczy w inspektorze sieci i zbudować coś dla niego ( https://github.com/viatropos/design.io ).

Lepsze rozwiązanie:

Przeglądarka automatycznie odzwierciedla zmiany CSS bez ponownego ładowania po naciśnięciu przycisku Zapisz w edytorze tekstu .

Głównym powodem, dla którego edytujemy css w inspektorze sieci (używam webkita, ale FireBug jest to samo), jest to, że musimy wprowadzić drobne poprawki, a ponowne załadowanie strony trwa zbyt długo.

Z takim podejściem wiążą się 2 główne problemy. Po pierwsze, możesz edytować pojedynczy element, który może nie mieć idselektora. Więc nawet gdybyś był w stanie skopiować / wkleić wygenerowany CSS z inspektora sieci, musiałby on wygenerować idzakres CSS. Coś jak:

#element-127 {
  background: red;
}

To spowodowałoby bałagan w CSS.

Możesz to obejść, zmieniając tylko style istniejącego selektora ( .spaceselektor klasy na poniższym obrazku inspektora Webkit).

Wciąż jednak drugi problem. Interfejs do tego jest dość szorstki, trudno jest wprowadzić duże zmiany - na przykład, jeśli chcesz spróbować naprawdę szybko skopiować ten blok css do tego miejsca, czy cokolwiek innego.

Wolę po prostu trzymać się TextMate.

Idealnie byłoby po prostu napisać CSS w edytorze tekstu i pozwolić przeglądarce odzwierciedlić zmiany bez ponownego ładowania strony . W ten sposób będziesz pisać ostateczne css podczas wprowadzania drobnych zmian.

Następnym poziomem byłoby napisanie w dynamicznym języku CSS, takim jak Stylus, Less, SCSS itp., I zaktualizowanie przeglądarki za pomocą wygenerowanego CSS. W ten sposób możesz zacząć tworzyć miksy, takie jak box-shadow(), które odciągają zawiłości, których inspektor sieciowy zdecydowanie nie mógł zrobić.

Jest kilka rzeczy, które to robią, ale moim zdaniem nic tak naprawdę nie usprawnia.

• LiveReload : przesyła css do przeglądarki bez odświeżania po naciśnięciu przycisku Zapisz, ale jest to aplikacja na Maca , więc trudno byłoby ją dostosować.
• CodeKit : również aplikacja na Maca , ale odświeża przeglądarkę za każdym razem, gdy zapisujesz.

Brak możliwości łatwego dostosowania sposobu ich działania jest głównym powodem, dla którego ich nie użyłem.

Stworzyłem https://github.com/viatropos/design.io specjalnie w celu rozwiązania tego problemu i sprawiłem, że tak:

1. Przeglądarka odzwierciedla css / js / html / etc za każdym razem, gdy zapisujesz, bez ponownego ładowania strony
2. Obsługuje dowolny szablon / język / framework (Stylus, Less, CoffeeScript, Jade, Haml itp.)
3. Jest napisany w JavaScript i możesz szybko połączyć rozszerzenia w JavaScript.

W ten sposób, gdy musisz wprowadzić te małe zmiany w CSS, możesz powiedzieć, ustaw kolor tła, naciśnij Zapisz, zobacz nie, niezupełnie, dostosuj odcień o 10, zapisz, nie, dostosuj o 5, zapisz, wygląda dobrze.

Sposób, w jaki to działa, polega na obserwowaniu każdego zapisywania pliku (na poziomie systemu operacyjnego), przetwarzaniu pliku (w tym miejscu działają rozszerzenia) i wysyłaniu danych do przeglądarki za pośrednictwem gniazd sieciowych, które są następnie obsługiwane (po stronie klienta rozszerzenie).

Nie podłączać ani nic, ale walczyłem z tym problemem przez długi czas.

Mam nadzieję, że to pomoże.

Firebug działa na obliczonym CSS (tym, który otrzymujesz, pobierając CSS w plikach i stosując dziedziczenie itp. Oraz zmiany dokonane za pomocą JavaScript). Oznacza to, że prawdopodobnie nie można go użyć bezpośrednio do dołączenia do pliku HTML, który jest specyficzny dla przeglądarki / wersji (chyba że zależy Ci tylko na Firefoksie). Z drugiej strony śledzi to, co jest oryginalne i co jest obliczane ... Myślę, że nie powinno być bardzo trudno dodać trochę JS do Firebuga, aby móc wyeksportować ten CSS do pliku tekstowego.

Zastanawiałem się, dlaczego nie mogę, do cholery, dobrze wybrać i skopiować tekstu przed oczami. Zwłaszcza gdy inni mówią, że można po prostu „wybrać i skopiować”. Okazuje się, że możesz , po prostu musisz rozpocząć przeciąganie poza tekstem (tj. W rynnie powyżej lub po lewej stronie tekstu), tak jak każde naciśnięcie myszki - niezależnie od tego, czy jest to kliknięcie, czy przeciągnięcie - na dowolnym tekście natychmiast wywołuje właściwość redaktor. Możesz także kliknąć zewnętrzny tekst, aby uzyskać kursor (nawet jeśli nie zawsze jest widoczny), po którym możesz poruszać się za pomocą klawiszy strzałek i zaznaczać tekst w ten sposób.
Tekst skopiowany do schowka jest niestety pozbawiony jakichkolwiek wcięć, ale przynajmniej chroni Cię przed ręcznym przepisywaniem całej zawartości pliku CSS. Po prostu niech twój program porównujący ignoruje zmiany w białych znakach podczas porównywania z oryginałem.

Możesz napisać własny plik skryptowy serwera, który przyjmuje parametr nazwy pliku i parametr zawartości.

Skrypt serwera znalazłby żądany plik i zastąpiłby jego zawartość nową.

Napisanie skryptu JavaScript, który wykorzystuje informacje o firebugu i pobiera przydatne dane, byłoby trudną częścią.

Osobiście wolałbym poprosić zespół programistów w Firebug o dostarczenie funkcji, nie powinno to być dla nich zbyt trudne.

Na koniec Ajax wysyła parę nazwa / zawartość do utworzonego pliku php.

Cytat z FAQ Firebuga :

Edycja stron

• Czy mogę zapisać w źródle zmiany wprowadzone na stronie internetowej, którą widzę?

  Teraz nie możesz. Jak napisał na grupie dyskusyjnej John J. Barton:

  Edytowanie w Firebug jest trochę jak wyjmowanie pikli i dodawanie musztardy do kanapki w restauracji: możesz cieszyć się rezultatem, ale następny klient w restauracji nadal dostanie pikle i bez musztardy.

  Jest to długo oczekiwana funkcja, więc pewnego dnia będzie dostępna bezpośrednio z Firebug. W międzyczasie możesz wypróbować Firediff , rozszerzenie do firebuga autorstwa Kevina Deckera.

• Jak mogę wyświetlić wszystkie zmiany, które zostały wprowadzone w CSS witryny w firebug?

  To funkcja zaimplementowana w Firediff Kevina Deckera .

Oto częściowe rozwiązanie. Po wprowadzeniu zmian kliknij jedno z łączy do odpowiedniego pliku. To jest oryginalny plik, więc musisz odświeżyć plik, który znajduje się pod przyciskiem menu opcji w prawym górnym rogu panelu firebug. Teraz masz zmodyfikowaną stronę css, którą możesz skopiować i wkleić. Oczywiście będziesz musiał to zrobić dla każdego pliku css.

Edycja: wygląda na to, że Mark Biek ma szybszą wersję

Bardzo prostym sposobem na „edycję” swojej strony jest przejście do niej za pomocą przeglądarki internetowej. Zapisz stronę jako html tylko na swoim pulpicie. Przejdź do pulpitu i kliknij prawym przyciskiem myszy nowy plik strony internetowej i wybierz otwórz za pomocą, wybierz notatnik i edytuj stronę stamtąd, jeśli znasz html, będzie to łatwe. Po zakończeniu edycji zapisz plik i ponownie otwórz swoją stronę internetową, jeśli zmiany zostały wprowadzone poprawnie, powinny tam być. Następnie możesz użyć nowej edytowanej strony i wyeksportować ją lub skopiować do zdalnej lokalizacji

W rzeczywistości Firebug jest narzędziem do debugowania i analizy: nie jest edytorem i oczywiście nie jest uważany za taki. Drugi powód został już wspomniany: jak zmienić CSS przechowywany na serwerze podczas debugowania strony internetowej?