Jak zkontrolovat prvek na iPhone: Vše, co potřebujete vědět

V případě, že to nevíte, webová stránka se skládá z mnoha prvků, které jsou naformátovány tak, aby vypadaly jako jedna jediná entita. Weboví vývojáři musí porozumět každému z těchto prvků, jak jsou rozmístěny na webové stránce, a vidět, jak každý z nich funguje samostatně.

Uživatelé Windows a Mac budou znát možnost „Prozkoumat“ nebo „Zkontrolovat prvek“, která je dostupná po kliknutí pravým tlačítkem na jakoukoli webovou stránku. Tato možnost nabízí způsob, jak zobrazit zdrojový kód webu, zobrazit všechny jeho prvky, řádek kódu za každým z nich a upravit jeho Javascript, HTML, CSS a všechny ostatní mediální soubory, které se na něm nacházejí. Tímto způsobem se nejen dozvíte, jak konkrétní web funguje a funguje, ale můžete na něm provádět úpravy ve svém vlastním prohlížeči, aniž by to ovlivnilo aktuální webovou stránku. 

I když je o možnosti inspect známo, že je to „vývojářský“ nástroj, těží z toho nejen vývojáři. Dokonce i začátečníci a nevývojáři mohou tento nástroj použít k tomu, aby se naučili, jak se vytváří web a jak každý z jeho prvků společně funguje. Pokud se těšíte na používání možnosti inspect element při procházení webu na iPhonu, tento příspěvek by vám měl pomoci najít způsob, jak toho dosáhnout. 

Související: Jak zkontrolovat prvek na Androidu

Můžete zkontrolovat webové prvky přímo v Safari?

Jednoduchá odpověď je ne. Safari na iOS, stejně jako mnoho jiných mobilních prohlížečů, vám nenabízí nativní kontrolní nástroj pro zobrazení vývoje webové stránky. Apple neuvádí důvod, proč taková možnost neexistuje, ale věříme, že to souvisí s tím, jak malé displeje jsou na chytrých telefonech. Menší velikost zobrazení může uživatelům ztížit orientaci v polích, která jsou kontrolována, protože možná budete muset opatrně umístit kurzor, když chcete upravit kód webové stránky nebo jej dokonce najít. 

Dalším důvodem může být nedostatek výpočetního výkonu na chytrých telefonech. Přestože moderní telefony iPhone mají dostatek výkonu ke spouštění graficky náročných her, zobrazit informace o stránce webu může být složité, protože ne všechny weby jsou vytvořeny stejně. Některé webové stránky mohou mít mnoho zdrojů a vrstev, které jsou pečlivě vytvořeny, aby vypadaly bezproblémově, ale načtení stejných zdrojů může při kontrole nějakou dobu trvat. 

Související: Spuštění videa na iPhone [Průvodce]

Inspect Element na iPhone: Jaké další možnosti máte?

I když nemůžete nativně používat nástroj „Inspect Element“ v aplikaci Safari na iOS, stále existují způsoby, jak toto omezení obejít. Níže jsou uvedeny tři způsoby, jak můžete zkontrolovat prvky webových stránek, které navštívíte v Safari na vašem iPhone. 

Metoda #01: Použití Safari na vašem Macu

Pokud kromě iPhonu vlastníte i zařízení s macOS, můžete stále prohlížet webové stránky přímo z aplikace Safari, ale na Macu. Apple vám umožňuje ladit webové stránky ze Safari na iOS, jako byste to dělali na Macu pomocí svých nástrojů „Develop“. Zatímco proces ladění webu je relativně jednoduchý, jeho počáteční nastavení může být zdlouhavější, než byste očekávali. Ale nebojte se, vysvětlíme vám proces nastavení tím nejjednodušším možným způsobem a pomůžeme vám snadno zkontrolovat stránky hned po prvním použití. 

Povolte Web Inspector na iOS

Abyste mohli ladit webové prvky, musíte nejprve povolit Web Inspector pro aplikaci Safari na iOS. Chcete-li to provést, otevřete aplikaci Nastavení a vyberte „Safari“.

V Safari přejděte dolů a klepněte na „Pokročilé“. 

Na další obrazovce klepněte na přepínač vedle položky „Webový inspektor“, dokud se nerozsvítí zeleně. 

Počáteční nastavení na Macu

Jakmile úspěšně povolíte Web Inspector pro Safari na iOS, je nyní čas provést nastavení na vašem Macu. Na Macu otevřete aplikaci Safari, klikněte na možnost „Safari“ na liště nabídek a vyberte „Předvolby“. 

V okně, které se objeví, vyberte kartu 'Pokročilé' shora a zaškrtněte políčko 'Zobrazit nabídku Develop in menu bar'. 

Nyní byste měli vidět možnost 'Vývoj', která se objeví na liště nabídek v horní části. 

Nyní pomocí kabelu USB dodaného s iPhonem vytvořte spojení mezi iPhone a Mac. Když se váš iPhone připojí k Macu, můžete kliknout na 'Develop' na liště nabídek a zjistit, zda se váš iPhone objeví v seznamu zařízení. Pokud ano, klikněte na název zařízení z tohoto seznamu. 

Abyste se ujistili, že můžete prohlížet webové stránky bezdrátově, aniž byste potřebovali kabel USB, jako jste to udělali právě teď, klikněte po otevření nabídky iPhone na možnost „Připojit přes síť“. 

Nyní můžete svůj iPhone odpojit od Macu a stále budete moci prohlížet webové stránky, aniž byste mezi nimi připojovali kabel. 

Prohlédněte si webové stránky z iOS na Macu

Nyní, když jste povolili 'Připojit přes síť' v nabídce 'Vývoj', můžete prohlížet webové stránky ze Safari na iOS přímo na vašem Macu. Jen se musíte ujistit, že iPhone i Mac jsou připojeny ke stejné bezdrátové síti, abyste mohli bezdrátově ladit webové stránky. 

Za tímto účelem otevřete na svém iPhone aplikaci Safari a přejděte na webovou stránku, kterou chcete zkontrolovat. 

S odemčeným iPhonem a otevřenou vybranou webovou stránkou přejděte na Mac a otevřete tam aplikaci Safari. Zde klikněte na 'Develop' na liště nabídek a přejděte na 'iPhone'. 

Když umístíte kurzor na svůj „iPhone“, měli byste vidět seznam webových stránek, které jsou otevřené na iOS. V tomto seznamu klikněte na webovou stránku, kterou chcete zkontrolovat. 

Na Macu se načte nové okno se všemi informacemi, které lze z vybrané webové stránky zkontrolovat. 

Kdykoli během kontroly budete moci zjistit, na kterou část stránky ukazuje řádek kódu, když na svém iPhonu vyhledáte modrou oblast.

Tato modrá oblast označuje, že kód, na který na Macu umístíte kurzor, tvoří zvýrazněný prvek pro tuto konkrétní webovou stránku. Pohybem mezi různými řádky kódu se toto modré zvýraznění přesune přes různé části stránky na vašem iPhone v reálném čase. 

Související: Jak zachovat efekty ve FaceTime

Metoda #02: Použití zkratek v systému iOS 

Pokud nevlastníte Mac nebo chcete nahlédnout na web přímo ze svého iPhonu, pak vás potěší, že k tomu slouží aplikace Zkratky pro iOS. Aplikace Zkratky pro iOS nabízí spoustu předem připravených výběrů, které vám umožní zobrazit zdrojový kód stránky, upravit webovou stránku, získat obrázky z webu a vyhledat starší verze webové stránky z aplikace Safari. Bohužel neexistuje jediný zástupce, který by na iOS nabízel plnohodnotné ladění webu, takže pro každý z těchto účelů budete muset přidat zástupce. 

Našli jsme následující zkratky, které můžete použít k ladění na webech přímo z iOS. Tyto jsou:

Zobrazit zdroj – Tato zkratka vám umožňuje zobrazit zdrojový kód webové stránky ve formátu základní kosti. 

Upravit webovou stránku – Tato zkratka vám umožňuje lokálně upravit obsah webové stránky, abyste mohli otestovat nový design nebo formát a jak může vypadat na vašem iPhone. 

Získat obrázky ze stránky – Primárním důvodem ke kontrole stránky může být prohlédnutí obrázků nebo uložení těch, které jsou jinak neinteraktivní. Tato zkratka zachytí všechny obrázky z určité webové stránky a poté je společně zobrazí náhled. Jak ukazuje snímek obrazovky níže, můžete si prohlédnout každý jeden z 24 obrázků, které jsou hostovány na vybrané webové stránce. 

Wayback Machine – Tato zkratka vás zavede na Wayback Machine webové stránky, kde můžete vidět její předchozí verze, které zůstávají uložené v internetovém archivu. 

V závislosti na tom, jak chcete prohlížet webové stránky v systému iOS, můžete do svého iPhone přidat kteroukoli z těchto zkratek buď kliknutím na příslušné odkazy výše, nebo jejich vyhledáním v části Zkratky > Galerie. 

Ve výsledcích vyhledávání klepněte na zkratku, kterou chcete přidat do iPhone. 

Když se otevře obrazovka náhledu, klepněte na možnost „Přidat widget“ ve spodní části. 

Všechny zkratky se zobrazí na obrazovce Moje zkratky > Všechny zkratky a budou také přístupné na listu Sdílení Safari.  

Chcete-li zkontrolovat webovou stránku, otevřete ji v prohlížeči Safari a klepněte na tlačítko „Sdílet“ ve spodní části. 

V zobrazeném listu Sdílení přejděte dolů a najděte zkratky, které jste přidali do svého iPhone. 

Výběr 'Upravit webovou stránku' vám ​​přímo umožní upravovat části webové stránky. Když vyberete kteroukoli z dalších tří možností, budete dotázáni, zda chcete, aby zástupce přistupoval na webovou stránku. Zde klepněte na „Povolit jednou“. 

Související: Jak přidat WidgetSmith na domovskou obrazovku

Metoda #03: Použití aplikací třetích stran

Pokud nejste spokojeni s výše uvedenými výsledky, budete muset prozkoumat aplikace třetích stran, abyste mohli zkontrolovat prvky webové stránky. Podobně jako v Safari nenajdete způsob, jak zkontrolovat webovou stránku v nejpopulárnějších webových prohlížečích (Chrome, Firefox, Brave atd.). Místo toho se budete muset spolehnout na aplikaci, která byla vytvořena k provedení tohoto konkrétního úkolu, a takové aplikace může být těžké najít.

Zatímco jednoduché vyhledávání v App Store vám přinese několik výsledků pro kontrolu webových prvků, nenajdete tolik aplikací, které jsou dostupné zdarma a jsou vysoce hodnoceny. Na základě zpětné vazby od uživatelů vám doporučujeme nainstalovat aplikace Inspect Browser nebo Gear Browser  z App Store, které umožňují kontrolu a úpravy prvků v JavaScriptu, CSS a HTML. 

To je vše, co potřebujete vědět o kontrole prvků na iPhonu. 

PŘÍBUZNÝ

• Jak vložit na iPhone bez držení
• Jak zanechat skupinový text na iMessage a co se stane
• Jak najít Airtags, které vás sledují
• 30 neobvyklých triků pro iOS 15, které byste měli znát
• Jak nastavit náhodnou tapetu bez opakování na iPhone