Zwykle podczas edycji strony internetowej korzystamy z określonego narzędzia do edycji, takiego jak Adobe Dreamweaver, CoffeeCup, Bluefish lub jedno z innych narzędzi programistycznych. Ale co jeśli burza mózgów lub chcesz wypróbować coś na stronie na żywo? Możemy wykonać kopię strony w naszym wybranym narzędziu i pobawić się nią. Lub możemy to zrobić w naszej przeglądarce internetowej. W tym samouczku pokażemy, jak edytować stronę internetową w przeglądarce.
Firefox, nazywany Narzędziami programisty, wywołuje funkcję Inspect Element, a Chrome nazywa ją Inspect. Tak czy inaczej, jest to sposób, w jaki przeglądarka może zajrzeć za lśniący projekt i spojrzeć na kod, który go napędza. Ta funkcja jest dość dobrze znana i jest często używana. To, co nie jest tak dobrze znane, to możliwość wprowadzania zmian w tym kodzie w locie.
Wszelkie wprowadzone zmiany nie zostaną zapisane i nie wpłyną na życie. Jeśli nie chcesz ładować strony w narzędziu programisty, jest to dobry sposób na eksperymentowanie.
Edytuj dowolną stronę w przeglądarce
Dreamweaver i podobne narzędzia mają wbudowany emulator przeglądarki, który symuluje wygląd projektu w różnych przeglądarkach. Mimo że są dobre, nie zawsze są dokładne i przy uruchamianiu witryny często okazuje się, że to, co wyglądało fantastycznie w narzędziu programisty, wygląda nieco inaczej w niezależnej przeglądarce.
Zwykle uruchamiasz witrynę na wewnętrznym serwerze internetowym i testujesz w przeglądarce przed uruchomieniem na żywo tylko z tego powodu. Jeśli strona jest już aktywna lub po prostu chcesz coś wypróbować, nie musisz kopiować i ładować jej do narzędzia programistycznego, możesz po prostu użyć narzędzia programistycznego przeglądarki.
Używam Firefoksa, więc pokażę ci, jak z tego korzystać. Chrome jest jednak taki sam.
- Otwórz stronę internetową, z którą chcesz eksperymentować w przeglądarce.
- Kliknij prawym przyciskiem myszy dowolne miejsce na stronie i wybierz polecenie Sprawdź.
Powinieneś zobaczyć swoją stronę podzieloną na dwie części z nowym panelem pojawiającym się na dole z jakimś kodem. Ten kod jest siłą napędową wybranej strony. Różne elementy strony są dostępne z kart u góry dolnej karty. Na przykład widzimy Inspector, Console, Debugger, Style Editor i tak dalej w Firefox.
Jeśli najedziesz kursorem na linie w dolnym okienku, zobaczysz różne części podświetlenia strony internetowej. Wiersz kodu, który włączasz podczas podświetlania, to kod, który wpływa na tę część strony.
- Jeśli chcesz się pobawić wyglądem strony, wypróbuj Edytor stylów.
- Jeśli chcesz się zastanowić, jak działa strona, wypróbuj Konsolę lub Ułatwienia dostępu.
- Jeśli chcesz usunąć błędy lub rozwiązać problem, użyj konsoli lub debugera
Wydajność jest przydatna w przypadku SEO na miejscu, ale pamięć, sieć i pamięć masowa nie są tak często używane.
Pamiętaj, że możesz manipulować w Narzędziach programisty tyle, ile chcesz i nie wpłynie to na witrynę. Wszelkie zmiany są dokonywane tylko w sposobie wyświetlania strony w indywidualnej przeglądarce, nie ma to wpływu na samą witrynę. Po zamknięciu narzędzia wszystkie zmiany zostaną utracone.
Wprowadzanie zmian na stronie
Teraz wiesz, że możesz zmienić wszystko, co chcesz, bez wpływu na rzeczywistą stronę internetową, zabawmy się. Znajdź na stronie element, który chcesz edytować. Możesz zmienić czcionkę, kolor czcionki, obraz tła lub cokolwiek zechcesz. W tym przykładzie zamierzam zmienić kolor czcionki nagłówka banera.
- Kliknij prawym przyciskiem myszy element, który chcesz zmienić, i wybierz polecenie Sprawdź.
- Podświetl wiersz „tytułem” lub „H1”, aby tekst był podświetlony w górnym okienku.
- Przejdź do dwóch lewych paneli i znajdź kolor czcionki.
- Zmień wartość na inną lub wybierz kolorową kropkę, aby użyć selektora.
Twoja zmiana pojawi się dynamicznie po jej zakończeniu. Możesz zmienić kolor, rozmiar, czcionkę, tło i wszystko na temat czcionki. Nie możesz zapisać pracy, ale zmiany pozostaną dla tej sesji.
Możesz zmienić wszystko na stronie, co jest idealne, jeśli masz pomysł i chcesz go szybko sprawdzić przed uruchomieniem wszystkich aplikacji programistycznych. Musisz tylko pamiętać, jakie zmiany wprowadziłeś i gdzie nie możesz ich tutaj zapisać. Musisz zrobić zrzut ekranu lub zapisać zmiany i powielić je w narzędziach programistycznych, aby się trzymały.
Edycja strony internetowej w przeglądarce to świetny sposób na eksperymentowanie lub zabawę ze stronami. To także dobry sposób, aby dowiedzieć się trochę o tworzeniu stron internetowych bez konieczności kupowania drogich narzędzi programistycznych. Teraz już wiesz jak idź i baw się!
