W artykule:
Czy kiedykolwiek chciałeś tymczasowo edytować stronę internetową, aby zobaczyć, jak będzie wyglądać z określonymi kolorami, czcionkami, stylizacją itp. Jest to możliwe za pomocą narzędzia, które już istnieje w przeglądarce o nazwie Inspect Element. Jest to spełnienie marzeń dla wszystkich użytkowników DIY, gdy się o tym dowiedzą. W tym artykule pokażemy Ci podstawy inspect element i jak go używać w swojej witrynie WordPress.
Czym jest Inspect Element lub narzędzia programistyczne?
Nowoczesne przeglądarki internetowe, takie jak Google Chrome i Mozilla Firefox, mają wbudowane narzędzia, które umożliwiają programistom debugowanie błędów. Te narzędzia pokazują kod HTML, CSS i JavaScript strony oraz sposób, w jaki przeglądarka wykonuje ten kod.
Za pomocą narzędzia Inspect Element można edytować kod HTML, CSS lub JavaSCript dowolnej strony internetowej i wyświetlać zmiany na żywo (tylko na komputerze).
Dla właściciela witryny DIY te narzędzia mogą pomóc w podejrzeniu, jak wyglądałby projekt witryny bez wprowadzania zmian dla wszystkich.
Dla pisarzy te narzędzia są niesamowite, ponieważ możesz łatwo zmienić osobiste informacje identyfikacyjne podczas robienia zrzutów ekranu, eliminując potrzebę całkowitego rozmycia elementów.
W przypadku agentów pomocy technicznej jest to świetny sposób na zidentyfikowanie błędu, który może powodować, że galerie się nie ładują lub suwaki nie działają poprawnie.
My tylko drapiemy powierzchnię walizek. Inspect element jest naprawdę potężny.
W tym artykule skupimy się na Inspect Element w Google Chrome, ponieważ jest to nasza przeglądarka z wyboru. Firefox ma własne narzędzia programistyczne, które można również wywołać, wybierając inspect element z menu przeglądarki.
Gotowy? Zaczynajmy.
Video Tutorial
Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.
Uruchomienie elementu Inspect i zlokalizowanie kodu
Możesz uruchomić narzędzie inspect element, naciskając klawisze CTRL + Shift + I na klawiaturze. Alternatywnie można kliknąć w dowolnym miejscu na stronie internetowej i wybrać inspect element z 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.
Gdy przesuniesz kursor myszy nad źródłem HTML, zobaczysz podświetlony obszar na stronie internetowej. Zauważysz również zmianę reguł CSS, aby pokazać CSS dla oglądanego elementu.
Możesz także skierować wskaźnik myszy na element na stronie internetowej, kliknąć prawym przyciskiem myszy i wybrać inspect element. Element, na który wskazałeś, zostanie wyróżniony w kodzie źródłowym.
Edycja i debugowanie kodu w elemencie Inspect
Zarówno HTML, jak i CSS w oknie inspect element są edytowalne. Możesz dwukrotnie kliknąć w dowolnym miejscu kodu źródłowego HTML i edytować kod, jak chcesz.
Możesz także kliknąć dwukrotnie i edytować dowolne atrybuty i style w panelu CSS. Aby dodać własną regułę stylu, kliknij ikonę + u góry panelu CSS.
Po wprowadzeniu zmian w CSS lub HTML zmiany te zostaną natychmiast odzwierciedlone w przeglądarce.
Należy pamiętać, że wszelkie zmiany wprowadzone tutaj nie są nigdzie zapisywane. Inspect element jest narzędziem do debugowania i nie zapisuje zmian z powrotem do plików na serwerze. Oznacza to, że jeśli odświeżysz stronę, wszystkie zmiany znikną.
Aby faktycznie wprowadzić zmiany, będziesz musiał edytować arkusz stylów motywu WordPress lub odpowiedni szablon, aby dodać zmiany, które chcesz zapisać.
Przed rozpoczęciem edycji istniejącego motywu WordPress za pomocą narzędzia Inspect Element upewnij się, że zapisałeś wszystkie zmiany, tworząc motyw potomny.
Łatwe Znajdowanie Błędów W Witrynie
Element Inspect ma obszar o nazwie Console, który pokazuje wszystkie błędy występujące w witrynie. Podczas próby debugowania błędu lub prośby o wsparcie od autorów wtyczek, zawsze warto zajrzeć tutaj, aby zobaczyć, jakie są błędy.
Na przykład, jeśli byłeś klientem OptinMonster zastanawiającym się, dlaczego twój optin nie ładuje się, możesz łatwo znaleźć problem „Twoja strona nie pasuje”.
Jeśli twój sharebar nie działał poprawnie, możesz zobaczyć, że wystąpił błąd JavaScript.
Narzędzia takie jak konsola Inspect Element i wsparcie pomagają uzyskać lepszą obsługę klienta, ponieważ zespół pomocy technicznej uwielbia klientów, którzy podejmują inicjatywę w dostarczaniu szczegółowych informacji zwrotnych na temat problemu.
Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się podstaw inspect element i jak go używać w witrynie WordPres. Możesz także zapoznać się z domyślnym arkuszem ściągawki CSS generowanym przez WordPress, aby przyspieszyć umiejętności tworzenia motywów.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Możesz nas również znaleźć na Twitterze i Google+.
