Eksportuj zmiany CSS z inspektora (webkit, firebug itp.)

Kiedy pracuję z CSS, często testuję w przeglądarce - powiedzmy, Chrome - klikam prawym przyciskiem myszy element, klikam Sprawdź element i edytuję CSS. Użycie klawiszy strzałek do zmiany takich rzeczy, jak marginesy i dopełnienie, sprawia, że ​​układanie rzeczy jest bardzo łatwe.

Nie jest to zbyt trudne, aby wprowadzić te zmiany i zastosować je do pliku CSS, ale byłoby fajnie, gdybym mógł kliknąć prawym przyciskiem myszy selektor w inspektorze i wybrać „eksportuj” lub „kopiuj” i udostępnić zawartość w moim schowek.

Czy coś takiego istnieje?

Znalazłem odpowiedź na to pytanie, przynajmniej od wersji Chrome v14.

Będąc w sekcji Elementy, po prostu kliknij link „nazwa pliku: numer linii” obok reguł CSS. Plik CSS, który się pojawi, będzie zawierał wszystkie modyfikacje.

Dokładnie to miejsce:

W przeglądarce Chrome możesz kliknąć prawym przyciskiem myszy plik CSS na karcie Źródła i kliknąć „Lokalne modyfikacje”

To pokazuje wszystkie lokalne zmiany. Każda wersja jest oznaczona sygnaturą czasową i można przywrócić dowolną poprzednią wersję.

Zobacz sekcję Edycja na żywo i historia zmian w tym samouczku.

Firediff to dodatek do Firebuga, który śledzi zmiany wprowadzone w Firebug. Rejestruje wszystko, co zrobisz w panelu HTML (świetnie), ale także twoje krótkie użycie rozszerzenia Web Developer Toolbar (nie tak świetne), powiedz Shift-Ctrl-F, aby uzyskać informacje o rozmiarze czcionki w px.

Widziałem rozszerzenie Firebug w Chrome, ale go nie testowałem, używam Firediff z Firefoksem.

Zbudowałem rozszerzenie Chrome, które robi dokładnie to.

Nazywa się StyleURL - przyjmuje wszelkie zmiany CSS wprowadzone w Chrome Inspector i wyświetla prawidłowy CSS jako różnicę: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

Oto przykład, w którym dodałem „padding-bottom: 50px” do tej strony:

Jest open-source i również na GitHub: https://github.com/Jarred-Sumner/styleurl-extension

W Chrome jest też zakładka Zmiany w szufladzie konsoli, która wyświetla wszystkie modyfikacje CSS. To nie jest eksport, ale przynajmniej bardzo wygodnie jest szybko zrozumieć, co się zmieniło.

Już wcześniej zasugerowałem ten produkt na SO (nie jestem z nimi w żaden sposób powiązany).

http://www.skybound.ca/

Znakomity produkt. Brzmi jak dokładnie to, czego szukasz i nie tylko.

EDYCJA: Kilka innych odpowiedzi wspomniało o możliwości łączenia się Google Chrome z plikami lokalnymi (co jest bardzo fajne). Sprawdź pozostałe odpowiedzi!

Jeśli edytujesz zewnętrzny CSS, możesz przeciągnąć jego najnowszą wersję z panelu Zasoby do dowolnego edytora tekstu obsługującego DnD (patrz http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ , więcej szczegółów znajdziesz w sekcji „Utrzymujące się zmiany”). Możesz także cofnąć zmiany CSS do dowolnej wcześniejszej wersji zasobu arkusza stylów (w menu podręcznym dowolnej wersji arkusza stylów po kliknięciu prawym przyciskiem myszy).

Jak wspomniano w Cloudworks, odpowiedź na to pytanie uległa zmianie. Można to teraz zrobić całkiem dobrze za pomocą rozszerzenia Chrome DevTools Autosave . To narzędzie śledzi zmiany CSS i JavaScript wprowadzone w konsoli Chrome Developer Tools i zapisuje je z powrotem w plikach lokalnych. Aby uzyskać instrukcje dotyczące instalacji i konfiguracji rozszerzenia, zapoznaj się z przewodnikiem napisanym przez @addyosmani na jego blogu, tutaj .

Jest też przydatny screencast, który dość dobrze opisuje rozszerzenie.

Dzięki obszarom roboczym możesz zapisywać CSS podczas wpisywania ich w inspektorze (w przeglądarce Chrome). Problem polega na tym, że każda zmiana jest automatycznie zapisywana i nie ma możliwości wyłączenia tej funkcji, jak wskazano w http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ i Wyłącz automatyczne zapisywanie zmian CSS w Chrome Developer Tools .

Zarówno Firefox, jak i Chrome obsługują teraz tę funkcję, ale warto zauważyć, że na niektórych platformach, jeśli nie wszystkie Chrome nie pokazują jej domyślnie, musisz włączyć widok „Zmiany”, aby to zobaczyć (w moim Kubuntu Linux 20.04 nie było domyślnie), oto jak możesz to włączyć: przejdź do przycisku „Dostosuj i kontroluj DevTools” na pasku Narzędzi dla programistów> „Więcej narzędzi”> „Zmiany” , a zakładka pojawi się pod przyciskiem:

W Firefoksie nie ma potrzeby go włączać, ale jeśli pochodzisz ze świata Chrom *, znalezienie go może być trudne. Po prostu sprawdź ostatnią sekcję po prawej stronie na karcie „Inspektor”:

Jeśli korzystasz z narzędzi deweloperskich Firefoksa, możesz edytować css bezpośrednio w oknie dialogowym narzędzi - kliknij przycisk widoku CSS (jest to przycisk u góry z {}symbolem) i bezpośrednio edytuj swój plik css. Będzie aktualizować się w czasie rzeczywistym w przeglądarce, a kiedy skończysz, po prostu skopiuj i wklej go bezpośrednio do pliku css. Miły!

Aby dodać odpowiedź konkretnie dla Safari - jest to trochę możliwe.

Kiedy edytujesz CSS w sekcji Style w Inspektorze dla istniejącego pliku CSS, możesz nacisnąć, Cmd-Saby ponownie zapisać cały plik ze zmianami. Jednakże, jeśli używasz metajęzyka, takiego jak Sass / preprocesor / generowanie CSS z pakietowaniem itp., Nie sądzę, aby to naprawdę rozwiązało ten problem, chociaż może to być możliwe w przypadku map źródłowych CSS.

Kiedy edytujesz CSS u góry sekcji Style, poniżej, Style Attributeaby dodać style wbudowane (niezwiązane z istniejącym plikiem CSS), nie jest możliwe łatwe wyeksportowanie wszystkich tych zmian. Na razie tylko kopiuję i wklejam nadpisania ręcznie dla każdego elementu.

Oficjalne dokumenty Apple są trochę przestarzałe, ale można je znaleźć tutaj: Samouczek dotyczący inspektora sieci Web - Edytowanie kodu w celu zmiany strony internetowej .

W przeglądarce Chrome w Inspektorze css możesz kliknąć i przytrzymać przycisk +, a następnie wybrać opcję dodania zmian do arkusza stylów Inspektora. Nie jest to tak wygodne, jak bezpośrednia edycja w selektorach css, ale wszystko, co napiszesz, będzie w pliku inspector-stylesheet.css

Mój niedługo dostępny w wersji beta produkt LIVEditor robi to dokładnie.

Aby łatwo to zrozumieć, możesz pomyśleć o inspektorze Firebuga osadzonym w twoim edytorze tekstu.

W ten sposób nie musisz ponownie wprowadzać zmian ręcznie w edytorze kodu po dostosowaniu go za pomocą narzędzi programistycznych Firebug lub Webkit.