Jak upravovat webové stránky v Safari pomocí Inspect Element

Safari vám se svým nástrojem Inspect Element umožňuje pohrát si s kódem front-end jakékoli webové stránky. Pokud chcete otestovat, jak by stránka vypadala s jiným textem nebo obrázky, můžete tak učinit změnou jejího kódu pomocí Inspect Element.

Toto je jednoduchý průvodce zaměřený na začátečníky, který vysvětluje, jak můžete začít experimentovat s Inspect Element v Safari a upravovat text a obrázky webových stránek s minimální znalostí kódování.

Co je kontrolní prvek?

Inspect Element je vývojářský nástroj. Je k dispozici v Safari, ale také v jiných webových prohlížečích, jako je Chrome, Firefox a Edge. S Inspect Element můžete nahlédnout za oponu webu a odhalit jeho front-endový kód, jako je HTML a CSS. Nezaručuje vám však viditelnost back-endu, jako jsou jeho databáze.

Tento kód nejen vidíte, ale můžete jej také vyladit. To znamená, že můžete změnit vzhled webu. Můžete nahradit obrázek, přeformulovat nějaký text, použít jiné písmo, změnit jeho barevné schéma a další. Tyto úpravy jsou však místní. Neuvidí se nikomu jinému kromě vás; zmizí, jakmile stránku obnovíte nebo se z ní vzdálíte.

Proč byste měli používat Inspect Element?

Inspect Element je skvělý nástroj, pokud jste začínající webový vývojář. Můžete doslova vidět kód, který pohání váš oblíbený web, a můžete jej vyladit, jak si přejete, v reálném prostředí. Je jich mnoho zábavné postřehy, které můžete získat pomocí Inspect Element.

Majitelé firem se mohou například podívat na klíčová slova obsažená na webových stránkách konkurence nebo návrháři k identifikaci písma použijte Prozkoumat prvek které považují za atraktivní nebo rychle otestovat jiné barevné schéma na svých webových stránkách.

Prozatím se zaměříme na úpravu základů webové stránky pomocí Inspect Element.

Jak získat přístup k Inspect Element na Safari

Inspect Element v Safari můžete otevřít pomocí nabídky pro vývojáře:

1. Otevřete Safari.
2. Klikněte Safari v horní liště nabídek.
3. Z rozbalovací nabídky vyberte Předvolby.
4. Vybrat Pokročilý volba.
5. Zaškrtněte políčko, které říká Zobrazit nabídku Develop na liště nabídek.

Po výběru této možnosti můžete klikněte pravým tlačítkem myši na webové stránce a vyberte Zkontrolujte prvek. Případně můžete vybrat Rozvíjet na liště nabídek a poté Zobrazit Webový inspektor.

Jak najít webové prvky v Inspect Element

Chcete-li začít upravovat prvek, klikněte pravým tlačítkem myši co chcete upravit a klikněte Zkontrolujte prvek. Otevře se okno vývojáře se zvýrazněnou příslušnou sekcí. Můžete zjistit, že konkrétní prvek, který chcete elementovat (řekněme obrázek nebo text), je skrytý; k jeho nalezení použijte šipky na levé straně rozbalte vnořené sekce.

Chcete-li zúžit výběr, klikněte na cílová ikona z panelu nástrojů Zkontrolovat prvek. Nyní, když procházíte kódem, zvýrazní tuto sekci na webu. Nebo můžete pomocí kurzoru určit sekci na webu. To je užitečné, když se chcete zdokonalit v něčem konkrétním v přeplněné oblasti webové stránky.

Jak upravit text webu pomocí Inspect Element

Chcete-li upravit část textu poté, co jej najdete ve zdrojovém kódu webu, dvojklik to. Můžete zadat nový text přímo do kódu nebo odstranit stávající text. Po dokončení úprav pro daný řetězec textu stiskněte Vstuptea text na webové stránce se změní.

Je to opravdu tak jednoduché! To nebude fungovat pouze tehdy, když je text ve skutečnosti součástí obrázku, jako je logo.

Jak upravit obrázky webových stránek pomocí Inspect Element

Zatímco obrázky se vám zobrazují vizuálně na front-endu, v kódu webu se zobrazují jako odkazy. Můžeš klikněte pravým tlačítkem myši a obrázek a vyberte si Zkontrolujte prvek skočit tam, kde je tento obrázek v kódu. Obrázky webových stránek mají obvykle přípony souborů JPG, GIF nebo PNG, i když ne výhradně.

Dvojklik tyto obrazové řetězce a můžete je upravit nebo je pouze uložit do vašeho systému, pokud si to přejete. Pokud chcete obrázek nahradit, vyměňte jej za adresu URL náhradního obrázku. Nebo můžete celý kódový řetězec odstranit a odstranit tak obrázek ze zobrazení.

Prozkoumejte webové stránky pomocí Safari

Nástroj Inspect Element Safari vám umožňuje snadno najít a změnit kód odpovídající textu a obrázkům, což je stejně snadné jako přepnutí textu nebo řetězce URL. Jakmile dokončíte úpravy webu pomocí Inspect Element, jednoduše stránku obnovte a vše se vrátí do normálu.

Jak změnit uživatelského agenta v prohlížeči a trikové webové stránky

Přečtěte si další

O autorovi