Masz pytanie, jak wyświetlić kod źródłowy elementu wizualnego na swoim Chromebooku? Aby to zrobić, możesz skorzystać ze specjalnych narzędzi DevTools w aplikacji Google Chrome lub na dowolnej stronie przeglądarki. DevTools to lista specjalnych narzędzi dla programistów, które są wbudowane w przeglądarkę Google Chrome. Dzięki nim użytkownicy mogą edytować strony w podróży i śledzić ewentualne problemy.
Jak używać programu Inspect Element na Chromebooku?
W przypadku Chromebooków domyślną przeglądarką jest Google, aby otworzyć narzędzia deweloperskie na tym urządzeniu należy.
- Otwórz stronę, którą chcesz otworzyć
- Kliknij na 3 kropki w prawym górnym rogu aplikacji
- Wybierz “Więcej narzędzi“.
- Kliknij na “Narzędzia dla programistów“.
Alternatywne sposoby dostępu do tej funkcji to naciśnięcie przycisku F12 lub kliknięcie prawym przyciskiem myszy na wybranym elemencie
Jest to uniwersalna instrukcja, która ma zastosowanie do większości przeglądarek w systemie Windows lub jakimkolwiek innym.
Jak używać programu Inspect Element na komputerze Mac lub telefonie Iphone?
Czy można to samo zrobić za pomocą komputera Mac lub nawet iPhone’a? Musisz tylko wykonać kilka prostych kroków poniżej:
Jak używać go na komputerze Mac
Jeśli masz komputer Mac, najlepszą przeglądarką jest Safari. Otwieranie Narzędzi dla programistów w tej przeglądarce różni się nieco od tego samego procesu w Chrome lub Firefox. Będziesz musiał:
- Otwórz przeglądarkę
- Kliknij Safari na nazwę karty.
- Wybierz “Preferencje“
- Następnie kliknij na ikonę zaawansowanego koła zębatego, która będzie znajdowała się w górnej części ekranu
- Zaznacz pole wyboru obok opcji Pokaż menu Develop na pasku menu.
Gdy to zrobisz, Inspect Element będzie dostępny na twoich stronach internetowych. Możesz również wywołać go za pomocą CMD + Option + I.
Jak używać go na telefonie iPhone
Jeśli chcesz sprawdzić, jak mobilna wersja strony wygląda na Twoim iPhonie za pomocą funkcji Inspect Elements, musisz najpierw włączyć Web Inspector dla urządzenia z systemem iOS:
- Przejdź do ustawień
- Wybierz aplikację Safari
- Przewiń do dołu i kliknij na “Menu zaawansowane“.
- Teraz włącz pole wyboru obok “Web Inspector“.
Musisz także włączyć menu Deweloper na komputerze Mac, zgodnie z instrukcjami podanymi powyżej. Po włączeniu tych funkcji na urządzeniu iOS i komputerze Mac, powinieneś być w stanie zobaczyć menu Deweloper w górnej części komputera Mac. Musisz w nie kliknąć, aby zobaczyć dołączonego iPhone’a i otwartą na nim stronę internetową. Gdy przełączysz się na inną stronę, przełączysz także okno Web Inspector dla tej strony na komputerze Mac.
Co to jest Panel Elementarny
Pierwszą rzeczą, którą należy wiedzieć jest to, czym jest Panel Elementów. Jeśli chcesz zmienić wygląd lub jakiekolwiek zewnętrzne elementy strony, musisz edytować swój CSS lub HTML. Możesz to zrobić za pomocą narzędzia deweloperskiego zwanego panelem elementów. Pozwoli ci ono na sprawdzenie i zmianę twojej strony z poziomu front-endu. Niektóre z elementów, które możesz tam zobaczyć to :
- Informacje o obrazie, takie jak jego rozmiar i źródło
- Panel CSS – opcja ta służy do zmiany zewnętrznego stylu strony. Można tu zmieniać takie parametry jak czcionki, rozmiary, kolory
- Informacje o DOM lub panel DOM dzięki tej opcji możesz kontrolować wygląd strony. Możesz zmieniać położenie elementów oraz w pełni nawigować do plików HTML.
- Panel konsoli prezentuje nowe funkcje w ramach narzędzi deweloperskich
- Słuchacze zdarzeń elementu
- Komentarze HTML
- Informacje zwrotne
Sprawdzanie renderowanych i naturalnych rozmiarów obrazu
Bardzo często potrzebujesz informacji o obrazie na stronie internetowej, możesz go “sprawdzić”. Daje to możliwość poznania np. rozmiaru obrazka. Aby to zrobić, musisz najechać kursorem myszy na dany IMG, będąc w drzewie DOM
Przeglądanie konkretnego użytego obrazu z zestawu źródłowego (srcset)
Następnie możesz sprawdzić, jaka wersja obrazu została załadowana i jakie jest dokładne źródło srcset. srcset pomoże przeglądarce zażądać wersji obrazu z najmniejszym rozmiarem, który jest nieco większy niż rzeczywisty obraz. Jest to używane do wyświetlania zestawu obrazów o różnych rozdzielczościach do wyboru przez przeglądarkę. Najpierw wybierz element IMG, a następnie sprawdź w konsoli informacje $0.currentSrc. Zauważ, że możesz zwiększyć właściwości obrazów za pomocą srcset, jeśli musisz korzystać z urządzeń o wyższym DPI.
