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
html
css
google-chrome
google-chrome-extension
google-chrome-devtools
Jitendra Vyas
źródło
źródło
Odpowiedzi:
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.
Po dodaniu folderu musisz dać Chrome dostęp do folderu.
Następnie musisz odwzorować zasób sieciowy na zasób lokalny.
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).
źródło
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
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.
źródło
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/
źródło
Wiem, że to stary post, ale zapisuję go w ten sposób:
Możesz także zobaczyć Lokalne modyfikacje, aby zobaczyć swoje wersje, bardzo interesująca funkcja. Działa również ze skryptami.
źródło
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.
źródło
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
źródło
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ć.
źródło
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
źródło
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ę.
źródło
Dopóki nie wklejasz CSS w
element.style:Kliknij na to, a otworzy się cały CSS dodany w panelu źródeł
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.
źródło
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.
źródło