Cześć,
poszukuję edytora HTML CSS, który działaby podobnie do narzędzia dla twórców witryn, wbudowanego w Firefoxa. Chodzi o to, żeby na podglądzie strony zaznaczać elementy, których kod podświetli się w oknie kodu. W Firefoxie działa to super, ale niestety nie da się zapisywać wprowadzonych zmian, więc nadaje się to jedynie.do szybkiego testowania zmian na żywo. wiem że zmieniony kod można skopiować, wkleić do pliku i zapisać, ale przy większej liczbie zmian nie jest to zbyt wygodne.
Będę wdzięczny za sugestie programów, najlepiej bezpłatnych, ale mogą być również płatne, byleby nie w abonamencie i nie takie, które działają online w przeglądarce. Chodzi o program instalowany na dysku.
Podobno można z jakimś frameworkiem używać contenteditable - HTML: HyperText Markup Language | MDN
Tylko czy nie gubi on ulubionego formatowania (np. wcięcia) lub czy to się ogranicza do najwyżej aktualizacji tekstów…
Chodzi Ci o to, żeby formatowanie pozostało po przeładowaniu strony?
Możesz tam tez przeklejać style, które wypracujesz sobie w narzędziach dla twórców witryn.
Ewentualnie jak chcesz czegoś bardziej zaawansowanego Greasemonkey — pobierz to rozszerzenie do 🦊 Firefoksa (pl)
Dzięki panowie za wskazówki. Niestety nie jest to, o co mi chodziło.
W Firefoxie działa to tak, że gdy klikniemy na stronie prawym przyciskiem i wybierzemy „Zbadaj”, można myszą wskazywać dowolny element strony, a w wyświetlającym kod strony oknie poniżej, podświetla się część kodu odpowiadająca zaznaczonemu elementowi strony. Problemem jest to, że wprowadzone w kodzie zmiany nie są zapisywane, nawet w przypadku otwarcia pliku HTML zapisanego lokalnie na dysku lokalnym. Zatem sam Firefox spełniałby moje oczekiwania, gdyby nie brak wspomnianego zapisu zmian.
Nie możesz w ten sposób edytować strony „na stałe”, kod strony zazwyczaj generowany jest poprzez aplikację po stronie serwera zgodnie z programem, który składa ją z wielu elementów takich jak szablony/ tj kawałki kodu HTML zapisane w różnych plikach, informacje w bazie danych, ostatecznie kod JavaScript wykonywany po stronie przeglądarki. Wszystko często jest uzależnione od przekazanych parametrów.
Mocno upraszczając temat, to co widzisz w narzędziach dla twórców witryn to „uruchomiony”, scalony i uporządkowany przez przeglądarkę kod, który tak naprawdę jest wirtualny, tj nie istnieje nigdzie poza pamięcią przeglądarki, przynajmniej nie w takiej formie.
Musiałbyś mieć całą aplikację, która generuje daną stronę i jest uruchomiona na serwerach dostawcy tej strony, uruchomić ją lokalnie na swoim komputerze i w tej aplikacji wprowadzać zmiany.
Jak zapiszesz stronę w HTML, to masz tylko jej statyczny fragment. Mimo to też nie możesz tego HTML zmodyfikować przez przeglądarkę. Narzędzia dla twórców z przeglądarki nie służą do takich celów, tylko do podglądu zmian, które potem twórca wprowadza w swojej aplikacji czy narzędziach, za pomocą których tworzy swoją stronę
Możesz za to za każdym razem, gdy otwierasz stronę w przeglądarce, automatycznie modyfikować jej zawartość wg tych samych reguł (za pomocą Stylebot, Greasemonkey itp). To będzie działać, dopóki producent nie zmeni strony na tyle, że reguły przestaną pasować.
Co robić, jak żyć? Jeżeli masz stronę w postaci plików HTML/CSS itp na dysku:
- Jeżeli poprawiłeś coś w narzędzia dla twórców witryn, to znajdź te fragmenty w plikach HTML/CSS i je również popraw
- Popraw w narzędzia dla twórców witryn a następnie zapisz stronę korzystając z opcji zapisywania strony w przeglądarce
- Zainteresuj się jakimś edytorem typu Visual Studio Code
Generalnie jeżeli zapisujesz stronę wygenerowaną gdzieś tam przez serwer, to nie ma gwarancji że ona zapisze się prawidłowo i ze wszystkimi elementami.
Ale ja mam do wyedytowania pliki HTML z osadzonym w nich CSS, które są zapisane na dysku.
To nie działa. Strona zapisuje się w wersji niewyedytowanej.
No nic, będę szukał dalej.
Edytuj więc te pliki na bazie tego co wypracujesz w narzędziach dla twórców. Polecam edytor Visual Studio Code.
W Firefox działa, sprawdzałem. Strona zapisuje się ze zmianami.
edit:
OK, nie działa, tzn działa ale tylko jak edytujesz HTML a nie CSS’y.