Co to jest Inspect Element i Developer Tools?
Inspect element (lub Developer Tools) jest jak magiczne narzędzie nowoczesnych przeglądarek. Wystarczy kliknąć prawym przyciskiem myszy na dowolnej stronie, kliknąć inspect i voila! W tym miejscu zobaczysz szczegółowy opis strony zawierający następujące informacje:
- Cały kod HTML, który buduje strukturę strony
- Kody CSS, które stylizują i kształtują strukturę
- Kody JS, które zasilają animacje
- Staty. o tym, jak długo strona się ładuje
- Rozmiary plików wszystkich zasobów
- Porządek ładowania plików
- Strona konsoli, aby zobaczyć problemy lub ukryte wiadomości od złośliwego dewelopera.
Wszystko, co musisz wiedzieć o stronie jest tutaj! A czy chcesz wiedzieć, co jest najlepsze? Nie musisz być maniakiem lub deweloperem (albo jednym i drugim), aby z niej korzystać. To jest dla każdego! Może jesteś projektantem i chcesz wiedzieć, jak Twój projekt wygląda na urządzeniach mobilnych, a może po prostu chcesz zobaczyć inny odcień koloru na swoim nowym nagłówku i zmienić rozmiar tekstu, aby był bardziej widoczny. Co najważniejsze, Twoje zmiany nie mogą powodować żadnych problemów ani niczego zepsuć, ponieważ wszystkie zmiany są stosowane tylko po Twojej stronie.
Jeśli jesteś właścicielem strony internetowej, możesz chcieć dowiedzieć się, jaka jest prędkość Twojej strony, aby sprawdzić, czy Twoi klienci mają jakiekolwiek problemy z dostępem do Twojej strony. A może, jeśli jesteś marketerem, możesz chcieć poznać słowa kluczowe, których używają Twoi konkurenci. Rozumiesz, że element inspect jest kopalnią szczegółów, do których każdy może mieć dostęp! W tym artykule, przedstawię kilka przydatnych wskazówek, jak element inspect może być korzystny dla twojej witryny.
Jak element inspect może być korzystny dla twojej witryny?
Wyobraźmy sobie, że chcesz zmienić jakiś tekst, przetestować obraz lub styl na swojej stronie, ale nie chcesz tworzyć środowiska testowego tylko po to. Nie chcesz także serwować go odwiedzającym. Nie ma problemu, to jest miejsce gdzie Narzędzia dla Deweloperów mogą wejść do gry.
Oto co możesz zrobić za pomocą Narzędzi dla Deweloperów (Inspect Element):
- Zmienić dowolny tekst
- Zmienić kolory
- Znaleźć błędy na swojej stronie
- Testuj swoją witrynę w trybie responsywnym
- Monitoruj szybkość ładowania plików
.
Zmienianie tekstów, Właściwości stylu i dodawanie nowych stylów
Aby zmienić teksty, możesz po prostu dwukrotnie kliknąć element w narzędziu deweloperskim. Wtedy będziesz w stanie zmienić tekst bezpośrednio. Jednakże, zmiana kolorów i dodawanie nowych stylów wymaga innego podejścia. Aby zmienić style, musisz znaleźć odpowiednie klasy CSS po prawej stronie Narzędzi deweloperskich.
Dodawanie nowych stylów dla elementów jest również proste. Możesz po prostu kliknąć na obszar „element.style”, który znajduje się po prawej stronie Narzędzi Deweloperskich (górny obszar), a następnie będziesz mógł dodać tam swoje właściwości CSS.
Znajdowanie błędów w Narzędziach Deweloperskich
Możesz łatwo zobaczyć błędy wyświetlane w Narzędziach Deweloperskich, jeśli zmagasz się z problemem, którego nie możesz zdefiniować. Będziesz w stanie zobaczyć wszystkie błędy na karcie Console w Developer Tools. Jeśli nie ma żadnego błędu i wszystko działa świetnie, wtedy zobaczysz tekst „ready for rock” (tylko w Artbees Themes).
Tryb Responsywny Narzędzi Deweloperskich
Możesz aktywować Tryb Responsywny w Narzędziach Deweloperskich poprzez kliknięcie ikony „Telefon i Tablet”, która jest umieszczona w prawym górnym rogu Narzędzi Deweloperskich. Po kliknięciu, będziesz w stanie zobaczyć swoją stronę w dowolnym wymiarze. Jest to dość niesamowita funkcja, która pozwala na przetestowanie witryny w różnych wymiarach.
Monitorowanie źródeł w Narzędziach Deweloperskich
Możesz również monitorować źródła swojej strony w Narzędziach Deweloperskich, takie jak obrazy, pliki javascript, pliki CSS, wideo, itp… Możesz zobaczyć wszystkie metryki na karcie Sieć w Narzędziach Deweloperskich.
Otwórz kaptur swojej witryny z Inspect Element
Chciałbym zmienić pogląd, że tylko doświadczony programista może poruszać się po wszystkich szczegółach, które tworzą szkielet twojej witryny. Nie lekceważ tego, co możesz zrobić z Inspect Element i jak pouczające mogą być szczegóły, które pozwolą ci zobaczyć, co tak naprawdę kryje się za projektem twojej witryny.