Czy kiedykolwiek chciałeś tymczasowo edytować stronę internetową, aby zobaczyć, jak będzie wyglądać z określonymi kolorami, czcionkami, stylem? Jest to możliwe dzięki narzędziu, które już istnieje w Twojej przeglądarce o nazwie „ Sprawdź element ”. Jest to spełnienie marzeń wszystkich użytkowników, którzy lubią manipulować CSS.
W tym samouczku przeprowadzimy Cię przez podstawy inspekcji elementów i jak z nich korzystać w witrynie WordPress.
Co to jest narzędzie do kontroli przedmiotów?
Nowoczesne przeglądarki, takie jak Google Chrome i Mozilla Firefox, mają wbudowane narzędzia, które pozwalają programistom na debugowanie błędów. Narzędzia te wyświetlają HTML, CSS i JavaScript strony i pokazują, jak działa kod.
Korzystanie z narzędzia „ Sprawdź element Możesz edytować kod HTML, CSS lub JavaScript dla dowolnej strony internetowej i zobaczyć swoje zmiany na żywo (tylko na komputerze).
Dla właściciela Witryna internetowa, te narzędzia mogą pomóc w podglądzie wyglądu określonego stylu bez faktycznego stosowania zmian u wszystkich.
Dla pisarzy te narzędzia są niesamowite, ponieważ podczas robienia zrzutów ekranu można łatwo zmieniać informacje umożliwiające identyfikację, co eliminuje potrzebę rozmycia elementów.
Dla pracowników pomocy technicznej jest to świetny sposób na zidentyfikowanie błędu, który może powodować, że galerie nie ładują się lub uniemożliwiają im prawidłowe działanie.
Dopiero zarysowujemy powierzchnię przypadków użycia, ponieważ narzędzie „ Sprawdź element Jest naprawdę potężny.
W tym artykule skupimy się na narzędziu „ Sprawdź element Z Google Chrome, bo to nasza ulubiona przeglądarka. Firefox ma własne narzędzia programistyczne, które można również wywołać, wybierając menu " sprawdź element ".
Uruchomienie narzędzia „Sprawdź element” i lokalizację kodu
Narzędzie można uruchomić, naciskając klawisze CTRL + Shift + I na klawiaturze. Możesz też kliknąć w dowolnym miejscu na stronie internetowej, a następnie wybrać opcję Sprawdź element menu przeglądarki.
Okno przeglądarki zostanie podzielone na dwie części, a dolne okno pokaże kod źródłowy strony internetowej.
Okno narzędzia programisty jest dalej podzielone na dwa okna. Po lewej stronie zobaczysz kod HTML strony. W prawym okienku zobaczysz reguły CSS.
Przesuwając kursor myszy nad źródłem kodu HTML, zobaczysz podświetlony obszar podświetlony na stronie internetowej. Zauważysz również reguły CSS dla tego elementu, o którym mowa.
Możesz również przesunąć wskaźnik myszy nad element na stronie internetowej, kliknąć prawym przyciskiem myszy i wybrać „ sprawdź element ”. Element, który kliknąłeś, zostanie podświetlony w kodzie źródłowym.
Code Developer i Developer Debugger
HTML i CSS w oknie kontroli elementu można edytować. Możesz dwukrotnie kliknąć kod źródłowy HTML i edytować kod według własnego uznania.
Możesz także kliknąć dwukrotnie i edytować atrybuty stylów w panelu CSS. Aby dodać regułę, kliknij ikonę plus w okienku stylu u góry.
Po wprowadzeniu zmian w kodzie CSS lub HTML zmiany te zostaną natychmiast odzwierciedlone w przeglądarce.
Pamiętaj, że nie wszystkie wprowadzone tutaj zmiany są zapisywane w dowolnym miejscu. Narzędzie Sprawdź element Jest narzędziem do debugowania i nie zapisuje zmian w pliku na serwerze. Oznacza to, że jeśli odświeżysz stronę, wszystkie zmiany zostaną utracone.
Aby wprowadzić zmiany, musisz zmodyfikować styl swojego WordPress lub szablon, aby dodać zmiany, które chcesz zapisać.
Zanim zaczniesz edytować swój WordPress istniejące za pomocą narzędzia " Sprawdź element Pamiętaj, aby zapisać wszystkie zmiany, tworząc motyw podrzędny.
Jak łatwo znaleźć błędy w serwisie WordPress
Narzędzie Sprawdź element Ma obszar o nazwie „ Konsola Który pokazuje wszystkie błędy, które występują w Twojej witrynie. Przed próbą debugowania błędu lub poproszenia o pomoc autorów motywu lub wtyczki zawsze warto zajrzeć tutaj, aby zobaczyć, co jest nie tak.
Na przykład, jeśli byłeś klientem OptinMonster Kto zastanawia się, dlaczego jego opcja nie ładuje się, możesz łatwo znaleźć problem wskazujący, że „ ślimak na swojej stronie nie zgadza się ".
Jeśli pasek udostępniania nie działał poprawnie, możesz zobaczyć, że spowodował go błąd JavaScript.
To wszystko w tym samouczku, mam nadzieję, że możesz lepiej dostosować swój blog WordPress. Podziel się tym samouczkiem ze znajomymi.