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

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.

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 .

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”.

• Przejdź do zakładki „Zaawansowane” i zaznacz pole „Pokaż menu Programowanie na pasku menu”.

• Zamknij okno Preferencje.

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

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.

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.

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.

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.

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.

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ę.

• 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.

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.

• Przewiń do „kolor” i zmień go na #ff0000.

• Dostosuj „rodzinę czcionek” do „Arial”.

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

Po zmianach wygląda to tak:

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:

• Zmień wartość „koloru tła” na #003b59, aby zobaczyć nowy kolor najechania.

Zmiana obrazów tła:

• Po prostu skopiuj link z adresem obrazu, tj. (gdzie obraz był hostowany. )

• 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.

• 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 .

Warunki sieciowe:

• Wybierz dowolne warunki sieciowe, takie jak szybkie 4G, wolne 4G lub offline, aby zobaczyć, jak strona działa bez Internetu.

• 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.

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.

Rahul

Rahul Kumar jest entuzjastą sieci i specjalistą ds. strategii treści, specjalizującym się w WordPressie i hostingu. Dzięki wieloletniemu doświadczeniu i chęci bycia na bieżąco z trendami branżowymi tworzy skuteczne strategie online, które generują ruch, zwiększają zaangażowanie i zwiększają konwersję. Dbałość Rahula o szczegóły i umiejętność tworzenia atrakcyjnych treści czyni go cennym nabytkiem dla każdej marki chcącej poprawić swoją obecność w Internecie.