Piszemy CSS i HTML w Chrome bez edytora tekstu

Podczas tworzenia stron WWW, proces edycji CSS, wygląda często tak:

·        Próbujemy ostylować element w DevToolsach

·        Gdy osiągamy oczekiwany efekt, wpisujemy kod ponownie do edytora

·        Odświeżamy przeglądarkę i ewentualnie wracamy do pierwszego punktu

Google Chrome, oferuje świetną opcję, która znacznie uprości sposób, w jaki tworzysz swoje style. Sztuczki, które opisuję niżej, poznałem dzięki jednemu z tutoriali Brada Traversy.

Edycja CSS w Chrome

Aby zadziała się magia, wejdź w przeglądarce w sekcję Sources i wybierz w niej, arkusz stylów, który załączyłeś do dokumentu HTML. Możesz tam edytować kod CSS i na bieżąco podglądać zmiany. To bardzo duża korzyść na przykład wtedy, gdy strona działa wolno, lub wymaga skomplikowania przed zobaczeniem efektów. Zamiast denerwować się na każde przeładowywanie strony i problemy z cache, możesz sprawnie wykonywać swoje zadania.

Klikając PPM w oknie, w którym piszesz style, możesz zapisać arkusz na dysku, w celu późniejszego dogrania go do CSS strony. Przykładowo – możesz tworzyć style w przeglądarce i dopiero przed skomitowaniem kodu, wrzucić je w edytor tekstu i zapisać.

Możesz też zobaczyć, jakie zmiany zrobiłeś w kodzie lokalnie, klikając w edytor PPM i wybierając Local Modifications – pojawi się okienko pokazujące różnice. Kilka miesięcy temu pisałem o tym, jakie zalety ma wtyczka Stylish i teraz muszę to odwołać – edytowanie stylów w Chrome, działa znacznie lepiej.

Chrome jako edytor

Jeśli strona jest zapisana na dysku i nie wymaga takich zabiegów, jak na przykład kompilacja SASS, nic nie stoi na przeszkodzie, żeby tworzyć ją bezpośrednio w Chrome.

W okienku po lewej panelu Sources, kliknij PPM i wybierz opcję Add folder to workspace. Po zezwoleniu na edycję, możesz używać Chrome jako wygodnego edytora. Zmiany są zapisywane bieżąco na dysku. Możesz edytować także HTML. Co najlepsze, nasze zmiany nie znikają po odświeżeniu strony.

Edycja snippetów

Snippety to pliki zawierające JS, które możesz dodawać do istniejącego kodu na stronie. Znajdziesz je w trzeciej zakładce po lewej stronie w panelu Sources.

W komentarzu napisz, co sądzisz o tej metodzie pracy.