Z Internetu korzysta dziś prawie każdy. Ludzie szukają w Internecie wielu informacji. Może to być cokolwiek. Na przykład opis usługi lub strona restauracji, gdzie można zamówić jedzenie lub po prostu strona z wiadomościami, gdzie można znaleźć najnowsze wiadomości.
W każdym z tych przypadków ludzie wybierają te strony, które są najbardziej atrakcyjne pod względem wygody i piękna. Aby Twoja strona odniosła sukces i zaczęła dobrze działać musi być stylowa i funkcjonalna. Ważne jest również to, aby nie była to strona frywolna i szybko się ładowała.
Wszystko to zależy od tego, jak strona jest zaprojektowana i jakie technologie zostały w niej zastosowane. Powszechnie uważa się, że programowanie jest trudne. Jednak gdy zrozumiesz podstawy, zrozumiesz jak działa Twoja strona i jak możesz ją zmienić.
Aby szybko przejrzeć swoją stronę pod kątem kodu, nowoczesne przeglądarki posiadają funkcję inspekcji elementów. Funkcja ta jest również obecna w komputerach Mac.
Dlaczego powinieneś nauczyć się korzystać z funkcji Inspect Element
Jest to podstawowa funkcja w tworzeniu stron internetowych. Z jej pomocą programiści sprawdzają wydajność stron internetowych. Służy do debugowania i testowania stron w Internecie. Wśród innych zastosowań tej funkcji można wyróżnić 4 kierunki:
- Programiści używają tej funkcji do tworzenia stron, testowania ich i wprowadzania zmian.
- Projektanci mogą sprawdzić, jak wyglądają ich układy lub pobrać układ z innej strony.
- Marketerzy mogą za jego pomocą zmieniać tekst online lub sprawdzać Google Analytics.
- Agenci pomocy technicznej mogą łączyć się z Inspektorem elementów, dzięki czemu mogą przekazywać programistom prawidłowe informacje o błędach zgłaszanych przez użytkowników witryny.
Możemy również powiedzieć, że jeśli jesteś właścicielem firmy, warto byłoby zapoznać się z tą funkcją, aby zrozumieć, jak działa Twoja strona i jakie przyszłe zadania mogą być ustawione dla programistów.
Jak sprawdzić element na komputerze Mac w różnych przeglądarkach
Aktywowanie funkcji Inspect Element nie jest trudne. Możesz to zrobić dosłownie kilkoma kliknięciami na każdej z przeglądarek. Aby to zrobić, musisz:
Safari
Na początku może się wydawać, że ta funkcja działa na Safari trudniej niż na jakiejkolwiek innej przeglądarce. W rzeczywistości jej aktywacja jest prosta. Potrzebujesz:
- Uruchom Safari.
- Przejdź do Preferencji (⌘ + ,).
- Kliknij kartę Zaawansowane.
- Zaznacz pole „Pokaż menu Develop na pasku menu„.
- Następnie będziesz miał dostęp do narzędzi deweloperskich w menu
- Następnie należy użyć funkcji Pokaż źródło strony (Option + ⌘ + U)
- Kliknij przycisk Elementy, aby wyświetlić kod strony.
Następnie po najechaniu kursorem na element zostanie on podświetlony. Jeśli chcesz otworzyć opcję Inspect Element w Safari na konkretnym fragmencie strony, możesz kliknąć go prawym przyciskiem myszy i wybrać opcję Inspect Element.
Firefox
Działają one w ten sam sposób, ale mają już włączoną funkcję Inspect Element.
Skrótem do Firefoksa Inspect Element jest Option + ⌘ + I, można też kliknąć prawym przyciskiem myszy na dowolnym elemencie, aby go sprawdzić.
Chrom
Możesz znaleźć tę funkcję pod Widok ➙ Deweloper na pasku menu lub używając skrótu klawiaturowego Option + ⌘ + I. Inspekcji elementów możesz używać w Chrome w ten sam sposób, po prostu klikając prawym przyciskiem myszy na dowolny fragment strony internetowej.
Jak wprowadzić zmiany na stronie za pomocą Inspect Element
Dzięki tej funkcji możesz szybko wprowadzić zmiany na swojej stronie. Aby to zrobić, musisz włączyć opcje Inspect Element i dosłownie zmodyfikować dowolną część HTML lub CSS.
Będziesz musiał powtórzyć te same kroki we wszystkich przeglądarkach. Aby wprowadzić zmiany na stronie startowej, należy:
- Kliknij prawym przyciskiem myszy na wybranym elemencie i kliknij na Inspect Element.
- Następnie kliknij dwukrotnie na tekst w kodzie i udostępnij go do edycji.
- Teraz możesz dokonać zmian w swoim kodzie.
- Po wprowadzeniu wszystkich zmian naciśnij klawisz Enter.
Możesz zmienić obraz lub animację na dowolnej stronie internetowej – aby to zrobić, zamień adres URL starego obrazu na adres URL nowego obrazu lub GIF.
Możesz również wprowadzać zmiany w CSS, takie jak zmiana kolorów lub rozmiarów czcionek.
