Sztuczki Element Inspector: 8 niezbędnych sztuczek! 🛠️

Element Inspector w przeglądarce może wydawać się narzędziem przeznaczonym wyłącznie dla programistów, ale tak naprawdę możesz za jego pomocą zdziałać cuda, nawet jeśli nie wiesz nic o programowaniu! 🚀

1 . Pobierz obrazy

Może być konieczne pobranie obrazu ze strony internetowej. Próbujesz kliknąć prawym przyciskiem myszy i nacisnąć „Zapisz obraz”, a okazuje się, że opcja jest wyłączona lub przycisk „Zapisz obraz” się nie pojawia. Innym razem może się zdarzyć, że będziesz mógł pobrać tylko miniaturę obrazu, a nie cały plik. 🤔 Co słychać?

Programiści często celowo wyłączają przycisk „Zapisz obraz” lub korzystają z frameworka internetowego, który nie pozwala na pobieranie obrazów w ten sposób. Ale w Element Inspector istnieje poręczne rozwiązanie. Możesz pobrać dowolny obraz ze strony internetowej, w pełnym rozmiarze, wykonując trzy proste kroki. 📸

Krok 1

Robi kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierz opcję „Zbadaj element” lub „Inspekcja”. Możesz również skorzystać ze specjalnego skrótu klawiaturowego inspektora w swojej przeglądarce. Klawisz F12 działa w większości przeglądarek i systemów operacyjnych. W tej wersji demonstracyjnej korzystam z przeglądarki Firefox, ale kroki są identyczne. 🖱️

Krok 2

W oknie Element Inspector kliknij kartę „Sieć”. Karta sieciowa powinna mieć „Obrazy” jako jedno ze swoich podmenu. Kliknij „Obrazy”. 🖼️

Teraz odśwież stronę, tak aby wszystkie zasoby obrazów pojawiły się w zakładce „Obrazy”. Użyj przycisk odświeżania obok paska adresu z poziomu przeglądarki lub naciśnij Ctrl+R. 🔄

Krok 3

I oto wszystko. Cała biblioteka obrazów powinna zostać załadowana na listę. Lista jest aktualizowana dynamicznie, więc w miarę dodawania do witryny nowych zdjęć, będą się one pojawiać także tutaj. 🖼️✨

Możesz najechać kursorem na plik, aby zobaczyć jego podgląd i wymiary. Kliknij dwukrotnie, aby otworzyć plik w nowej karcie, gdzie możesz go zapisać, korzystając z menu prawego przycisku myszy. 💾

2 . Pobierz filmy

Podobnie jak w przypadku zasobów graficznych, witryny internetowe czasami nie zezwalają na wypisać filmy bezpośrednio. Można je jednak pobrać, ładując je do inspektora elementów. Po załadowaniu pliku do inspektora wystarczy dwukrotnie kliknąć nazwę pliku, aby otworzyć go w nowej karcie. 🎥

Krok 1

Otwórz okno Element Inspector, naciskając skrót klawiaturowy F12 (powinno działać w większości systemów). Alternatywnie możesz kliknąć prawym przyciskiem myszy w dowolnym miejscu strony internetowej i wybrać opcję „Inspekcja”. Powinno pojawić się okno Inspektora elementów. 🖱️

Krok 2

Kliknij kartę „Sieć”, a następnie „Media”, aby filtrować wszystko oprócz plików wideo. Odśwież stronę. Możesz to zrobić klikając przycisk odświeżania przeglądarki lub naciskając kombinację klawiszy Ctrl+R. 🔄

Krok 3

Pliki wideo powinny zostać załadowane w formie listy. Nie można wyświetlić podglądu natychmiast, ale można kliknąć dwukrotnie plik, aby otworzyć go w nowej karcie. Tam możesz kliknąć prawym przyciskiem myszy i pobrać plik. 🎬

3 . Zrób zrzuty ekranu całej strony

Jeśli chcesz zapisać całą stronę internetową, możesz ją szybko pobrać jako plik PDF lub HTML. A co jeśli chcesz zrobić zwykłe zdjęcie całej strony? Tutaj Wyjaśnię jak to zrobić. 📸

W menu kontekstowym przeglądarki Firefox znajduje się dedykowane narzędzie do tworzenia zrzutów ekranu, więc pokażę Ci, jak to zrobić Google Chrome i innych przeglądarek. 🌐

Otwórz narzędzie inspektora, klikając prawym przyciskiem myszy w dowolnym miejscu strony lub naciskając klawisz F12.

Naciśnij Ctrl+Shift+P, aby otworzyć okno Uruchom. Napisałem Zrób zrzut ekranu w pełnym rozmiarze w tym oknie. Kliknij na to. 📄

Powinno pojawić się natychmiast okno „Zapisz jako”, umożliwiające zapisanie zrzutu ekranu całej strony w formacie JPG. 💾

4 . Udawaj, że rozmawiasz przez telefon

Większość stron internetowych ładuje się inaczej w zależności od rodzaju urządzenia i rozmiaru ekranu. Jeśli chcesz oszukać witrynę i sprawić, by myślała, że korzystasz z innego urządzenia (z jakiegokolwiek powodu), możesz to łatwo zrobić za pomocą narzędzia inspektora. 📱

W przeglądarce Chrome otwórz okno Elements Inspector z menu kontekstowego lub za pomocą klawisza F12. Następnie kliknij na małą ikonę laptopa i telefonu w lewym górnym rogu. W przeglądarce Firefox znajduje się podobny przycisk o nazwie Tryb responsywnego projektowania (Ctrl+Shift+M). 🖥️

Będziesz mieć listę urządzeń, które możesz emulować, a także możesz ręcznie dostosować ich rozmiar. ekran. Po wybraniu urządzenia mobilnego zauważysz, że Twoja przeglądarka symuluje również gesty dotykowe. 📱✨

5 . Zidentyfikuj źródła

Ta wskazówka jest przeznaczona dla osób kreatywnych, ale każdy, kto jest ciekawy czcionek na stronie internetowej, może skorzystać z tej sztuczki. Możesz użyć narzędzie inspektora do identyfikacji a czasem nawet pobierać czcionki. 🖋️

Najpierw otwórz narzędzie do inspekcji elementów. Następnie kliknij zakładkę „Sieć” (może być ukryta w menu rozszerzonym) i wybierz „Źródło”.

Następnie naciśnij Ctrl+R. Wyrenderowane czcionki zostaną załadowane na listę, prawdopodobnie w formacie WOFF. Możesz pobrać je bezpośrednio, klikając dwukrotnie na nazwę czcionki. Na przykład How-To Geek używa Roboto jako domyślnej czcionki. 🔤

Jeśli potrzebujesz bardziej szczegółowych informacji o czcionce, przejdź do zakładki „Elementy” i wybierz „Style”. Przewiń w dół do właściwości rodziny czcionek i kliknij ją. Odpowiedni tekst zostanie wyróżniony na stronie internetowej. W ten sposób można dokładnie zidentyfikować źródło. 🎨

6 . Edytuj tekst na stronie (tymczasowo)

Czy wiesz, że za pomocą inspektora możesz tymczasowo edytować niemal wszystko na stronie internetowej? To narzędzie umożliwia edycję kodu, z którego składa się witryna internetowa, więc jeśli znasz się trochę na kodzie, możesz zmienić wygląd strony zgodnie ze swoimi upodobaniami (tylko na swoim komputerze, dopóki nie przeładujesz strony). 🛠️

Nawet jeśli nie masz pojęcia o kodowaniu, możesz edytować podstawowy tekst na dowolnej stronie internetowej. Może to być fajny, mały żart, który możesz zrobić znajomym. 😉

Zaznacz tekst na stronie, który chcesz edytować i kliknij go prawym przyciskiem myszy. Następnie wybierz „Inspekcja” lub „Inspekcja elementu”.

Odpowiedni fragment tekstu powinien pojawić się na karcie Elementy. Wystarczy kliknąć dwukrotnie i zastąpić tekst dowolnym tekstem. ✏️

Zamknij inspektor elementów i gotowe! Pamiętaj, że jeśli odświeżysz stronę, zmiany zostaną cofnięte. 🔄

7 . Usuń elementy

Podobnie jak w przypadku edycji tekstu, można także usuwać określone elementy ze strony internetowej. Zmiany te będą obowiązywały tylko do momentu ponownego załadowania strony. ❌

Kliknij prawym przyciskiem myszy element, który chcesz usunąć, a następnie wybierz opcję „Inspekcja” lub „Inspekcja elementu”.

Najedź kursorem na etykiety „

” aż cały element zostanie podświetlony. Następnie wystarczy nacisnąć klawisz Delete. 🔚

I tak po prostu zniknęło! 🕵️‍♂️

8 . Identyfikuj wartości kolorów

Kolejna wskazówka dla osób kreatywnych: można uzyskać wartości RGB i HEX dowolnego kolor na stronie internetowej za pomocą narzędzia kroplomierza, które znajdziesz w inspektorze elementów. 🎨

Kliknij prawym przyciskiem myszy w dowolnym miejscu strony i otwórz Inspektora. Domyślnie okno Reguły otwiera się na karcie Inspektor. Przewiń w dół, aby znaleźć właściwości oznaczone jako kolor.

Obok właściwości koloru powinien znajdować się kolorowy okrąg lub kwadrat. Kliknij go, aby otworzyć narzędzie do wybierania kolorów i naciśnij znajdującą się obok niego ikonę kroplomierza. 🖌️

Możesz umieścić ten kroplomierz w dowolnym miejscu na stronie, aby wyświetlić wartości kolorów. Kliknięcie kroplomierza spowoduje automatyczne wypełnienie właściwości wybraną wartością koloru. Stąd możesz je łatwo skopiować. 📋

---

Te wskazówki ledwo muskają powierzchnię tego, co jest faktycznie możliwe przy użyciu Inspektora Elementów. Jeśli chcesz dowiedzieć się więcej na temat tworzenia stron internetowych, oto przewodnik, który pomoże Ci zacząć. 💻