Jak zapisać zmiany CSS panelu Style w Narzędziach Chrome dla programistów?


195

Jak zapisać zmiany CSS panelu Style w Narzędziach programisty Google Chrome ?

Na stronie internetowej narzędzia wspomniano, że możemy zobaczyć wszystkie zmiany w panelu zasobów

wprowadź opis zdjęcia tutaj

Ale pracuję lokalnie nad plikiem CSS, ale zmiany nie są dla mnie widoczne w panelu Zasoby

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj

Przy okazji Czy znasz jakieś dodatki, narzędzia do zapisywania zmian css narzędzi Chrome dla programistów? Wiem, że dla Firebug istnieje wiele https://stackoverflow.com/search?q=firebug+CSS+changes+save


Istnieje teraz interfejs API dla rozszerzeń DevTools do otrzymywania powiadomień o zmienianych zasobach - dzięki czemu możesz utworzyć rozszerzenie, które będzie integrować się z wybranym IDE lub po prostu opublikować zawartość zasobu na serwerze WebDAV: developer.chrome.com/extensions/ …
caseq,

9
Uważam, że to pytanie i odpowiedzi są nieaktualne, ponieważ Chrome przeniósł teraz funkcję oszczędzania CSS do panelu „Źródła” . Funkcjonalność jest dość myląca i nieco myląca: Zbadałem tę zmodyfikowaną funkcję oszczędzania CSS Chrome bardziej szczegółowo w tym powiązanym wpisie Przepełnienie stosu: stackoverflow.com/questions/16005435/...
ChaseMoskal 15.04.13


Lokalne przesłonięcia to nowy sposób na to, zaczynając od Chrome 65. Przesłonięcia to inna funkcja niż przestrzenie robocze.
Kayce Basques,

Odpowiedzi:


137

Możesz zapisać zmiany CSS w samym Chrome Dev Tools. Chrome pozwala teraz dodawać foldery lokalne do swojego Workspace. Po zezwoleniu Chrome na dostęp do folderu i dodaniu folderu do lokalnego obszaru roboczego, możesz zamapować zasób sieciowy na zasób lokalny.

  • Przejdź do panelu Źródła narzędzi programistycznych, kliknij prawym przyciskiem myszy lewy panel (tam, gdzie są wymienione pliki) i wybierz Dodaj folder do obszaru roboczego . Możesz szybko przejść do arkusza stylów w panelu Źródła, klikając arkusz stylów w prawym górnym rogu każdej reguły CSS dla wybranego elementu w panelu Elementy.

wprowadź opis zdjęcia tutaj

  • Po dodaniu folderu musisz dać Chrome dostęp do folderu. Zezwól na dostęp chromu

  • Następnie musisz odwzorować zasób sieciowy na zasób lokalny.

wprowadź opis zdjęcia tutaj

  • Po ponownym załadowaniu strony Chrome ładuje teraz lokalne zasoby mapowanych plików. Aby uprościć sprawę, Chrome pokazuje tylko zasoby lokalne (abyś nie pomylił się, czy edytujesz zasób lokalny czy sieciowy). Aby zapisać zmiany, naciśnij CTRL + Spodczas edycji pliku.

ps

Może być konieczne otwarcie mapowanych plików i rozpoczęcie edycji, aby Chrome zastosował wersję lokalną (data 201604.12).


4
Chcę dodać tylko na dole arkusza stylów mojego motywu, niezależnie od tego, jakie różnice w CSS wymyśliłem podczas edytowania CSS na żywo. Otóż ​​to. Czy istnieje sposób, aby wymyślić „różnicę”, którą CSS mogę skopiować i wkleić? Zobacz inne pytanie: stackoverflow.com/questions/21871535/... Historia w tle jest taka, że ​​edytuję CSS należący do motywu, mogę tylko dodać CSS na dole arkusza stylów, a nie edytować niczego powyżej. To samo dotyczy sytuacji, gdy ktoś może tylko dodać custom.css do strony internetowej z jego przesłonięciem CSS.
Caroline Schnapp

paul-irish, Zainteresowany tym, jak wykonać różnicę / łatkę tylko zmiany lokalne CSS (bez zmian zdalnych). Zaoszczędź, ponieważ tak naprawdę nie rozwiązuje problemu elastyczności i przyspieszenia ...
Denis Denisov,

Teraz Chrome automatycznie zapisuje lokalne pliki (bez naciskania CTRL + S), jak temu zapobiec?
Uzair Ali

Nie działa dla mnie. Po zapisaniu pliku CSS w folderze lokalnym, mapowaniu zdalnego na lokalny i ponownym załadowaniu, wszystkie zmiany zniknęły. :( edycja pliku lokalnego w panelu Elementy i zapisanie pliku w źródłach również nie powoduje utrwalenia moich zmian.
chrupiący

2
Wygląda na to, że w inspektorze przeglądarki Chrome 46 występuje błąd polegający na tym, że po ponownym załadowaniu strony zmapowany plik lokalny jest ponownie stosowany tylko wtedy, gdy zmienisz go w panelu Źródła. Możesz nawet zmienić go w zewnętrznym edytorze, ale musisz go otworzyć i skoncentrować w panelu Źródła.
chrupiący

29

Tutaj pisarz i programista DevTools.

Począwszy od Chrome 65, Lokalne przesłonięcia to nowy, lekki sposób na to. Jest to inna funkcja niż Obszary robocze.

Skonfiguruj przesłonięcia

  1. Przejdź do panelu Źródła .
  2. Przejdź do zakładki Zastąpienia .
  3. Kliknij Wybierz folder do zastąpień .
  4. Wybierz katalog, w którym chcesz zapisać zmiany.
  5. W górnej części okna kliknij Zezwalaj, aby dać DevTools dostęp do odczytu i zapisu do katalogu.
  6. Dokonaj zmian. Na poniższym pliku GIF widać, że background:rosybrownzmiana utrzymuje się podczas ładowania stron.

zastępuje wersję demo

Jak działają przesłonięcia

Kiedy dokonujesz zmiany w DevTools, DevTools zapisuje zmianę w zmodyfikowanej kopii pliku na twoim komputerze. Po przeładowaniu strony DevTools wyświetla zmodyfikowany plik, a nie zasób sieciowy.

Różnica między przesłonięciami a obszarami roboczymi

Obszary robocze zostały zaprojektowane tak, abyś mógł używać DevTools jako swojego IDE. Odwzorowuje kod repozytorium na kod sieci, używając map źródłowych. Prawdziwą korzyścią jest to, że minimalizujesz kod lub używasz kodu, który musi zostać przetranspilowany, jak SCSS, a następnie zmiany, które wprowadzasz w DevTools (zwykle) są mapowane z powrotem na oryginalny kod źródłowy. Z drugiej strony przesłonięcia pozwalają modyfikować i zapisywać dowolny plik w sieci. To dobre rozwiązanie, jeśli chcesz po prostu szybko poeksperymentować ze zmianami i zapisać te zmiany między ładowaniami stron.


5
to działa, ale wciąż jest zbyt skomplikowane. Wolałbym, żebyś mógł to włączyć tylko dla bieżącej sesji. IMHO, pole wyboru „Zachowaj zmiany zasobów dla bieżącej sesji” lepiej pasowałoby do przepływu pracy programistów. Trwałe zmiany nie są czymś, czego programista internetowy potrzebuje w swojej codziennej działalności, a może nawet powodować dodatkowy ból głowy, jeśli zapomnisz usunąć te zastąpienia i wrócisz kilka tygodni później. Zastąpienia są odpowiednie dla użytkowników końcowych - nie do debugowania. Nadal głosowałem.

Zgadzam się z drugim komentarzem. To wcale nie jest intuicyjne i nie zapisuje wszystkich zmian, więc nie jest tak pomocne. Lepiej byłoby nam napisać małe chromowane rozszerzenie nasłuchujące zmian i je zapisać. To jest, jeśli istnieje interfejs API lub proces, który możemy podłączyć ... jeszcze go nie sprawdziłem.
Carles Alcolea

Przepraszam, proszę pana. Czy liveSCSS nie jest już przestarzałe i nie jest już rozwijane? patrz stackoverflow.com/a/57622797/10189759
Luk Aron

@Kayce Basques co z opracowywaniem rozszerzeń chrome? Kiedy wstrzykujesz arkusze stylów (i js), wszystkie te funkcje nie działają, prawda? Wszelkie rozwiązania dla tego rodzaju rozwoju (w celu przyspieszenia aktualizacji css / js z narzędzi chrome dev do lokalnych plików źródłowych rozszerzenia). Dzięki
Andrew

19

Nowe wersje Chrome mają funkcję zwaną obszarami roboczymi, która rozwiązuje ten problem. Możesz zdefiniować, które ścieżki na twoim serwerze internetowym odpowiadają ścieżkom w twoim systemie, a następnie edytować i zapisywać za pomocą ctrl-s.

Zobacz: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/


Myślę, że OP chce zobaczyć zmiany, które wprowadził w zakładce Style panelu Elementy. Te zmiany niekoniecznie są powiązane z określonym plikiem źródłowym.
Ron Inbar

13

Wiem, że to stary post, ale zapisuję go w ten sposób:

  1. Przejdź do panelu Źródła.
  2. Kliknij opcję Pokaż nawigatora (aby wyświetlić panel nawigatora po lewej stronie).wprowadź opis zdjęcia tutaj
  3. Kliknij żądany plik CSS. (Otworzy się w edytorze ze wszystkimi wprowadzonymi zmianami)
  4. Kliknij edytor prawym przyciskiem myszy i zapisz zmiany.

Możesz także zobaczyć Lokalne modyfikacje, aby zobaczyć swoje wersje, bardzo interesująca funkcja. Działa również ze skryptami.


Nie mogłem znaleźć „Show Navigator”
NickyLarson

@NickyLarson, zredagowałem swoją odpowiedź, aby uwzględnić gdzie jest ten przycisk.
Guilherme de Jesus Santos

Przeczytaj ponownie oryginalne pytanie. On nie edytuje pliku CSS. Wprowadza zmiany w zakładce Style panelu Elementy.
Ron Inbar

11

Szukasz niewłaściwej sekcji „Zasoby”.

Nie ma go w „Lokalnym magazynie”, jest w „Ramkach”:

Powyższy zrzut ekranu pokazuje różnice między oryginalnymi stylami a nowymi modyfikacjami dokonanymi w devtools. Możesz kliknąć element prawym przyciskiem myszy w lewym panelu i zapisać go z powrotem na dysku.


Dla mnie też nic w ramkach. Dodałem jeszcze jeden zrzut ekranu
Jitendra Vyas

Nie jestem pewien, jak twoje „ramki” mogą być puste. To brzmi zepsute. Wypróbuj to w kompilacji Canary (możesz zainstalować go wraz z bieżącą wersją): tools.google.com/dlpage/chromesxs
trzydzieści dwa

Kanarek nie może się otworzyć. Znalazłem też to rozwiązanie justin.my/2011/04/why-my-google-chrome-canary-cannot-run, ale nadal nie działa. Otrzymałem ten komunikat po zakończeniu instalacji k.min.us/iefbE2.jpg
Vyas

2
W ten weekend (21.05.2012) to rozwiązanie już nie działa. Robiłem to samo, co ty, aby napisać duże fragmenty nowego css (nie stare lub edytowane). Ale teraz, przynajmniej dla mnie, kliknięcie tego pliku HTML pokazuje tylko surowy HTML bez pokazywania nowych reguł CSS. Czy nadal działa dla Ciebie, a jeśli nie, masz nowe rozwiązanie, aby to osiągnąć?
Nucleon

to też nie działa dla mnie w Chrome 48. W każdym razie nadal to robić?
DMTintner,


8

Teraz, gdy Chrome 18 został wydany w zeszłym tygodniu z wymaganymi interfejsami API, opublikowałem moje rozszerzenie chrome w sklepie internetowym Chrome. Rozszerzenie automatycznie zapisuje zmiany w CSS lub JS w narzędziach programistycznych na dysku lokalnym. Idź to sprawdzić.


4

Do Twojej wiadomości: Jeśli używasz stylów wbudowanych lub bezpośrednio modyfikujesz DOM (na przykład dodając element), przestrzenie robocze nie rozwiązują tego problemu. Jest tak, ponieważ DOM żyje w pamięci i nie ma rzeczywistego pliku powiązanego z aktywnym stanem DOM.

W tym celu lubię robić migawkę domena „przed” i „po” z konsoli: copy(document.getElementsByTagName('html')[0].outerHTML)

Następnie umieszczam go w narzędziu różnicowym, aby zobaczyć moje zmiany.

Zróżnicowany obraz narzędzia

Pełny artykuł: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a


1

Aby odpowiedzieć na ostatnią część pytania na temat rozszerzeń, które mogą zapisywać zmiany, dostępna jest poprawka

Pozwala zapisywać zmiany z Chrome Dev Tools bezpośrednio w GitHub. Stamtąd możesz skonfigurować hak po otrzymaniu w GitHub, aby automatycznie aktualizować swoją witrynę.


1

Dopóki nie wklejasz CSS w element.style:

  1. Przejdź do stylu, który dodałeś. Powinien być link z arkuszem stylów inspektora:

wprowadź opis zdjęcia tutaj

  1. Kliknij na to, a otworzy się cały CSS dodany w panelu źródeł

  2. Skopiuj i wklej - tak!

Jeśli nie było za pomocą element.style:

Możesz kliknąć prawym przyciskiem myszy element HTML, kliknąć Edytuj jako HTML, a następnie skopiować i wkleić HTML ze stylami wbudowanymi.


1
A jeśli nie możesz znaleźć tego arkusza stylów inspektora, ponieważ zgubiłeś się podczas przeszukiwania domu, po prostu Ctrl + P (lub CMD + P), podczas gdy DevTools jest skoncentrowany i zacznij pisać „inspec” ... wyskoczy od razu, a następnie po prostu wejdź. i.imgur.com/WSWcbh8.png
Carles Alcolea

1

AKTUALIZACJA 2019: Ponieważ inne odpowiedzi są nieco nieaktualne, dodam tutaj zaktualizowaną. W najnowszej wersji nie ma potrzeby mapowania folderu chrome do systemu plików.

wprowadź opis zdjęcia tutaj

Załóżmy, że mam na pulpicie folder WWW zawierający pliki HTML, CSS, JS, który chcę zaktualizować, gdy wprowadzę zmiany w chrome: =

1) Potrzebujesz działającego serwera lokalnego, takiego jak węzeł itp. Alternatywnie to rozszerzenie vscode tworzy serwer dla Ciebie: serwer VSCode na żywo , zainstaluj go, uruchom serwer.

2) załaduj stronę HTML w Chrome z uruchomionego serwera lokalnego.

3) Otwórz devTools-> Źródła-> System plików-> Dodaj folder do obszaru roboczego

wprowadź opis zdjęcia tutaj

4) Dodaj folder używany do uruchamiania lokalnego serwera. W najnowszym chrome nie jest wymagane żadne dodatkowe mapowanie! Ta-da!

Więcej na ten temat Edytuj pliki w obszarach roboczych

Zauważ, że zmiany dokonane na karcie stylów NIE odzwierciedlą plików systemu plików. Zamiast tego musisz przejść do devtools-> source-> your_folder, a następnie wprowadzić tam zmiany i ponownie załadować stronę, aby zobaczyć efekt.
wprowadź opis zdjęcia tutaj


1
Ale OP konkretnie zapytał o zmiany wprowadzone w zakładce Style ...
Ron Inbar
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.