Kiedy po raz pierwszy odkryliśmy narzędzie Inspect Element, poczuliśmy się, jakbyśmy otworzyli tajne drzwi do wnętrza sieci. Pozwoliło nam to eksperymentować z projektowaniem stron internetowych bezpośrednio w przeglądarce.
Inspect Element umożliwia tymczasową edycję kodu HTML i CSS strony. Jest to niezwykle przydatne do modyfikacji tekstu, dostosowywania kolorów lub testowania zmian układu bez zagłębiania się w skomplikowany kod.
Jedną z rzeczy, którą doceniliśmy od razu, było to, że te zmiany nie są trwale zapisywane. Oznacza to, że możesz bawić się bez obaw, wiedząc, że oryginalna witryna pozostaje nienaruszona.
W tym przewodniku podzielimy się podstawami korzystania z Inspect Element w witrynie WordPress. Umiejętność ta może zaoszczędzić wiele godzin, pomagając jednocześnie w dopracowaniu projektów lub poprawieniu problemów ze stylizacją w podróży.
Czym jest narzędzie Inspect?
Niezliczoną ilość razy polegaliśmy na narzędziach programistycznych przeglądarki, aby rozwiązywać problemy i eksperymentować ze zmianami w witrynie. Nowoczesne przeglądarki internetowe, takie jak Google Chrome, Firefox, Safari i Microsoft Edge, są wyposażone we wbudowane narzędzia zaprojektowane, aby pomóc programistom w łatwym debugowaniu błędów.
Narzędzia te wyświetlają kod HTML, CSS i JavaScript strony, pokazując jednocześnie, jak przeglądarka go przetwarza. Dla nas jest to jak wypróbowanie naszych kodów bez wpływu na rzeczywistą stronę internetową.
Dostęp do tych narzędzi deweloperskich można uzyskać na dowolnej stronie, klikając prawym przyciskiem myszy i wybierając „Inspect” z menu. Jest to jedno z naszych ulubionych działań podczas testowania modyfikacji projektu lub debugowania problemu.
Narzędzie Inspect umożliwia tymczasową edycję kodu HTML, CSS lub JavaScript i wyświetlanie zmian na ekranie. Używaliśmy go do podglądu wszystkiego, od drobnych modyfikacji stylu po kompletne pomysły na układ. (Pokażemy ci, jak to zrobić w dalszej części tego artykułu).
A co najlepsze? Zmiany te nie mają wpływu na rzeczywistą stronę internetową. Po przeładowaniu strony lub zamknięciu przeglądarki wszystko wraca do normy. Dzięki temu jest to bezpieczne i niezawodne narzędzie do testowania pomysłów.
Okazało się, że jest to szczególnie pomocne dla właścicieli witryn DIY i programistów, którzy potrzebują szybkiego sposobu testowania lub debugowania. Oto tylko kilka przypadków użycia:
- Zastosuj nowe style CSS i natychmiast zobacz, jak wyglądają na Twojej stronie.
- Autorzy tekstów technicznych mogą edytować HTML dla zrzutów ekranu, ukrywać poufne informacje lub dostosowywać widoczny tekst.
- Programiści często używają go do identyfikowania typowych błędów WordPress, debugowania problemów JavaScript lub rozwiązywania błędów 404.
A to tylko wierzchołek góry lodowej. Narzędzia te są niezwykle wszechstronne, co czyni je ulubionymi dla każdego, kto pracuje z witrynami internetowymi.
W tym przewodniku skupimy się na narzędziu Inspect w Google Chrome, ponieważ jest to najpopularniejsza przeglądarka wśród naszych czytelników. Jednak Firefox, Safari i Microsoft Edge mają podobne narzędzia, do których można uzyskać dostęp za pośrednictwem opcji Inspect.
Gotowy do rozpoczęcia? Skorzystaj z poniższych linków, aby przejść do dowolnej sekcji artykułu i postępować zgodnie z instrukcjami:
Uruchamianie narzędzia Inspect i lokalizowanie kodu
Możesz uruchomić narzędzie inspekcji naciskając CTRL + Shift + I (Command + Options + I dla MacOS) na twojej klawiaturze.
Można również kliknąć w dowolnym miejscu na stronie internetowej i wybrać opcję „Sprawdź” z menu przeglądarki.
Dostęp do narzędzia można również uzyskać z głównego menu przeglądarki.
W przeglądarce Google Chrome kliknij menu z trzema kropkami w prawym górnym rogu, a następnie przewiń w dół do opcji Więcej narzędzi ” Narzędzia dla programistów.
Okno twojej przeglądarki zostanie podzielone na dwie części.
Po jednej stronie zobaczysz stronę, którą oglądałeś. Po drugiej stronie znajduje się kod HTML i reguły CSS.
Pozycja stacji dokującej Inspect jest różna, ale można ją zmienić, klikając menu z trzema kropkami i wybierając pozycję „Dock side”. Ikonkę do kliknięcia widać na powyższym obrazku.
Przesunięcie twojego kursora myszy nad źródło HTML spowoduje podświetlenie obszaru na stronie, który ma wpływ.
Zauważysz również powiadomienie o zmianie reguł CSS po kliknięciu elementu wewnątrz kodu HTML.
Można również umieścić wskaźnik myszy na elemencie na stronie, kliknąć prawym przyciskiem myszy i wybrać narzędzie „Inspect”.
Element zostanie podświetlony w kodzie źródłowym.
Edytowanie i debugowanie kodu w Inspect Element
Zarówno HTML, jak i CSS w oknie inspekcji elementu można edytować. Możesz kliknąć dwukrotnie w dowolnym miejscu kodu źródłowego HTML i edytować kod w dowolny sposób.
Możesz także kliknąć dwukrotnie i edytować dowolne atrybuty i style w panelu CSS.
Aby dodać niestandardową regułę stylu, wystarczy kliknąć ikonę + w górnej części panelu CSS.
W miarę wprowadzania zmian w CSS lub HTML, zmiany te będą miały natychmiastowy wpływ na przeglądarkę.
Zmiany te zostaną zapisane w pamięci tymczasowej twojej przeglądarki i nie będą miały wpływu na witrynę internetową.
Ważna uwaga: Wszelkie zmiany wprowadzone tutaj nie są nigdzie zapisywane. Element Inspect jest narzędziem do debugowania i nie zapisuje twoich zmian z powrotem do plików na serwerze. Jeśli odświeżysz stronę, wszystkie twoje zmiany znikną.
Aby wprowadzić zmiany, będziesz musiał dodać własny CSS do twojego motyw u lub edytować odpowiedni szablon, aby dodać zmiany, które chcesz zapisać.
Zanim zaczniesz edytować twój istniejący motyw WordPress za pomocą narzędzia Inspect Element, upewnij się, że utworzyłeś kopię zapasową WordPress.
Łatwe wyszukiwanie błędów w witrynie
Narzędzie Inspect posiada obszar o nazwie Console, który pokazuje błędy, które wystąpiły podczas wczytywania strony.
Podczas próby debugowania błędu lub prośby o pomoc techniczną od autorów wtyczek, zawsze warto zajrzeć tutaj, aby sprawdzić, czy są jakieś błędy lub ostrzeżenia.
Korzystając z karty Console, można rozwiązać kilka typowych problemów. Dla przykładu, to tylko kilka rzeczy, które można zrobić za pomocą konsoli inspect:
- Dowiedz się, dlaczego dodany obrazek nie jest wyświetlany.
- Dlaczego wtyczka lub motyw nie zachowują się prawidłowo?
- Która wtyczka lub rozszerzenie przeglądarki może powodować konflikt?
Nawet nietechniczni użytkownicy mogą na nią spojrzeć, aby znaleźć wskazówki dotyczące źródła problemu.
Na przykład, jeśli jesteś klientem OptinMonster zastanawiającym się, dlaczego twój optin się nie ładuje, możesz łatwo znaleźć problem „Twój slug strony nie pasuje”.
Narzędzia takie jak Inspect Element Console i SupportAlly pomagają uzyskać lepszą pomoc techniczną dla klientów. Zespół pomocy technicznej uwielbia klientów, którzy podejmują inicjatywę w celu przekazania szczegółowych uwag na temat problemów.
Jak korzystać z narzędzia Inspect na urządzeniach mobilnych (iOS lub Android)?
Opcje deweloperskie nie są domyślnie włączone w przeglądarkach mobilnych, ponieważ producenci zakładają, że większość użytkowników mobilnych nie będzie z nich korzystać.
Najłatwiejszym sposobem rozwiązywania problemów i korzystania z narzędzia inspect w przypadku problemów mobilnych. Jest użycie funkcji emulacji mobilnej w twojej przeglądarce.
Następnie można wybrać urządzenie z góry lub wymiary ekranu. Chrome będzie wtedy emulować ten rozmiar ekranu.
Często zadawane pytania dotyczące elementu Inspect
Poniżej znajdują się niektóre z najczęściej zadawanych przez naszych użytkowników pytań dotyczących korzystania z narzędzia Inspect.
1. Czy mogę używać narzędzia Inspect na dowolnej witrynie internetowej, czy tylko na mojej własnej?
Tak, możesz użyć narzędzia inspect na dowolnej witrynie internetowej. Wystarczy kliknąć prawym przyciskiem myszy i wybrać narzędzie Inspect z menu przeglądarki, aby zobaczyć kod dowolnej witryny internetowej. Studiowanie kodu na innych witrynach internetowych to szybki sposób na naukę i poprawę twoich umiejętności CSS/HTML.
2. Dlaczego nie mogę znaleźć narzędzia Inspect w przeglądarce?
Google Chrome może ukrywać opcję Inspect w menu prawego przycisku myszy, zwłaszcza gdy wiele rozszerzeń dodaje własne opcje do menu prawego przycisku myszy.
Zawsze możesz jednak otworzyć narzędzie Inspect, klikając menu z trzema kropkami w prawym górnym rogu ekranu przeglądarki i wybierając Więcej narzędzi ” Narzędzia programistyczne. Możesz również użyć klawiszy CTRL + Shift + I (Command + Options + I na Macu) na klawiaturze, aby je otworzyć.
Film instruktażowy
Zasoby bonusowe:
To ekscytujące móc wprowadzać zmiany w twojej witrynie internetowej jako początkujący DIY WordPress.
Przez lata widzieliśmy niezliczoną liczbę początkujących z zerowym doświadczeniem w tworzeniu witryn internetowych, którzy stali się profesjonalistami w tej dziedzinie.
Jeśli chcesz dowiedzieć się więcej o tym, jak możesz wykorzystać narzędzie Inspect, aby zrobić więcej rzeczy na swojej stronie WordPress, poniższe zasoby będą dobrym punktem wyjścia:
- Jak dostosować motyw WordPress – Ten przewodnik dla początkujących pokazuje, jak krok po kroku dostosować twój motyw WordPress.
- Jak poprawnie dodać własny CSS w WordPress – Ten poradnik pokazuje wiele sposobów na łatwe dodanie własnego CSS w WordPress.
- Jak zoptymalizować dostarczanie CSS w WordPress – Zbyt wiele pojedynczych plików CSS może obniżyć wydajność. Ten poradnik pokazuje, jak zoptymalizować dostarczanie CSS, aby zwiększyć szybkość WordPressa.
- Domyślna ściągawka CSS generowana przez WordPress – Ten przydatny przewodnik pokaże ci wiele klas CSS, które WordPress domyślnie dodaje do różnych elementów. Następnie możesz użyć tych klas CSS w swoim własnym kodzie CSS, aby zmienić wygląd tych elementów.
Mamy nadzieję, że ten artykuł pomógł ci poznać podstawy elementu Inspect i sposób korzystania z niego w witrynie WordPress. Możesz również zapoznać się z naszą domyślnie generowaną przez WordPress ściągawką CSS, aby przyspieszyć swoje umiejętności tworzenia motywów lub z naszym najlepszym zestawem narzędzi WordPress dla profesjonalistów.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dennis Muthomi
The mobile emulation feature is the best tool, just the other day, I was trying to figure out why my site wasn’t displaying well on iPhones. The emulation feature allowed me to quickly diagnose that an element wasn’t scaling down correctly.
Being able to visually debug responsive issues across various devices without needing to test on physical devices saves so much time.
Mrteesurez
This is helpful, I don’t know one can actually edit the code and see changes in real time.
My question:
1) Can I use the inspection tool to see the PHP or anynbackend code ??
2) Is there anyway I can use the inspection tool on mobile ??
WPBeginner Support
You would not use the inspection tool to see PHP it is normally used to check HTML, CSS, and JavaScript. For mobile it is not available by default but there are apps to add the ability to mobile.
Administrator
Jiří Vaněk
Thanks for this guide. Now is much more easier for me to find CSS class in code for making any changes. The CSS code can make AI for me, becouse Im not good at coding, and rest Im able to find in isnpect tools. That is all what I need.
hossam ismail
hey!
I can’t change my heading font size in mobile version.
For example,
Heading font size in desktop is 24px
but it is also 24px in mobile ??
this issue especially with heading, how can i fix this?
WPBeginner Support
If you reach out to your theme’s support they should be able to let you know how they have set up the mobile CSS
Administrator
Esmeraldo Lleshi
How can I make the html that i edited to stay permanently?
WPBeginner Support
It would depend on what was edited, if is CSS then you would add the CSS under Appeaance>Customize>Additional CSS. If it is more of an HTML change then you would want to check with your theme’s support as WordPress themes are built with templates, for a bit more on that you would want to take a look at our glossary page here: https://www.wpbeginner.com/glossary/template/
Administrator
Milan
Once I make changes, how I can save update/edited page? Whenever I close it it revert to previous version.
WPBeginner Support
Inspect element is for testing the changes, if you’re editing the CSS you would want to copy the CSS you added and paste it under Appearance>Custmize>Additional CSS
Administrator
Kristina
My dilemma is that once I inspect an element, I’d like to know what PAGE in my theme this element appears on. So there’s an e lement that appears as part of my theme, throughout my site, and when I inspect element, i can see the code, but can’t determine what portion of the theme has it, so that I can change it in the child theme, permanently. I tried editing one page, directly from the inspect element pane, but as soon as I exited and returned, my change was gone and it was „back to normal.”
Anyway to inspect to element and determine where I can find it in my theme files?
Thank you.
WPBeginner Support
Hi Kristina,
You can try to guessing the template file based on where the code appears in the page layout. For example, if it is in header section then you may look for it in the header.php file. You can also download all your theme files via FTP and then use a tool that allows you to search for text in multiple files at once. One such app is Notepad++ (for Windows), open the app and the go to Search > Search in Files.
Administrator
stephanie
This is such great content, thanks a lot for sharing.
Little problem for me, nothing happens when i click 'inspect element’ in my chrome browser. Any help or suggestions?
WPBeginner Support
Hi Stephanie,
If you are using any browser extensions, then uninstall all of them. If the problem persists, then try reinstalling Google Chrome.
Administrator
avinash
Sir,
Actually i am new in wordpress can you tell where from i can edit the Html elememt and where i
can found the element.style in wordpress theme.
Isaac Anim
This is a very great post you have here. But I need to draw your attention to something.
I don’t know if you have noticed but this particular article has being stolen. It looks like the culprit only goes around the web stealing content. As I write this comment, he has copied about 5 of my articles.
The website is even not in Google Search. I was just checking how my website looks in Yandex search results and I happen to find this thief.
Here is the link to the stolen article
WPBeginner Support
Thanks for notifying us, we will take the appropriate action.
Administrator
Ethan
I am curious, why isn’t your website mobile friendly?
Saviour Sanders
I’ve been wondering about the same thing.
Sila Mahamud
Customizing WordPress for DIY Users and you have also highlighted What is Inspect Element or Developer Tools? You also given us the video tutorial the basic of inspect elements. To be honest that is great content wherever you share with us. Thanks a lot for sharing this content with us.
WPBeginner Support
Glad you found it helpful. Don’t forget to follow us on Facebook for more WordPress tutorials.
Administrator