Jak prawidłowo sprawdzić witrynę internetową

Niezależnie od tego, czy jesteś programistą testującym nowe funkcje w projekcie, czy projektantem, który chce przyjrzeć się bliżej kodowi HTML i CSS, istnieje wiele powodów, dla których warto sprawdzić witrynę i jej elementy. Jednak wiedza, od czego zacząć, może wydawać się myląca (na początku).

Na szczęście możesz użyć różnych prostych narzędzi, technik i sztuczek, aby prawidłowo sprawdzić elementy sieci. Ponadto dostępne są opcje dla prawie każdej przeglądarki i systemu operacyjnego (OS).

W tym poście omówimy, dlaczego warto sprawdzić witrynę internetową. Następnie przeprowadzimy Cię przez niektóre z najlepszych narzędzi, których możesz użyć, zanim wyjaśnimy, czego szukać. Wskakujmy!

Dlaczego warto sprawdzić witrynę internetową

Istnieje kilka powodów, dla których warto sprawdzić witrynę internetową. Na przykład może być konieczne rozwiązanie problemu lub znalezienie określonej informacji.

Inspekcja elementów internetowych w przeglądarce pozwala programistom WordPress, projektantom i marketerom cyfrowym manipulować wyglądem strony internetowej i testować zmiany. Deweloperzy lub testerzy częściej używają tej funkcji do debugowania określonego elementu, przeprowadzania testów układu lub przeprowadzania edycji CSS na żywo.

Sprawdzanie elementów internetowych jest również pomocne dla projektantów stron internetowych. Jeśli chcesz szybko przetestować zmianę koloru lub nową czcionkę, możesz to zrobić bez zagłębiania się w kod CSS.

Ponadto marketerzy cyfrowi mogą skorzystać z narzędzia Inspect Element, aby zobaczyć, jak pewne zmiany wpłyną na ogólny wygląd strony internetowej. Możesz na przykład wypróbować nowy przycisk wezwania do działania (CTA) lub inny schemat kolorów. Możesz użyć narzędzi do replikacji aktualizacji bez wprowadzania jakichkolwiek zmian w działającej witrynie.

Wreszcie, inspekcja strony internetowej może być doskonałym sposobem na poznanie sposobu jej budowy i funkcjonowania. Jeśli chcesz dowiedzieć się więcej o tworzeniu stron internetowych, sprawdzanie witryn to doskonały sposób na rozpoczęcie pracy.

Najlepsze narzędzia i rozszerzenia do sprawdzania witryny

Istnieje wiele różnych narzędzi i rozszerzeń, których można użyć do sprawdzenia witryny. Oto niektóre z najpopularniejszych opcji!

Sprawdź element

Narzędzie Inspect Element Tool jest najczęstszą opcją. Pozwala dokładnie przyjrzeć się kodowi HTML i CSS, z którego składa się strona internetowa. Możesz także użyć go do edycji CSS na żywo i zobaczyć, jak będą wyglądać twoje zmiany bez wprowadzania żadnych trwałych zmian.

Chociaż jest dostępne jako rozszerzenie Google Chrome, narzędzie Inspect Element jest również dostarczane ze wszystkimi głównymi przeglądarkami. Ta funkcja jest częścią Chrome Developer Tools, zestawu programów, które umożliwiają sprawdzanie i edytowanie kodu HTML i CSS strony internetowej.

Aby uzyskać dostęp do Narzędzi Google Chrome dla programistów, wystarczy nacisnąć Ctrl+Shift+I (lub Cmd+Opt+I na komputerze Mac). Możesz także uzyskać dostęp do narzędzi, otwierając menu Chrome i wybierając Więcej narzędzi > Narzędzia dla programistów :

Możesz uzyskać dostęp do tych samych narzędzi programistycznych w innych przeglądarkach. Na przykład Firefox Developer Tools ma podobne funkcje. Aby uzyskać dostęp do narzędzi, wystarczy nacisnąć Ctrl+Shift+I (lub Cmd+Opt+I na komputerze Mac). Możesz także znaleźć narzędzia, otwierając menu Firefox i wybierając Web Developer > Inspektor.

Ponadto Safari Developer Tools umożliwia przeglądanie i edytowanie kodu HTML i CSS strony internetowej na urządzeniach Mac. Po prostu naciśnij Cmd+Opt+I . Możesz także otworzyć menu Safari i wybrać Preferencje > Zaawansowane > Pokaż menu Develop na pasku menu .

Stos przeglądarki

Kolejną platformą, której możesz użyć do testowania stron internetowych, jest BrowserStack:

Ta oparta na chmurze platforma testowa działa ze wszystkimi głównymi przeglądarkami i urządzeniami. Po zarejestrowaniu się w celu uzyskania bezpłatnej wersji próbnej możesz przejść do pulpitu nawigacyjnego Live i wybrać swój system operacyjny.

Następnie możesz wybrać preferowaną wersję przeglądarki, aby uruchomić sesję na żywo w przeglądarce. Na koniec możesz poruszać się po witrynie, którą chcesz sprawdzić, tak jak w przypadku Inspect Element.

Jak sprawdzić witrynę internetową

Przyjrzyjmy się, jak sprawdzić witrynę za pomocą narzędzia Inspect Element. Zacznij od kliknięcia prawym przyciskiem myszy dowolnego elementu strony internetowej i wybrania opcji Sprawdź z menu kontekstowego:

Spowoduje to otwarcie narzędzia Inspect Element w przeglądarce. Gdy narzędzie jest otwarte, możesz zacząć manipulować kodem HTML i CSS, aby zobaczyć, jak wpłynie to na wygląd strony internetowej.

Na przykład możesz zmienić kolor elementu, dodać lub usunąć klasę, a nawet zmienić położenie elementu. Możesz także użyć pola wyszukiwania u góry, aby wyszukać fragment tekstu lub obraz.

Oczywiście wszelkie zmiany wprowadzone za pomocą Inspect Element są tylko tymczasowe. Nie zostaną one zapisane po odświeżeniu strony lub zamknięciu przeglądarki. Jest to jednak świetny sposób na wypróbowanie, jak konkretne zmiany będą wyglądać bez trwałej zmiany witryny.

Dostęp do narzędzia można również uzyskać, naciskając klawisze Ctrl+Shift+I (lub Cmd+Opt+I na komputerze Mac), aby otworzyć narzędzia programistyczne . Następnie kliknij zakładkę Elementy u góry okna:

Wreszcie, możesz również uzyskać dostęp do Inspect Element, otwierając menu Chrome i wybierając Więcej narzędzi > Narzędzia dla programistów , które omówiliśmy wcześniej.

Jak zmienić element

Jeśli chcesz zmienić element na stronie internetowej, kliknij go prawym przyciskiem myszy i wybierz Sprawdź . W otwartym panelu Elementy znajdź część, którą chcesz zmienić, i kliknij ją dwukrotnie.

Po otwarciu okna Elementy możesz użyć ikony kursora Inspekcji w lewym górnym rogu panelu, aby podświetlić kod źródłowy elementu, który chcesz zmodyfikować. Po kliknięciu prawym przyciskiem myszy podświetlonego kodu wybierz opcję Edytuj jako HTML :

Pole się rozwinie, a następnie możesz zmienić tekst. Aby wyświetlić podgląd zmian, możesz odznaczyć element. Możesz także dwukrotnie kliknąć tekst, aby go edytować.

Tej techniki można również użyć do zmiany kodu CSS elementu. Aby to zrobić, kliknij go prawym przyciskiem myszy i wybierz Sprawdź . W panelu elementów znajdź element, który chcesz zmienić, i wybierz właściwość element.style . Następnie możesz dodać swój kod lub deklaracje w nawiasach klamrowych.

Jak ukryć lub usunąć element

Możesz także chcieć ukryć lub usunąć element na stronie internetowej. Po znalezieniu elementu, który chcesz ukryć lub usunąć, kliknij go prawym przyciskiem myszy i wybierz Sprawdź , aby uruchomić narzędzie Sprawdź element.

Stąd kliknij element prawym przyciskiem myszy, a następnie wybierz opcję Usuń element lub Ukryj element :

Przycisk Usuń usuwa element Document Object Model (DOM). Przycisk Ukryj po prostu ukryje element, ale nadal będzie w DOM.

Jak sprawdzić klasy CSS

Istnieje kilka sposobów sprawdzania klas CSS. Jednak najłatwiejszą metodą jest kliknięcie prawym przyciskiem myszy elementu, który chcesz przejrzeć, i wybranie opcji Sprawdź . Następnie otwórz kartę Style , aby zobaczyć style CSS:

Zwróć uwagę, że ta karta pokazuje tylko zastosowane style wbudowane, a nie te, które pochodzą z arkusza stylów.

Jeśli chcesz zobaczyć wszystkie style CSS zastosowane do elementu, możesz użyć karty Obliczone . Pokazuje wszystkie style CSS zastosowane do elementu, w tym te z arkusza stylów:

Po zakończeniu sprawdzania strony internetowej po prostu zamknij narzędzie Sprawdź element. Twoje zmiany nie zostaną zapisane, więc nie musisz się martwić, że coś przypadkowo zepsujesz.

Na co zwrócić uwagę podczas sprawdzania witryny internetowej

Bez względu na to, jakiej metody użyjesz, aby uzyskać dostęp do Inspect Element, zobaczysz ten sam interfejs. Składa się z dwóch paneli: panelu HTML i panelu CSS.

Panel HTML pokazuje strukturę strony internetowej. Możesz zobaczyć, jak różne elementy są zagnieżdżone i powiązane.

Okienko CSS pokazuje style zastosowane do wybranego elementu. Możesz także edytować reguły CSS, aby zobaczyć, jak zmiany wpłyną na wygląd elementu.

Jeśli szukasz czegoś konkretnego na stronie internetowej, czy to określonego fragmentu tekstu, czy obrazu, możesz użyć Inspect Element, aby to znaleźć. Posiada pole wyszukiwania, w którym można wyszukać określony element.

Podczas sprawdzania witryny należy pamiętać o kilku rzeczach:

• HTML: Kod definiujący strukturę strony internetowej. Zwróć uwagę na sposób, w jaki elementy są zorganizowane i jak wchodzą ze sobą w interakcje.
• CSS: kod określający styl strony internetowej.
• JavaScript : kod określający zachowanie strony internetowej. Wpływa na sposób interakcji elementów i sposób, w jaki strona reaguje na dane wprowadzane przez użytkownika.
• Projekt : Ogólny wygląd i sposób działania witryny. Wpływa na to, jak przyjazny dla użytkownika jest układ i jak dobrze pasuje do celu serwisu.
• Treść: tekst witryny, obrazy i inne media.

To, na co powinieneś zwrócić uwagę podczas sprawdzania witryny, będzie zależeć głównie od tego, czy jesteś projektantem, programistą czy sprzedawcą cyfrowym. Jak omówiliśmy wcześniej, narzędzie Inspect Element może pomóc we wszystkim, od testowania projektu po rozwiązywanie problemów.

Wniosek

Inspect Element to cenna funkcja dla projektantów i programistów. Możesz go używać do przeglądania i edytowania kodu HTML i CSS strony internetowej. To narzędzie może być pomocne, gdy chcesz wprowadzić zmiany na stronie internetowej, nad którą pracujesz, lub zobaczyć, jak jest zakodowana.

Inspect Element jest dostępny w większości przeglądarek internetowych. Możesz uzyskać do niego dostęp, klikając prawym przyciskiem myszy stronę internetową i wybierając Sprawdź z menu. Po otwarciu okna Inspekcja zobaczysz kod HTML i CSS strony internetowej i możesz wprowadzić różne zmiany.

Potrzebujesz pomocy w zarządzaniu lub optymalizacji swojej strony internetowej? Dowiedz się, jak WP Engine może pomóc we wszystkim, od hostingu WordPress po zarządzanie witryną i klientem!