Jak edytować strony internetowe w Safari za pomocą Inspect Element

Dzięki narzędziu Inspect Element Safari pozwala majstrować przy kodzie frontonu dowolnej strony internetowej. Jeśli chcesz przetestować, jak wyglądałaby strona z innym tekstem lub obrazami, możesz to zrobić, zmieniając jej kod za pomocą Inspect Element.

Jest to prosty przewodnik przeznaczony dla początkujących, aby wyjaśnić, jak rozpocząć eksperymentowanie z narzędziem Inspect Element w Safari, aby edytować tekst i obrazy na stronie internetowej przy minimalnej znajomości kodowania.

Co to jest element kontrolny?

Inspect Element to narzędzie programistyczne. Jest dostępny w Safari, ale także w innych przeglądarkach internetowych, takich jak Chrome, Firefox i Edge. Dzięki Inspect Element możesz zajrzeć za kurtynę witryny, aby odsłonić jej kod front-end, taki jak HTML i CSS. Jednak nie zapewnia widoczności zaplecza, podobnie jak jego baz danych.

Nie tylko możesz zobaczyć ten kod, ale także możesz go poprawić. Oznacza to, że możesz zmienić wygląd strony. Możesz zastąpić obraz, przeformułować fragment tekstu, użyć innej czcionki, zmienić jego schemat kolorów i nie tylko. Jednak te zmiany są lokalne. Nie pojawią się nikomu poza tobą; znikają po odświeżeniu lub odejściu od strony.

Dlaczego warto używać elementu kontrolnego?

Inspect Element to świetne narzędzie, jeśli jesteś początkującym programistą internetowym. Możesz dosłownie zobaczyć kod, który obsługuje twoją ulubioną stronę internetową, modyfikując ją według własnego uznania w rzeczywistym środowisku. Jest wiele zabawne spostrzeżenia, które możesz uzyskać, korzystając z Inspect Element.

Na przykład właściciele firm mogą spojrzeć na słowa kluczowe zawarte w witrynie konkurencji, a projektanci mogą: użyj Inspect Element, aby zidentyfikować czcionkę że uznają za atrakcyjne lub szybko przetestować inną kolorystykę na swojej stronie internetowej.

Na razie skupimy się na edycji podstaw strony internetowej za pomocą Inspect Element.

Jak uzyskać dostęp do Inspekcji Elementu w Safari

Możesz otworzyć Inspect Element w Safari za pomocą menu programisty:

1. Otwórz Safari.
2. Kliknij Safari na górnym pasku menu.
3. Z menu rozwijanego wybierz Preferencje.
4. Wybierz Zaawansowany opcja.
5. Zaznacz pole, które mówi Pokaż menu Develop na pasku menu.

Po wybraniu tej opcji możesz kliknij prawym przyciskiem myszy na stronie internetowej i wybierz Sprawdź element. Alternatywnie możesz wybrać Rozwijać na pasku menu, a następnie Pokaż inspektora sieci.

Jak znaleźć elementy sieci Web w Inspect Element

Aby rozpocząć edycję elementu, kliknij prawym przyciskiem myszy co chcesz edytować i kliknąć Sprawdź element. Spowoduje to otwarcie okna programisty z podświetloną odpowiednią sekcją. Może się okazać, że konkretny element, który chcesz umieścić (np. obraz lub tekst) jest ukryty; aby go zlokalizować, użyj strzałki po lewej stronie, aby rozwinąć zagnieżdżone sekcje.

Aby zawęzić wybór, kliknij ikona celu z paska narzędzi Sprawdź element. Teraz, gdy poruszasz się po kodzie, podświetla on tę sekcję na stronie internetowej. Możesz też użyć kursora, aby wskazać sekcję w witrynie. Jest to przydatne, gdy chcesz doskonalić coś szczególnego w zatłoczonym obszarze strony internetowej.

Jak edytować tekst strony internetowej za pomocą elementu Inspect?

Aby umożliwić edycję fragmentu tekstu po znalezieniu go w kodzie źródłowym witryny, podwójne kliknięcie to. Możesz wpisać nowy tekst bezpośrednio do kodu lub usunąć istniejący tekst. Po zakończeniu edycji danego ciągu tekstu naciśnij Wchodzić, a tekst na stronie zmieni się.

To naprawdę takie proste! Nie działa to tylko wtedy, gdy tekst jest w rzeczywistości częścią obrazu, na przykład logo.

Jak edytować obrazy na stronie internetowej za pomocą Inspect Element

Podczas gdy obrazy pojawiają się wizualnie w interfejsie użytkownika, w kodzie witryny pojawiają się jako linki. Możesz kliknij prawym przyciskiem myszy i obraz i wybierz Sprawdź element aby przejść do miejsca, w którym znajduje się ten obraz w kodzie. Obrazy w witrynach zazwyczaj mają rozszerzenia JPG, GIF lub PNG, ale nie tylko.

Podwójne kliknięcie te ciągi obrazów i możesz je edytować lub po prostu zapisać je w swoim systemie, jeśli chcesz. Jeśli chcesz zastąpić obraz, zmień go na adres URL obrazu zastępczego. Lub możesz całkowicie usunąć ciąg kodu, aby usunąć obraz z widoku.

Zaglądaj do stron internetowych za pomocą Safari

Narzędzie Inspect Element w Safari pozwala łatwo znaleźć i zmienić kod odpowiadający tekstowi i obrazom, co jest tak proste, jak zamiana ciągu tekstowego lub adresu URL. Gdy skończysz edytować witrynę za pomocą Inspect Element, po prostu odśwież stronę, a wszystko wróci do normy.

Jak zmienić agenta użytkownika przeglądarki i oszukać strony internetowe?

Czytaj dalej

O autorze