Jak aktivovat vývojářské nástroje v Safari. Rychlý tip: Ladění Mobile Safari pomocí Web Inspector

Vytváření a ladění webových stránek a webových aplikací pro mobilní zařízení může být obtížný úkol. Na ploše máme výkonné nástroje pro ladění; Většina prohlížečů má webový inspektor. Ale nemáme stejné nástroje pro zařízení jako iPhone a iPad... tedy až teď!

S nedávným vydáním Safari 6 a iOS 6 můžete nyní používat Web Inspector k vytváření a ladění webových stránek v Safari pro stolní počítače a mobilní zařízení. Jak? Proces nastavení je jednoduchý. Postupujte podle tohoto průvodce a téměř okamžitě budete mít na dosah ruky velmi výkonné nástroje pro ladění mobilních zařízení.

Moderní nástroje pro vývojáře prohlížečů velmi pomáhají při vytváření webových stránek a webových aplikací. Chrome má . Ohnivá liška? . Safari? Webový inspektor. Všechny extrémně výkonné nástroje ve vývoji webu.

Doposud však bylo ladění webových stránek a webových aplikací na mobilních zařízeních obtížným úkolem. Vzhledem k tomu, že Safari a Chrome běží na enginu webkit, existuje mnoho podobností v tom, jak desktopový a mobilní prohlížeč vykresluje webové rozložení. Většina návrhářů/vývojářů tedy vytváří a přizpůsobuje své webové stránky na ploše pomocí jednoho z těchto prohlížečů s předpokladem, že webkit engine bude mít za následek, že stránka bude vypadat stejně na mobilním zařízení.

Mobilní a desktopové platformy jsou však ve skutečnosti zcela odlišné. Mají různé kapacity paměti, výkonnostní potenciály, vstupní zařízení a síťová připojení. Proto se stalo nezbytností, aby nástroje pro ladění návrhářů pro mobilní zařízení byly efektivnější a konzistentnější s jejich desktopovými protějšky.

Nové softwarové verze iOS 6 a Safari 6 společnosti Apple přinášejí mnoho funkcí nástrojů pro ladění desktopů, které všichni známe a milujeme z mobilních zařízení. Tento tutoriál vám ukáže jednoduchý proces získání nastavení pro ladění mobilních webů pomocí Safari Web Inspector.

Nejprve věnujte pozornost kompatibilitě: Pro uživatele Windows máme špatné zprávy. Vzdálený webový inspektor můžete ladit pouze na Macu. Safari 6 pro Windows není k dispozici. Safari 6 je navíc k dispozici pouze pro počítače Mac se systémem OSX Lion nebo vyšším.

Metody použití webových inspektorů

Existují dva způsoby, jak použít Web Inspector v mobilním Safari:

1. Skutečná metoda zařízení: používat skutečné iZařízení (iPhone, iPad atd.) připojené k počítači přes USB port
2. Metoda virtuálního zařízení: Použijte simulátor iOS, který je součástí Xcode

Podíváme se na obě tyto metody a vybereme tu, která nejlépe vyhovuje vaší situaci.

Krok 1: Ujistěte se, že máte aktuální informace

Vzhledem k tomu, že mobilní ladění pomocí webového inspektoru je nová funkce, musíte se ujistit, že máte veškerý nejnovější software.

Skutečná metoda zařízení: Chcete-li používat webový inspektor v tandemu se skutečným iDevice, budete potřebovat následující:

• IDevice (iPhone, iPad, iTouch) se systémem iOS 6
• USB kabel
• Safari 6

Chcete-li používat webový inspektor v tandemu se simulátorem iOS, budete potřebovat následující:

• Safari 6
• Mac OSX Lion (10.7.4) nebo vyšší
• Xcode 4.5 s iOS 6 SDK (k dispozici v obchodě s aplikacemi)

Kontrola verzí softwaru: Chcete-li zkontrolovat, zda na svém iDevice používáte iOS 6, přejděte na svém zařízení do „Nastavení > Obecné > O aplikaci“.

Chcete-li zkontrolovat, zda používáte Safari 6, otevřete panel nástrojů Safari a klikněte na Safari > O Safari.

Abyste se ujistili, že používáte Lion, klikněte na logo Apple na liště nabídek a vyberte „O tomto Macu“

Abyste se ujistili, že používáte správnou verzi Xcode, otevřete Xcode a vyberte "Xcode > O Xcode"

Krok 2: Povolte nástroje pro vývojáře

Musíte povolit nástroje pro vývojáře a webový inspektor ve verzích Safari pro stolní počítače a mobilní zařízení.

Skutečná metoda zařízení: pokud budete používat skutečné zařízení, připojte ho k Macu přes USB.

Metoda virtuálního zařízení: Pokud se chystáte použít simulátor iOS, otevřete Xcode, poté klikněte pravým tlačítkem na ikonu doku a vyberte „Otevřít nástroj pro vývojáře > Simulátor iOS“.

Mobilní Safari: Na vašem skutečném simulátoru iDevice nebo iOS přejděte do Nastavení > Safari > Pokročilé a povolte Web Inspector.

Desktop Safari: Pokud jste to ještě neudělali, ujistěte se, že jsou vaše vývojářské nástroje Safari povoleny. Můžete si to ověřit otevřením "Develop" na liště nabídek.

Pokud na liště nabídek nevidíte „Vývoj“, přejděte na lištu nabídky a klikněte na „Safari > Předvolby > Pokročilé“ a zaškrtněte políčko „Zobrazit nabídku vývoje na liště nabídek“.

Krok 3: Otestujte svůj web

Nyní, když máte otevřený iOS Simulator nebo máte iDevice připojené k Macu přes USB (nebo obojí!), jste připraveni začít používat Web Inspector na svém webu.

Na Macu otevřete Safari a přejděte do sekce „Vývoj“. Nyní byste měli vidět všechna iDevices (virtuální nebo skutečná), která jste připojili a spustili pomocí počítače Mac. Na níže uvedeném snímku obrazovky uvidíte, že mám v nabídce dvě zařízení: jedno je simulátor iOS a druhé je skutečný iPhone připojený k mému mac.

Chcete-li začít kontrolovat web, musíte mít na svém zařízení spuštěné mobilní Safari a mít na webu otevřenou jednu z karet. Pokud nemáte mobilní Safari, zobrazí se zpráva „No Inspectable Applications“.

Chcete-li zahájit kontrolu, jednoduše zadejte adresu URL stránky, kterou chcete zkontrolovat, v mobilním Safari a poté vyberte daný web z nabídky Vývoj. Stránky můžete začít kontrolovat na svém skutečném iDevice nebo ze simulátoru iOS. Když vyberete stránku, zobrazí se na stránce modré překrytí označující váš výběr.

Jakmile vyberete web, otevře se webový inspektor Safari a umožní vám začít kontrolovat váš web. Tady to je!

Závěr

Nyní, když máte v rukou Safari Web Inspector, máte mnohem větší kontrolu při vytváření a ladění webových stránek a webových aplikací.

Níže jsou uvedeny příklady některých věcí, které nyní můžete dělat při ladění mobilních webů:

• Proveďte změny v HTML a CSS.
• Podívejte se, jak si váš web/aplikace vede, včetně zobrazení podrobností o událostech JavaScriptu a síťových požadavcích.
• Ladění JavaScriptu pomocí bodů přerušení a dalších nástrojů.
• Zobrazit varování a chyby.
• Otevřete konzolu.
• Hledat DOM.
• Zobrazit úložiště stránek.

Máte nástroje, jděte a stavte!

Ví, že standardní prohlížeč Safari má skrytou nabídku “ Rozvoj" V tomto materiálu budeme hovořit o schopnostech této sekce.

Co je nabídka Vývoj v Safari na Macu?

Tato nabídka se bude hodit především webovým vývojářům, kteří potřebují přístup ke kódu, různým možnostem zobrazení stránek, deaktivaci obsahu a podobně. Existuje také několik užitečných funkcí pro běžné uživatele.

Z této nabídky můžete rychle spustit aktuální stránku v jakémkoli jiném prohlížeči nainstalovaném na vašem Macu. Velmi praktické, pokud Safari nedokáže přehrát žádný multimediální obsah. Pokud chcete například sledovat VR video (pro brýle pro virtuální realitu), pak se pro tento účel mnohem lépe hodí Google Chrome.

Neméně zajímavou funkcí bude režim zobrazení programového kódu stránky. Proč to může být nutné? Je tam záložka " Zdroje“, díky čemuž nebude obtížné stáhnout obrázek, který nereaguje na kliknutí pravým tlačítkem.

Užitečná je také funkce vymazání nebo zakázání mezipaměti. A občas je potřeba vypnout zobrazování obrázků nebo skriptů.

Weboví designéři přijdou na nástroje nabídky sami “ Rozvoj“, ale také bych rád poznamenal možnost spuštění režimu responzivního designu. Zobrazuje kvalitu optimalizace webové stránky podle toho, na jakém zařízení a v jakém rozlišení poběží.

Jak povolit nabídku Develop v Safari na Macu?

1 . Spusťte Safari. Vyberte sekci z panelu nabídek Safari → Předvolby nebo stiskněte klávesovou zkratku Příkaz (⌘) + , (čárka).

2 . Přejděte na " Doplňky».

3 . Úplně dole zaškrtněte políčko vedle „ Zobrazit nabídku vývojáře v pruhu nabídek».

Vše! Po těchto krocích se objeví nová sekce „ Rozvoj».

Prohlížeč Safari obsahuje několik vývojářských nástrojů, které usnadňují vytváření a ladění webových stránek. Prostřednictvím Safari si můžete například prohlédnout, jak bude web vypadat na iPhonu a iPadu. K tomu stačí zadat příslušného uživatelského agenta prostřednictvím nabídky Vývoj (obr. 7.51).

Rýže. 7.51. Výběr uživatelského agenta

Safari má také vynikající nástroj pro ladění kódu HTML a CSS zvaný Web Inspector. Chcete-li jej zavolat, vyberte nabídku Vývoj > Zobrazit Web Inspector nebo použijte kombinaci kláves Ctrl + Alt + I. Pokud tuto položku nabídky nemáte, přejděte do nastavení prohlížeče, vyberte panel Doplňky a zaškrtněte políčko vedle položky „Zobrazit nabídku Vývoj na liště nabídek“.

Webový inspektor zobrazuje seznam zdrojů nalezených na webové stránce – dokumenty, šablony stylů, obrázky a skripty. Umožňuje zobrazit a najít kód webové stránky a vlastnosti stylu prvků. Rozhraní webového inspektora je znázorněno na Obr. 7.52. Ze vší bohatosti možností programu rozložení nás zajímá pouze nabídka Elements.

Rýže. 7.52. Webový inspektor

Webový inspektor ve svém rozhraní připomíná Firebug – levý panel zobrazuje HTML kód aktuálního dokumentu a pravý panel zobrazuje styl vybraného prvku. Jakýkoli prvek na stránce lze vybrat nejen pomocí kódu, ale také pomocí nástroje umožňuje vybrat prvek pouhým kliknutím na něj.

Sada stylů v inspektoru je prezentována jako rozevírací seznam, což vám umožňuje kompaktně zahrnout velké množství informací. První položka „Vypočítaný styl“ (obr. 7.53) obsahuje styl prvku, který prohlížeč nastavuje na základě vlastního stylu s přihlédnutím k dědičnosti a přidaným vlastnostem.

Rýže. 7,53. Vypočítaný styl

Tyto styly jsou pouze pro informační účely, v tomto okamžiku nemůžete nic změnit. Na barvu, pokud je přítomna, lze kliknout a změnit její formát prezentace na hexadecimální, RGB nebo HSL.

Další položka „Atribut stylu“ zobrazuje vestavěný styl, tedy ten, který je určen prostřednictvím atributu stylu. Pokud takový styl neexistuje, bude položka prázdná.

Podkladová skupina položek zobrazuje styl aktuálního prvku a prvky s ním propojené (obr. 7.54).

Rýže. 7,54. Styl prvku

Kteroukoli vlastnost v tomto seznamu lze upravit kliknutím na ni. Univerzální vlastnosti, jako je padding nebo margin, jsou zobrazeny jako rozevírací seznam, který uvádí jednotlivé vlastnosti, jako je padding-left , padding-top , atd. Vedle každé vlastnosti je zaškrtávací políčko, které umožňuje rychle deaktivovat vlastnost. Nové pravidlo můžete přidat pomocí nabídky skryté za ozubeným kolem v pravém horním rohu panelu (obr. 7.55).

Rýže. 7,55. Nabídka pro přidání nových pravidel

Položka „Dimensions“ demonstruje blokový model prvku – šířku a výšku prvků a také hodnoty odsazení, ohraničení, okrajů a umístění (obr. 7.56).

Rýže. 7,56. Rozměry prvku

Jen mějte na paměti, že odsazení se zde nazývá vlastnosti výplně a okraje, tzn. naopak, a ne v obvyklém smyslu.

Pomocí této položky lze požadované hodnoty nejen určit, ale i nastavit. Stačí dvakrát kliknout na požadovanou hodnotu a zadat číslo. Není třeba specifikovat jednotky měření, ve výchozím nastavení se používají pixely.