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

104

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?

hookedonwinter
źródło
Nie powinno być trudno napisać do tego rozszerzenie do Safari / Chrome. Użyj menu kontekstowego, aby umożliwić użytkownikowi kliknięcie elementu prawym przyciskiem myszy, a następnie pobierz właściwość currentStyle obiektu, może wysłać do schowka?
tbeseda
Może powinienem był poszukać, zanim skomentuję tutaj. Możliwy duplikat stackoverflow.com/questions/162644/ ...
MiffTheFox
Ach fajnie. Bardzo chciałbym zobaczyć odpowiedzi na temat chrome / web-kit, ale to są świetne odpowiedzi. Dzięki @MiffTheFox
hookedonwinter
Sprawdź Backfire: blog.quplo.com/2010/08/… Nie próbowałem, ale brzmi obiecująco.
Bryan Downing,
1
@BryanDowning Done! To jest super niesamowite. Dzięki za ping.
hookedonwinter

Odpowiedzi:

77

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:

https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg

Nicholas Zographos
źródło
4
zauważ, że działa to również w przypadku nowych selektorów CSS, które są dodawane w Inspektorze za pomocą +ikony
Jonathan Day
1
Działa to tylko w przypadku zmian, które zostały dodane do arkusza stylów Inspektora. Nie będzie działać w przypadku zmian wprowadzonych w zestawach reguł dla istniejących selektorów klas.
ian.pvd
49

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.

Chris MacDonald
źródło
1
Wygląda na to, że możesz cofnąć tylko do ostatniego odwołania. Więc stracisz zmiany, jeśli przypadkowo odświeżysz / zamkniesz kartę itp.
tomblah
Jak to działa z nowoczesnymi pakietami, takimi jak webpack, w których cały plik CSS jest umieszczony w jednym pliku?
mattgabor
Nie widzę tego „Lokalne modyfikacje”. Czy ta odpowiedź jest nieaktualna?
Luke Pighetti
@LukePighetti Widzę to w v79 (12/2019) jeśli otworzę interesujący mnie plik źródłowy> prawy przycisk myszy> lokalne modyfikacje. Spowoduje to otwarcie zakładki w „szufladzie konsoli” zatytułowanej „zmiany”, która ma lewe menu ze wszystkimi zmienionymi przeze mnie plikami. Możesz również przejść do niego, klikając wielokropek menu> więcej narzędzi> zmiany.
xr280xr
11

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.

FelipeAls
źródło
Fajna wtyczka. Zdecydowanie zbliża mnie do miejsca, w którym chcę. Czekam i zobaczę, czy pojawi się coś lepszego (na przykład pełne skopiowanie sformatowanego pliku css do schowka).
hookedonwinter
7

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: Przykładowa różnica StyleURL

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

Jarred Sumner
źródło
Bardzo przydatne narzędzie!
DanTheMann
2
Wszystkie linki nie działające akceptują github. Proszę o aktualizację, brzmi obiecująco
Mirosław
Ten projekt jest teraz porzucony. Szkoda :-(
Damon Hill
6

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.

Zrzut ekranu karty Zmiany w narzędziach programistycznych Chrome

Adrian B.
źródło
1
Ta odpowiedź zapewnia wbudowane rozwiązanie przeglądarki do przeglądania zmian bez konieczności instalowania dodatkowych rozszerzeń. Śledzi zmiany wprowadzone w dowolnym arkuszu stylów (lub JS) jako wyszczególnione różnice z oddzielnymi plikami i pokazuje dodawanie linii po linii, usunięcia i indywidualne zmiany znaków. Chociaż nie ma eksportu, jest to dziś lepsze rozwiązanie niż obecna najlepsza odpowiedź z 2011 r.
ian.pvd
W tych odpowiedziach po 9 latach jest dużo szumu, ale to z pewnością najlepsza odpowiedź. Jedyne, czego brakuje, to szybki sposób na wyeksportowanie różnic, aby można było przetwarzać zmiany automatycznie w skrypcie lub środowisku IDE, zamiast robić równolegle i ręcznie modyfikować arkusz stylów.
Sami Fouad
5

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!

Bryan Downing
źródło
Wygląda niesamowicie. Szkoda, że ​​to 80 dolarów. Dzięki @Bryan, dobre znalezisko
hookedonwinter
2
Tutaj odpowiedź uległa zmianie w ciągu ostatnich kilku lat. Chrome DevTools umożliwia teraz zapisywanie zmian z powrotem w pliku . Ekscytujące czasy!
cloudworks
4

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).

Aleksandra Pawłowa
źródło
4

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 .

wprowadź opis obrazu tutaj

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

Andrew Craswell
źródło
1

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:

wprowadź opis obrazu tutaj

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”:

wprowadź opis obrazu tutaj

Mariano Ruiz
źródło
0

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!

Abraham Brookes
źródło
0

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 .

Taylor Edmiston
źródło
0

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

Frazer Kirkman
źródło
-1

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.

Edwin Yip
źródło
8
Brzmi wspaniale. Szkoda, że ​​to dla systemu Windows.
KPM
Ogólnie rzecz biorąc, odsyłaczom do narzędzia lub biblioteki powinny towarzyszyć uwagi dotyczące użytkowania, szczegółowe wyjaśnienie, w jaki sposób połączony zasób można zastosować do problemu lub przykładowy kod lub, jeśli to możliwe, wszystkie powyższe.
Samuel Liew