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

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

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

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

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.

• Po dodaniu folderu musisz dać Chrome dostęp do folderu.

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

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

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.

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.

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/

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

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.

Rozszerzenie Tincr Chrome jest łatwiejsze do zainstalowania (nie trzeba uruchamiać serwera węzłów) ORAZ posiada również funkcjonalność LiveReload po wyjęciu z pudełka! Mów o edycji dwukierunkowej! :)

Witryna Tin.cr

Link do sklepu Chrome Web Store

Artykuł na blogu Andy'ego

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

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.

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

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

Dopóki nie wklejasz CSS w element.style:

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

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

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

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

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

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.