Jak sprawdzić element w przeglądarkach Chrome, Safari i Firefox?

Opublikowany: 2024-08-09

Czy zastanawiałeś się kiedyś, co sprawia, że ​​strony internetowe wyglądają tak oszałamiająco, mając wiele funkcji i funkcjonalności? Jak połączyć wszystkie kody, aby stworzyć atrakcyjną i oszałamiającą witrynę internetową?

Wszystkie sekrety można łatwo odkryć, po prostu sprawdzając elementy witryny za pomocą narzędzia Inspekcja w przeglądarce.

Za pomocą tego wbudowanego narzędzia w łatwy sposób oderwiesz warstwę strony i zobaczysz jak kody są powiązane z każdym elementem, tworząc w pełni funkcjonalną stronę internetową. Dzięki temu dowiesz się, jak wszystko działa w interfejsie użytkownika, a także zainspirujesz do odtworzenia ich w swoich projektach.

W tym poście pokażemy jak sprawdzić elementy strony internetowej w popularnych przeglądarkach oraz przedstawimy krótkie metody bezpośredniego ich wykorzystania.


Spis treści
Co to jest element kontrolny?
Jak sprawdzić elementy witryny w dowolnej przeglądarce?
Rzeczy, które możesz zrobić za pomocą narzędzi deweloperskich Inspect Website Elements
Wniosek

Co to jest element kontrolny?

Inspect Elements, znane również jako Narzędzia programistyczne lub DevTools, to zestaw wbudowanych narzędzi dostarczanych przez nowoczesne przeglądarki internetowe, za pomocą których każdy może sprawdzać, wchodzić w interakcję i edytować kod HTML, CSS i JavaScript strony internetowej.

To konkretne narzędzie jest niezbędne do tworzenia i debugowania stron internetowych i oferuje szeroki zakres funkcji, takich jak:

  • Kontrola HTML i DOM : przeglądaj i edytuj strukturę HTML oraz obiektowy model dokumentu (DOM) strony.
  • Kontrola i edycja CSS : możesz przeglądać style zastosowane do elementów, eksperymentować ze zmianami i obserwować efekty w czasie rzeczywistym.
  • Konsola JavaScript : wykonuj kod JavaScript, debuguj skrypty i przeglądaj komunikaty o błędach.
  • Monitorowanie sieci : Śledź żądania sieciowe, przeglądaj nagłówki, ładunki i czasy odpowiedzi.
  • Analiza wydajności : analizuj wydajność strony, identyfikuj wąskie gardła i optymalizuj czas ładowania.
  • Tryb projektowania responsywnego : sprawdź, jak strona wygląda i zachowuje się na różnych urządzeniach i rozmiarach ekranów.
  • Karta aplikacji : sprawdź pliki cookie, pamięć lokalną i pamięć sesji.
  • Źródła : przeglądaj i debuguj pliki źródłowe, ustawiaj punkty przerwania i przeglądaj kod krok po kroku.

Jak sprawdzić elementy witryny w dowolnej przeglądarce?

Możesz łatwo sprawdzić elementy witryny internetowej w dowolnej przeglądarce, po prostu korzystając ze skrótów Sprawdź elementy.

1. Sprawdź skróty Elements w przeglądarce Google Chrome

Dostęp do elementów witryny można uzyskać uruchamiając narzędzia programistyczne lub narzędzia Inspect Elements, po prostu naciskając kombinację klawiszy Ctrl+Shift+I na klawiaturze.

Jednak innym skrótem i prostą metodą, którą możesz wypróbować, jest po prostu kliknięcie prawym przyciskiem myszy pustego obszaru witryny lub dowolnego elementu i wybranie „Sprawdź”. Następnie możesz użyć zakładki „Elementy”, aby wyświetlić całą strukturę witryny lub skorzystać z zakładki „Konsola”, aby wyświetlić wszelkiego rodzaju ostrzeżenia lub błędy.

Jednak trzecią, ale długą drogą uzyskania dostępu do narzędzi programistycznych jest kliknięcie trzech pionowych kropek lub menu hamburgera (ikona z trzema nałożonymi na siebie kropkami) znajdującego się w prawym górnym rogu przeglądarki Chrome, a następnie kliknięcie Więcej narzędzi, a następnie wybranie Narzędzia deweloperskie .

Accessing Developer Tools in Chrome
Dostęp do narzędzi programistycznych w przeglądarce Chrome

2. Sprawdź skróty Elements w przeglądarce Firefox

Jeśli jesteś użytkownikiem przeglądarki Firefox, możesz wypróbować kombinację klawiszy skrótu Ctrl+Shift+C, aby wykorzystać narzędzia programistyczne do insektowania elementów witryny. Możesz też kliknąć prawym przyciskiem myszy pusty obszar witryny lub dowolny element i wybrać „Sprawdź”.

3. Sprawdź skróty Elements w przeglądarce Opera

Użytkownicy Opery mogą nacisnąć Ctrl+Shift+I na klawiaturze, aby uzyskać bezpośredni dostęp do narzędzi programistycznych umożliwiających sprawdzanie elementów witryny. Podobnie, podobnie jak inne przeglądarki, możesz także bezpośrednio kliknąć prawym przyciskiem myszy pusty obszar witryny lub dowolny element i wybrać „Sprawdź”.

4. Sprawdź skróty Elements w przeglądarce Edge

W przypadku, gdy Edge jest domyślną przeglądarką, której używasz; możesz nacisnąć klawisz F12 na klawiaturze, aby otworzyć narzędzia programistyczne. Lub po prostu kliknij prawym przyciskiem myszy pusty obszar witryny lub dowolny element i wybierz „Sprawdź”.

5. Sprawdź elementy w przeglądarce Safari

Przeglądarka Safari nie oferuje żadnej skrótowej metody sprawdzania elementów witryny internetowej, ale należy wykonać czynności podane poniżej:

Aby korzystać z funkcji Inspect Element w przeglądarce Safari, musisz najpierw włączyć narzędzia programistyczne. Oto jak:

  • Kliknij „Safari” w górnym menu i wybierz „Ustawienia”.
Safari Settings
Ustawienia Safari
  • Przejdź do zakładki „Zaawansowane” i zaznacz pole „Pokaż menu Programowanie na pasku menu”.
Enabling Web Developers features in Safari
Włączanie funkcji dla programistów internetowych w przeglądarce Safari
  • Zamknij okno Preferencje.

Teraz możesz kliknąć prawym przyciskiem myszy w dowolnym miejscu strony internetowej i wybrać opcję „Sprawdź element”, aby otworzyć panel Elementy.

Inspect Element in Safari Browser
Sprawdź element w przeglądarce Safari

Okienko natychmiast otworzy się na dole okna, co może nie wyglądać świetnie, a także powodować trudności w przeglądaniu kodów.

Dla Twojej wygody przesuń go na bok klikając na ikonę w lewym górnym rogu panelu (obok „X”) i wybierz „Zadokuj po prawej stronie okna” lub „Zadokuj po lewej stronie okna” .” ( Dotyczy wszystkich przeglądarek)

Jeśli chcesz, możesz nawet oddzielić szybę od okna. Aby zmienić rozmiar panelu, przesuń kursor do krawędzi panelu, aż zmieni się w podwójną strzałkę, a następnie kliknij i przeciągnij, aby zmienić rozmiar.

Być może zastanawiasz się teraz, co zrobić po otwarciu panelu lub jakie główne elementy możesz sprawdzić na temat serwisu.

W tym celu zapoznaj się z poniższymi sekcjami.


WPOven
WPOven

Rzeczy, które możesz zrobić za pomocą narzędzi deweloperskich Inspect Website Elements

Teraz, gdy pomyślnie uzyskałeś dostęp do narzędzia Elementy i otworzyłeś panel, zobaczysz wiele dostępnych wbudowanych narzędzi, które pomogą Ci łatwo korzystać ze strony internetowej, dostosowywać ją i edytować zgodnie z własnymi wymaganiami.

Dla Twojej wygody użyjemy przeglądarki Chrome w celach demonstracyjnych, ale wszystkie funkcje, ustawienia, opcje i instrukcje będą takie same we wszystkich przeglądarkach.

1. Znajdź cokolwiek w witrynie za pomocą narzędzia Sprawdź wyszukiwanie elementów

Wyszukiwanie czegokolwiek w całym kodzie źródłowym, który jest złożony i czasami ogromny, może być przytłaczające. Z tego powodu DevTools ma wbudowane narzędzie wyszukiwania.

Aby z niego skorzystać, otwórz domyślny panel Elementy i naciśnij Ctrl + F lub Command + F, aby przeszukać kod źródłowy. Karta Wyszukiwanie zostanie natychmiast wyświetlona na dole panelu DevTools.

 Inspect Element Search to find anything on a site
Sprawdź wyszukiwanie elementów, aby znaleźć cokolwiek w witrynie

W polu wyszukiwania możesz wyszukiwać wszystko, niezależnie od tego, czy chodzi o pliki CSS, JavaScript, czy określone elementy w kodzie źródłowym.

Na przykład, jeśli wpiszesz „meta nazwa” w polu wyszukiwania i naciśniesz Enter, wyszuka i wyświetli wszystkie wystąpienia „meta nazwy” w kodzie. Pomaga to sprawdzić meta strony internetowej, słowa kluczowe SEO i stan indeksowania.

Inspect Element Search to find meta name on a site
Sprawdź wyszukiwanie elementów, aby znaleźć metanazwę w witrynie

Podobnie, jeśli jesteś projektantem stron internetowych, możesz wyszukiwać kolory, wprowadzając kod szesnastkowy koloru, np. #98fb98db, w polu wyszukiwania i naciskając klawisz Enter. Spowoduje to wyświetlenie każdego wystąpienia tego koloru w plikach CSS i HTML witryny.

Inspect Element Search to find color code on a site
Sprawdź wyszukiwanie elementów, aby znaleźć kod koloru w witrynie

Komunikacja i poprawki:

  • Narzędzie wyszukiwania pomaga komunikować się z programistami, pokazując dokładnie, gdzie są błędy i co wymaga zmiany.
  • Podaj programistom numer linii z problemem, aby uzyskać szybsze poprawki.
  • Możesz także samodzielnie zmienić stronę internetową, korzystając z Elements, podstawowej części Narzędzi programistycznych przeglądarki Chrome.

2. Wybierz i sprawdź poszczególne/konkretne elementy strony internetowej

Możesz także wyświetlić kod HTML konkretnego elementu strony, klikając bezpośrednio ikonę kursora w lewym górnym rogu panelu.

Inspect individual/specific elements of the webpage
Sprawdź poszczególne/konkretne elementy strony internetowej

Teraz możesz kliknąć dowolny element strony, aby wyświetlić jego kod źródłowy w panelu inspekcji.


3. Edytuj lub modyfikuj wszystko za pomocą elementów

Jeśli lubisz eksperymentować i bawić się projektowaniem stron internetowych i lubisz wprowadzać w życie natychmiastowe pomysły, narzędzie Sprawdź element może Ci w tym pomóc.

Za pomocą tego narzędzia możesz dokonać tymczasowych zmian w wyglądzie serwisu, modyfikując lub edytując pliki CSS i HTML oraz obserwując rezultaty w czasie rzeczywistym.

Zmiany nie są jednak trwałe. Po ponownym załadowaniu strony zmiany znikną. W ten sposób możesz eksperymentować ile chcesz, bez ingerencji w kod źródłowy strony internetowej.

Jeśli w pewnym momencie zmiany uznasz za atrakcyjne, możesz je po prostu skopiować i zapisać w innym miejscu do późniejszego wykorzystania.

Zobaczmy kilka przykładów w celach informacyjnych.

Ale wcześniej przygotujmy i posprzątajmy nasz plac zabaw. W tym celu kliknij zakładkę Elementy w panelu Narzędzia programistyczne. Aby uzyskać więcej miejsca, naciśnij klawisz Esc , aby zamknąć pole wyszukiwania.

Teraz jesteś gotowy z pełnym kodem źródłowym na ekranie.

  • W lewym górnym rogu panelu Deweloper kliknij ikonę myszy na górze kwadratu.
  • Wybierz dowolny element na stronie, aby go zmienić.

Zmiana tekstu na stronie internetowej:

  • Kliknij kursor myszy/ikonę kwadratu.
  • Kliknij dowolny tekst na stronie.
  • W panelu Narzędzia programistyczne kliknij dwukrotnie podświetlony tekst, aby umożliwić jego edycję.
Changing Text on a Webpage using Inspect Website Elements tools
Zmiana tekstu na stronie internetowej za pomocą narzędzi Inspekcja elementów witryny
  • Wpisz nowy tekst, na przykład „Najszybszy” zamiast „Premium”, jak pokazano na poniższym obrazku, i naciśnij Enter .
  • Zmiana tekstu jest tymczasowa i zostanie przywrócona po odświeżeniu strony.
Changed Text on a Webpage using Inspect Website Elements tools
Zmieniono tekst na stronie internetowej za pomocą narzędzi Inspekcja elementów witryny

Edytowanie elementów:

  • Zamknij panel Deweloper, zaznacz dowolną część strony internetowej, kliknij prawym przyciskiem myszy i wybierz Sprawdź .
  • Panel Narzędzia programistyczne podświetli wybrane zdanie.

Zmiana koloru i rozmiaru czcionki Elementów:

  • W panelu Narzędzia programistyczne przejdź do karty Style .
  • Kliknij pole „rozmiar czcionki” i zmień wartość na 22 piksele.
Changed Text font size on a Webpage using Inspect Website Elements tools
Zmieniono rozmiar czcionki tekstu na stronie internetowej za pomocą narzędzi Inspekcja elementów witryny
  • Przewiń do „kolor” i zmień go na #ff0000.
Changed Text font color on a Webpage using Inspect Website Elements tools
Zmieniono kolor czcionki tekstu na stronie internetowej za pomocą narzędzi Inspekcja elementów witryny
  • Dostosuj „rodzinę czcionek” do „Arial”.
Changed Text font family on a Webpage using Inspect Website Elements tools
Zmieniono rodzinę czcionek tekstowych na stronie internetowej za pomocą narzędzi Inspekcja elementów witryny

Teraz czcionki wyglądały tak przed zmianami, które wprowadziliśmy:

Before the fonts changed as seen in Inspect Dev tools pane
Przed zmianą czcionek, jak widać w panelu narzędzi Inspect Dev

Po zmianach wygląda to tak:

After the changes made in fonts using Dev tools
Po zmianach dokonanych w czcionkach za pomocą narzędzi deweloperskich

Zmiana stanów elementów:

Jeśli chcesz, aby Twoja witryna była bardziej atrakcyjna wizualnie dla odwiedzających, gdy najeżdżają kursorem lub wchodzą w interakcję z przyciskami lub łączami, możesz skorzystać z opcji Stany elementów.

  • Kliknij kursor myszy/ikonę pola i wybierz element.
  • W panelu Narzędzia programistyczne kliknij kod prawym przyciskiem myszy, najedź kursorem na Stan wymuszenia i kliknij :aktywny:
  • Powtórz i kliknij :hover:
Changing Element States
Zmiana stanów elementów
  • Zmień wartość „koloru tła” na #003b59, aby zobaczyć nowy kolor najechania.
Change the "background-color
Zmień „kolor tła”

Zmiana obrazów tła:

  • Po prostu skopiuj link z adresem obrazu, tj. (gdzie obraz był hostowany. )
Change the "background-color" value for the new hover color.
Zmień wartość „koloru tła” dla nowego koloru dymku.
  • Otwórz element Inspekcja na przycisku „Wspieraj swoją automatyzację za pomocą sztucznej inteligencji”.
  • Znajdź kod „background-color” i zamień kolor na url(„image-link”) .

Eksperymentuj z większą liczbą zmian:

  • Możesz zmieniać tekst, zamieniać obrazy oraz zmieniać kolory i style.
  • Wypróbuj różne zmiany, aby zobaczyć, jak może wyglądać Twoja witryna.

4. Przetestuj Stronę na dowolnym ekranie i urządzeniu

Obecnie nawet Google zdecydowanie zaleca, aby strony internetowe były responsywne i łatwo dostępne na każdym urządzeniu i rozmiarze ekranu. Większość użytkowników Internetu woli przeglądać strony internetowe na smartfonach niż na laptopach i komputerach stacjonarnych.

Dlatego też administratorzy stron internetowych musieli zadbać o to, aby podczas ich tworzenia witryny były responsywne i przyjazne dla urządzeń mobilnych.

Jednakże sprawdzenie witryny internetowej na każdym typie urządzenia i rozmiarze ekranu jednocześnie może nie być możliwe dla żadnego twórcy lub projektanta stron internetowych. Aby rozwiązać ten problem, narzędzie Emulacja pozwala zobaczyć i sprawdzić, jak Twoja witryna może wyglądać dla różnych użytkowników korzystających z różnych urządzeń.

Nie oznacza to, że powinieneś pominąć faktyczne testowanie na różnych urządzeniach, ale może ci to dać dobry pomysł.

Oto jak możesz wykonać:

  • W panelu Narzędzia programistyczne kliknij małą ikonę telefonu w lewym górnym rogu.
  • Strona zmieni się w widok przypominający telefon z menu u góry umożliwiającym zmianę rozmiaru.
  • Zmień rozmiar małej przeglądarki, aby zobaczyć, jak strona wygląda na różnych urządzeniach, takich jak tablet, telefon lub mniejszy ekran.
Using Inspect Elements to test the Website on any screen size or Device
Używanie Inspect Elements do testowania Strony internetowej na dowolnym ekranie i urządzeniu o dowolnym rozmiarze
  • Kliknij menu u góry, aby wybrać domyślne rozmiary urządzeń, takich jak Surface Duo lub iPhone 12 Pro.
  • Strona dostosuje się do rozmiaru wybranego urządzenia. Aby powiększyć, użyj menu procentowego obok wymiarów.
  • Wybierz „Responsywny” w ustawieniach urządzenia, aby dostosować widok, przeciągając prawą krawędź strony internetowej.
  • Przełączaj się między widokami pionowymi i poziomymi, klikając ikonę obrotu na końcu górnego menu.
  • Przeglądaj różne urządzenia, aby zobaczyć, jak zmienia się rozdzielczość strony internetowej i ekranu.
  • Wszystkie inne narzędzia programistyczne będą również reagować na widok urządzenia.

5. Przetestuj wydajność strony internetowej w emulowanych sieciach komórkowych

Oprócz wszystkich testów wizualnych możesz także sprawdzić, jak Twoja witryna radzi sobie w różnych sieciach komórkowych, takich jak 5G, 4G, 3G lub wolniejszych.

Aby to zademonstrować,

  • Kliknij menu hamburgerów w prawym górnym rogu panelu.
  • Najedź kursorem na Więcej narzędzi i wybierz Warunki sieciowe .
Network conditions in Devtools
Warunki sieciowe w narzędziach deweloperskich

Warunki sieciowe:

  • Wybierz dowolne warunki sieciowe, takie jak szybkie 4G, wolne 4G lub offline, aby zobaczyć, jak strona działa bez Internetu.
Network throttling options
Opcje ograniczania sieci
  • Kliknij opcję Dodaj…, aby uwzględnić prędkość testową (np. 56 Kb/s w celu przetestowania połączenia internetowego).
  • Załaduj stronę ponownie, aby zobaczyć, ile czasu zajmuje ładowanie przy wolnym połączeniu i jak wygląda podczas ładowania.
  • Pomoże Ci to zrozumieć znaczenie skrócenia czasu ładowania witryny w przypadku wolnych połączeń.

Zmiana agenta użytkownika:

  • W polu User-agent odznacz opcję Użyj domyślnej przeglądarki .
  • Wybierz inny program użytkownika (np. Firefox, Mac), aby sprawdzić, czy witryna zmienia sposób wyświetlania w innych przeglądarkach.
  • Ta funkcja pozwala zobaczyć, jak działa plik web ładują się strony nawet jeśli twierdzą, że działają tylko w innej przeglądarce.

WPOven Dedicated Hosting

Wniosek

Po zdobyciu tak wielu szczegółowych informacji na temat Narzędzi deweloperskich lub Inspekcji elementów, musiałeś zdać sobie sprawę, że istnieje wiele informacji na temat Twoich ulubionych stron internetowych w domenie publicznej.

Za pomocą kilku kliknięć możesz całkowicie oczyścić dowolną witrynę internetową, ujawniając wszystkie jej sekrety oszałamiających wizualnie funkcji i funkcjonalności, bez konieczności sprawdzania oryginalnych plików.

Teraz możesz analizować i przeglądać używane style CSS, logikę stojącą za złożoną funkcjonalnością, sposób optymalizacji wyszukiwarek na poziomie kodu i wiele więcej.