Jak používat nástroje pro vývojáře webového prohlížeče

Vedle většiny prohlížečů se zaměřením na každodenní uživatele, kteří chtějí surfovat po webu, se také starají o webové vývojáře, designéry a odborníky v oblasti zabezpečování kvality, kteří pomáhají vytvářet aplikace a weby, ke kterým tito uživatelé přistupují, a to integrováním výkonných nástrojů přímo do prohlížečů oni sami.

Jsou to dny, kdy jediný programovací a testovací nástroj nalezený v prohlížeči umožnil zobrazit zdrojový kód stránky a nic víc. Dnešní prohlížeče umožňují mnohem hlubší ponorování tím, že děláte věci jako spouštění a ladění fragmentů jazyka JavaScript, kontrola a úpravy prvků DOM, sledování síťového provozu v reálném čase při načítání vaší aplikace nebo stránky, zjištění úzkých míst, analýza výkonu CSS, nepoužíváte příliš mnoho paměti nebo příliš mnoho cyklů procesoru a mnohem více. Z pohledu testování můžete reprodukovat, jak se aplikace nebo webová stránka bude zobrazovat v různých prohlížečích a na různých zařízeních a platformách díky kouzlu citlivého návrhu a vestavěných simulátorů. Nejlepší je, že můžete vše udělat bez nutnosti opustit prohlížeč!

Výukové programy níže vám pomohou získat přístup k těmto nástrojům pro vývojáře v několika populárních webových prohlížečích.

Google Chrome

Nástroje pro vývojáře prohlížeče Chrome umožňují upravit a ladit kód, prověřit jednotlivé součásti, aby se ukázaly problémy s výkonem, simulovaly různé obrazovky zařízení včetně těch, které používají Android nebo iOS, a provést několik dalších užitečných funkcí.

1. Klikněte na tlačítko hlavního menu Chrome, které je označeno třemi vodorovnými čarami a nachází se v pravém horním rohu prohlížeče.
2. Když se zobrazí rozbalovací nabídka, umístěte kurzor myši nad Více nástrojů volba.
3. Měla by se nyní zobrazit podnabídka. Vyberte volbu označenou Vývojářské nástroje . Můžete také použít tuto klávesovou zkratku místo této položky nabídky: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. Rozhraní Nástroje pro vývojáře Chrome by mělo být nyní zobrazeno, jak je ukázáno na tomto příkladu obrazovky. V závislosti na vaší verzi prohlížeče Chrome se počáteční rozvržení, které vidíte, může mírně lišit od předkládané verze. Hlavní rozbočovač nástrojů pro vývojáře, který se obvykle nachází na spodní nebo pravé straně obrazovky, obsahuje následující karty.Prvky: Poskytuje možnost kontrolovat CSS a HTML kód, stejně jako editovat CSS on-the-fly a vidět efekty změn v reálném čase.Utěšit: Konzola JavaScript jazyka Chrome umožňuje zadávání přímých příkazů i diagnostické ladění.Prameny: Umožňuje ladit JavaScript kód pomocí silného grafického rozhraní.Síť: Kategorizuje a zobrazuje podrobné informace o každé související operaci na aktivní aplikaci nebo stránce, včetně úplných záhlaví požadavků a odpovědí, stejně jako pokročilých metriky časování.Časová osa: Umožňuje hloubkovou analýzu všech aktivit, ke kterým dochází v prohlížeči, jakmile je spuštěna žádost o načtení stránky nebo aplikace.
5. Kromě těchto sekcí můžete také pomocí následujících nástrojů přistupovat k následujícím položkám >> ikonu, která se nachází napravo od Časová osa záložka.Profil: Rozloženo do Profilu CPU a Profil haldy poskytuje komplexní využití paměti a celkovou dobu provádění aktivní aplikace nebo stránky.Bezpečnostní: Zdůrazňuje problémy s certifikáty a další problémy související s bezpečností s aktivní stránkou nebo aplikací.Zdroje: Zde můžete zkontrolovat soubory cookie, místní úložiště, mezipaměť aplikací a další místní zdroje dat, které používá aktuální webová stránka nebo aplikace.Audity: Nabízí způsoby, jak optimalizovat dobu načítání stránky nebo aplikace a obecný výkon.
6. Režim zařízení umožňuje zobrazovat aktivní stránku v simulátoru, který ji vykresluje téměř přesně tak, jako by se objevil na jednom z více než tuctu zařízení, včetně několika známých modelů Android a iOS, jako jsou iPad, iPhone a Samsung Galaxy. Jste také schopni emulovat vlastní rozlišení obrazovky tak, aby odpovídala vašim konkrétním vývojovým nebo testovacím potřebám. Přepnutí Režim zařízení zapnout a vypnout, vyberte ikonu mobilního telefonu, která se nachází přímo vlevo od Prvky záložka.
7. Můžete také přizpůsobit vzhled vašich nástrojů pro vývojáře tím, že nejprve kliknete na tlačítko nabídky zobrazené třemi vertikálně umístěnými tečkami a umístíte se na pravé straně výše uvedených tabulek. Z této rozevírací nabídky můžete přemístit dok, zobrazit nebo skrýt různé nástroje a také spustit pokročilejší položky, jako je například inspektor zařízení. Zjistíte, že samotné rozhraní nástrojů dev je vysoce přizpůsobitelné prostřednictvím nastavení v této části.

Mozilla Firefox

Sekce Web Developer společnosti Firefox obsahuje nástroje pro návrháře, vývojáře a testery, jako je například editor stylů a pipety pro cílení na pixely.

Lifewire Doporučené čtení:Top 25 Greasemonkey a Tampermonkey uživatelské skripty

1. Klikněte na tlačítko hlavního menu aplikace Firefox, které je znázorněno třemi vodorovnými čarami a nachází se v pravém horním rohu okna prohlížeče.
2. Když se zobrazí rozbalovací nabídka, vyberte ikonu označenou Vývojář . The Web Developer menu by mělo být nyní zobrazeno, obsahující následující možnosti.Všimnete si, že většina položek nabídky má klávesové zkratky přidružené k nim.Přepnout nástroje: Zobrazí nebo skryje rozhraní nástrojů pro vývojáře, které jsou obvykle umístěny v dolní části okna prohlížeče. Klávesová zkratka: Mac OS X ( ALT (OPTION) + COMMAND + I ), Okna ( CTRL + SHIFT + I )Inspektor: Umožňuje prohlížet a / nebo upravovat kód CSS a HTML na aktivní stránce i na přenosném zařízení pomocí vzdáleného ladění. Klávesová zkratka: Mac OS X ( ALT (OPTION) + COMMAND + C ), Okna ( CTRL + SHIFT + C )Webová konzola: Umožňuje spustit výrazy JavaScriptu v aktivní stránce, stejně jako prohlížet různorodou sadu přihlášených dat, včetně bezpečnostních varování, síťových požadavků, zpráv CSS a dalších. Klávesová zkratka: Mac OS X ( ALT (VOLBA) + COMMAND + K ), Okna ( CTRL + SHIFT + K )Debugger: The JavaScript Debugger Umožňuje vám určit a odstranit závady nastavením hraničních bodů, kontrola uzlů DOM, externích zdrojů černého boxu a mnoho dalšího. Stejně jako v případě Inspektor , tato funkce také podporuje vzdálené ladění. Klávesová zkratka: Mac OS X ( ALT (OPTION) + COMMAND + S ), Okna ( CTRL + SHIFT + S) Editor stylů: Umožňuje vytvářet nové styly a začleňovat je do aktivní webové stránky nebo upravovat existující listy a vyzkoušet, jak se vaše změny zobrazují v prohlížeči jediným kliknutím. Klávesová zkratka: Mac OS X, Windows ( SHIFT + F7 )Výkon: Poskytuje podrobný rozpis výkonnosti sítě aktivní stránky, data rámcové rychlosti, čas a stav provedení JavaScript, blikání barev a mnoho dalšího. Klávesová zkratka: Mac OS X, Windows ( SHIFT + F5 )Síť: Zobrazí seznam všech požadavků na síť iniciovaných prohlížečem spolu s odpovídající metodou, doménou původu, typem, velikostí a uplynulým časem. Klávesová zkratka: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Okna ( CTRL + SHIFT + Q )Panel nástrojů pro vývojáře: Otevře interaktivní interpret příkazového řádku. Zadejte Pomoc do seznamu interpretů seznam všech dostupných příkazů a jejich správné syntaxe. Klávesová zkratka: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Poskytuje možnost vytvářet a spouštět webové aplikace prostřednictvím skutečného zařízení se systémem OS Firefox nebo prostřednictvím Simulátoru OS Firefoxu. Klávesová zkratka: Mac OS X, Windows ( SHIFT + F8 )Konzola prohlížeče: Poskytuje stejné funkce jako Webová konzola (viz výše). Všechna vrácená data jsou však pro celou aplikaci Firefox (včetně rozšíření a funkcí na úrovni prohlížeče) na rozdíl od aktivní webové stránky. Klávesová zkratka: Mac OS X ( SHIFT + COMMAND + J ), Okna ( CTRL + SHIFT + J )Odpovědný designový pohled: Umožňuje okamžitě zobrazit webovou stránku v různých rozlišeních, rozvržení a velikostech obrazovky, které napodobují více zařízení, včetně tablet a smartphonů. Klávesová zkratka: Mac OS X ( ALT (OPTION) + COMMAND + M ), Okna ( CTRL + SHIFT + M )Kapátko: Zobrazuje hexadecimální barevný kód pro jednotlivé vybrané pixely.Scratchpad: Umožňuje psát, upravovat, integrovat a spouštět úryvky kódu JavaScript z okna vyskakovacího okna Firefoxu. Klávesová zkratka: Mac OS X, Windows ( SHIFT + F4 )Zdroj stránky: Původní nástroj pro vývojáře založený na prohlížeči, tato volba jednoduše zobrazí dostupný zdrojový kód pro aktivní stránku. Klávesová zkratka: Mac OS X ( COMMAND + U ), Okna ( CTRL + U )Získejte více nástrojů: Otevře okno Nástroje pro vývojáře webu sbírka na oficiálních stránkách doplňků Mozilly, která obsahuje zhruba tucet populárních rozšíření, například Firebug a Greasemonkey.

Microsoft Edge / Internet Explorer

Běžně označováno jako Vývojářské nástroje F12 , úcta ke klávesové zkratce, která spustila rozhraní od dřívějších verzí aplikace Internet Explorer, sadu nástrojů dev v IE11 a Microsoft Edge, se od svého založení po dlouhou dobu rozšířila tím, že nabízí velmi užitečnou skupinu monitorů, ladicích programů, emulátorů a na -the-fly kompilátory.

1. Klikněte na tlačítko Více akcí menu, představované třemi tečkami a umístěné v pravém horním rohu okna prohlížeče. Když se zobrazí rozbalovací nabídka, vyberte možnost označenou Vývojářské nástroje F12 . Jak jsem již zmínil, můžete také přistupovat k nástrojům prostřednictvím F12 klávesová zkratka.
2. Rozhraní pro vývoj by nyní mělo být zobrazeno, obvykle v dolní části okna prohlížeče. K dispozici jsou následující nástroje, z nichž každý je k dispozici klepnutím na příslušnou záhlaví karty nebo pomocí doprovodné klávesové zkratky.DOM Explorer: Umožňuje editovat styly a HTML na aktivní stránce a upravovat výsledky tak, jak se pohybujete. Využívá funkce IntelliSense k automatickému dokončení kódu, je-li to možné. Klávesová zkratka: (CTRL + 1) Utěšit: Poskytuje možnost odesílat informace o ladění včetně čítačů, časovačů, stop a přizpůsobených zpráv pomocí integrovaného rozhraní API. Také vám umožňuje vstřikovat kód do aktivní webové stránky a upravovat hodnoty přiřazené jednotlivým proměnným v reálném čase. Klávesová zkratka: (CTRL + 2) Debugger: Umožňuje nastavit zarážky a ladit váš kód při jeho spouštění, pokud je to nutné. Klávesová zkratka: (CTRL + 3) Síť: Zobrazí seznam všech požadavků na síť, které inicioval prohlížeč při načítání a spuštění stránky, včetně detailů protokolu, typu obsahu, využití šířky pásma a mnoho dalšího. Klávesová zkratka: (CTRL + 4) Výkon: Podrobnosti o rychlostech snímků, využití CPU a dalších metrikách souvisejících s výkonem, které vám pomohou urychlit čas načítání stránky a další aktivity. Klávesová zkratka: (CTRL + 5) Paměť: Pomáhá vám izolovat a napravit potenciální úniky paměti na aktuální webové stránce zobrazením časové osy využití paměti spolu s snímky z různých časových intervalů. Klávesová zkratka: (CTRL + 6) Emulace: Zobrazuje, jak by se mohla zobrazovat aktivní stránka v různých rozlišeních a velikostech obrazovky, emulovat chytré telefony, tablety a další zařízení. Umožňuje také měnit uživatelský agent a orientaci stránky a také simulovat různé geolokace zadáním zeměpisné šířky a délky. Klávesová zkratka: (CTRL + 7)
3. Zobrazí se Utěšit zatímco v některém z ostatních nástrojů klikněte na čtvercové tlačítko s pravou konzolu uvnitř, umístěné v pravém horním rohu rozhraní vývojových nástrojů.
4. Chcete-li odpojit, rozhraní nástrojů pro vývojáře se stane samostatným oknem, klikněte na tlačítko reprezentované dvěma kaskádovými obdélníky nebo použijte následující klávesovou zkratku: CTRL + P . Nástroje můžete vrátit zpět do původního umístění stisknutím tlačítka CTRL + P podruhé.

Apple Safari (pouze OS X)

Safari je různorodý dev nástroj reflektuje velké vývojářské komunity, která využívá Mac pro jejich design a potřeby programování. Kromě výkonné konzoly a tradičních funkcí protokolování a ladění jsou k dispozici také snadno reagující návrhový režim a nástroj pro vytváření vlastních rozšíření prohlížeče.

1. Klikněte na Safari v nabídce prohlížeče umístěném v horní části obrazovky. Když se zobrazí rozevírací nabídka, vyberte možnost Předvolby . K této položce nabídky můžete také použít následující klávesovou zkratku: COMMAND + COMMA (,)
2. Safari je Předvolby rozhraní by mělo být nyní zobrazeno a překrývat okno prohlížeče. Klikněte na tlačítko Pokročilý ikonu, která se nachází na pravé straně záhlaví.
3. The Pokročilý předvolby by nyní měly být viditelné. V dolní části obrazovky je označena možnost Zobrazte nabídku Vývoj v panelu nabídek , doprovázené zaškrtávací políčko. Pokud v poli není zaškrtnuto žádné políčko, klikněte jednou na něj a umístěte tam jednu.
4. Zavři Předvolby rozhraní kliknutím na červenou značku "x" v levém horním rohu.
5. Nyní byste si měli všimnout nové možnosti v nabídce prohlížeče Rozvíjet , který se nachází mezi Záložky a Okno . Klikněte na tuto položku nabídky. Měla by se nyní zobrazit rozbalovací nabídka obsahující následující možnosti.Otevřít stránku s: Umožňuje otevřít aktivní webovou stránku v jednom z ostatních prohlížečů, které jsou aktuálně nainstalovány v počítači Mac.Uživatelský agent: Umožňuje vybrat z více než tuctu předdefinovaných hodnot agentů, včetně několika verzí prohlížeče Chrome, Firefox a Internet Explorer, a zároveň definovat vlastní vlastní řetězec.Zadejte reaktivní režim návrhu: Vykreslí aktuální stránku tak, jak by se objevila na různých zařízeních a při různých rozlišeních na obrazovce.Zobrazit webový inspektor: Spustí hlavní rozhraní nástrojů Safari dev, které jsou obvykle umístěny v dolní části obrazovky prohlížeče a obsahují následující oddíly: Prvky , Síť , Zdroje , Časové osy , Debugger , Úložný prostor , Utěšit .Zobrazit chybovou konzolu: Také spustí rozhraní dev nástrojů, přímo na Utěšit záložku, která zobrazuje chyby, varování a jiná data prohledávatelného protokolu.Zobrazit zdroj stránky: Otevře okno Zdroje záložka, která zobrazuje zdrojový kód aktivní stránky kategorizované podle dokumentu.Zobrazit zdroje stránek: Provádí stejnou funkci jako Zobrazit zdroj stránky volba.Zobrazit editor úryvků: Otevře nové okno, ve kterém můžete zadat kód CSS a HTML a náhled jeho výstupu okamžitě.Zobrazit rozšíření Builder: Poskytuje možnost vytvářet nebo upravovat rozšíření Safari pomocí CSS, HTML a JavaScript.Zobrazit záznam časové osy: Otevře okno Časové osy a začne zobrazovat informace o síti, rozložení a vykreslování, stejně jako spuštění v reálném čase.Prázdné mezipaměti: Vymaže celou mezipaměť, která se momentálně ukládá na pevný disk.Zakázat mezipaměti: Zastaví Safari z ukládání do mezipaměti, takže veškerý obsah je načten ze serveru po každém načtení stránky.Zakázat obrázky: Zabraňuje zobrazování obrázků na všech webových stránkách.Zakázat styly: Ignoruje vlastnosti CSS při načtení stránky.Zakázat JavaScript: Omezuje výkon JavaScript na všech stránkách.Zakázat rozšíření: Zakazuje spuštění všech nainstalovaných rozšíření v prohlížeči.Zakázat hackety specifické pro web: Pokud byla aplikace Safari upravena tak, aby explicitně řešila problémy specifické pro aktivní webovou stránku, tato možnost zablokuje tyto změny tak, aby se stránka načte tak, jak by měla před zavedením těchto změn.Zakázání omezení místních souborů: Umožňuje prohlížeči mít přístup k souborům na místních discích, což je z bezpečnostních důvodů implicitně zakázáno.Zakázat omezování původu: Tato omezení jsou zavedena ve výchozím nastavení, aby se zabránilo XSS a dalším potenciálním nebezpečím. Často je však třeba dočasně zakázat pro rozvojové účely.Povolit JavaScript z pole Smart Search: Pokud je povoleno, poskytuje možnost zadávat adresy URL javascript: zabudován přímo do adresního řádku.Otestujte certifikáty SHA-1 jako neohrožené: SSL certifikáty používající algoritmus SHA-1 jsou obecně považovány za zastaralé a zranitelné.