...
✅ Nowości, motywy, wtyczki WEB i WordPress. Tutaj dzielimy się wskazówkami i najlepszymi rozwiązaniami dla stron internetowych.

Jak sprawdzić elementy witryny w przeglądarce?

9

Jeśli kiedykolwiek byłeś ciekaw, jak wyglądałaby Twoja strona z różnymi stylami, ale bez konieczności wprowadzania jakichkolwiek zmian, z przyjemnością usłyszysz, że jest na to sposób. W rzeczywistości Twoja przeglądarka jest wyposażona w przydatne narzędzie, które pozwoli Ci sprawdzić elementy witryny. W ten sposób będziesz mógł zobaczyć różne sposoby, w jakie mogą wyglądać Twoje treści.

W poniższym tekście przedstawimy Ci wszystkie niezbędne informacje o tym, jak sprawdzać elementy strony internetowej podczas pracy w WordPressie.

Czym dokładnie jest element kontrolny?

Wszystkie najnowsze przeglądarki internetowe są wyposażone w zestaw zintegrowanych narzędzi, które pokazują kod CSS, JavaScript i HTML dla konkretnej strony. Narzędzie Inspect umożliwia twórcom stron internetowych edycję kodu w przeglądarce internetowej w razie potrzeby. Daje im to możliwość podglądu wszelkich zmian bez faktycznej ingerencji w kod. Innymi słowy, tylko oni mogą zobaczyć te zmiany w swojej przeglądarce.

Ta opcja może być szczególnie korzystna dla tych, którzy chcą wprowadzić zmiany w swojej witrynie WordPress, ale chcieliby najpierw wyświetlić ich podgląd, zanim zaczną obowiązywać. Na przykład, jeśli jesteś właścicielem bloga i chcesz zobaczyć, jak fragment WordPress z Twoich postów będzie wyświetlany w Twojej przeglądarce, możesz to łatwo zrobić za pomocą tego narzędzia.

Jest to przydatne nie tylko dla właścicieli witryn, ale także dla każdego pisarza, marketera, agenta pomocy technicznej i każdego innego, kto interesuje się tym, jak mogą wyglądać treści, nad którymi pracują.

Jak sprawdzić element w Google Chrome

Istnieją dwa sposoby uzyskania dostępu do tego narzędzia. Możesz kliknąć prawym przyciskiem myszy dowolny obszar strony internetowej i wybrać sprawdź, lub kliknąć CTRL + Shift + I na klawiaturze.

Jak sprawdzić elementy witryny w przeglądarce?

Po wykonaniu tego pierwszego kroku Twoja przeglądarka zostanie automatycznie podzielona na dwie części, a kod źródłowy Twojej strony pojawi się w mniejszym oknie. W tym oknie zobaczysz HTML po lewej i CSS po prawej.

Jak sprawdzić elementy witryny w przeglądarce?

Podczas przeciągania myszy nad źródłem HTML zostaną podświetlone różne obszary strony internetowej. Jeśli klikniesz prawym przyciskiem myszy określony element swojej strony internetowej, ten element zostanie podświetlony.

Jak sprawdzić elementy witryny w przeglądarce?

Jak edytować i debugować kod

Za pomocą narzędzia Inspect Element możesz edytować zarówno HTML, jak i CSS. Aby edytować kod HTML, wystarczy dwukrotnie kliknąć dowolny obszar w kodzie źródłowym HTML, a następnie edytować kod.

Jak sprawdzić elementy witryny w przeglądarce?

To samo jest możliwe również w obszarze CSS. Aby dodać nową regułę stylu, po prostu kliknij ikonę + u góry.

Jak sprawdzić elementy witryny w przeglądarce?

Wszystkie wprowadzone przez Ciebie zmiany zostaną natychmiast wyświetlone w Twojej przeglądarce.

Jak sprawdzić elementy witryny w przeglądarce?

Jeszcze raz musimy podkreślić, że żadna z tych zmian nie zostanie zapisana. Możesz sprawdzać dowolne elementy witryny tak długo, jak chcesz, ale jest to tylko narzędzie do debugowania, które nie pozwala na wprowadzenie żadnych rzeczywistych zmian w kodzie. Innymi słowy, wszystkie zmiany znikną po ponownym załadowaniu strony.

Dlatego, jeśli rzeczywiście chcesz wprowadzić zmiany, będziesz musiał uzyskać dostęp do arkusza stylów motywu WordPress i edytować tam kod. Musimy jednak pamiętać, że do tych celów należy utworzyć motyw potomny .

Obszar konsoli do znajdowania błędów

Inną ważną funkcją narzędzia Inspect Element jest obszar konsoli. W tym konkretnym obszarze wyświetlane są wszystkie istniejące błędy w Twojej witrynie. Dlatego jeśli chcesz debugować błąd na swojej stronie, sprawdzenie tego obszaru w celu sprawdzenia błędów może być dla Ciebie cenne.

Jak sprawdzić elementy witryny w przeglądarce?

Nauka sprawdzania elementów witryny jest nie tylko przydatna w Twojej pracy, ale może również zaoszczędzić czas Twojego zespołu pomocy technicznej, jeśli już wiesz, na czym polega Twój problem. Ponieważ to potężne narzędzie ma wiele zalet, zalecamy skorzystanie z niego, postępując zgodnie z naszym przewodnikiem.

Źródło nagrywania: wpklik.com

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów