Integrované sady nástrojů pro webové návrháře, vývojáře a testery
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í.
- 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.
- Když se objeví rozbalovací nabídka, umístěte kurzor myši na možnost Více nástrojů .
- Měla by se nyní zobrazit podnabídka. Vyberte volbu Nástroje pro vývojáře . 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 )
- 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.
Elements: 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.
Konzola: Konzola JavaScript v prohlížeči Chrome umožňuje zadávání přímých příkazů i diagnostické ladění.
Zdroje: 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é metriky časování.
Časová osa: Umožňuje hloubkovou analýzu každé činnosti, která proběhne v prohlížeči, jakmile je spuštěna žádost o načtení stránky nebo aplikace. - Kromě těchto úseků můžete také přistupovat k následujícím nástrojům pomocí ikony >> , umístěné napravo od karty Časová osa .
Profil: Rozdělený do profilů CPU a sekcí profilu haldy poskytuje komplexní využití paměti a celkovou dobu provádění aktivní aplikace nebo stránky.
Zabezpečení: upozorňuje na problémy s certifikáty a další problémy související s bezpečností s aktivní stránkou nebo aplikací.
Zdroje: Zde můžete prohlížet 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. - Režim zařízení vám umožňuje zobrazit aktivní stránku v simulátoru, který ji vykresluje téměř přesně tak, jak 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. Chcete-li zapnout nebo vypnout režim zařízení , vyberte ikonu mobilního telefonu, která se nachází přímo vlevo od karty Prvky .
- 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.
Doporučené čtení: Top 25 Greasemonkey a Tampermonkey uživatelské skripty
- 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.
- Když se zobrazí rozbalovací nabídka, vyberte ikonu označenou Vývojář . Zobrazí se nabídka Web Developer , která obsahuje 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 ), Windows ( 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 ), Windows ( CTRL + SHIFT + C )
Webová konzola: Umožňuje spustit výrazy jazyka JavaScript na aktivní stránce, stejně jako prohlížet různorodou sadu přihlášených dat včetně upozornění na zabezpečení, síťových požadavků, zpráv CSS a dalších. Klávesová zkratka: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: Debugger JavaScript vám umožňuje přesně určit a opravit závady nastavením zarážky, kontrola uzlů DOM, externích zdrojů černého boxu a mnoho dalšího. Stejně jako u inspektora , tato funkce také podporuje vzdálené ladění. Klávesová zkratka: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( 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 vykreslují v prohlížeči pomocí jediného kliknutí. Klávesová zkratka: Mac OS X, Windows ( SHIFT + F7 )
Výkon: Poskytuje detailní rozpis výkonnosti sítě aktivní stránky, data o snímkové frekvenci, čas a stav provádění JavaScript, blikání barvy 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 ), Windows ( CTRL + SHIFT + Q )
Panel nástrojů pro vývojáře: Otevře interaktivní interpret příkazového řádku. Zadejte nápovědu do tlumočníka, kde naleznete seznam všech dostupných příkazů a jejich správnou syntaxi. 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 stejnou funkcionalitu jako webová konzole (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 ), Windows ( CTRL + SHIFT + J )
Odpovídající návrhový 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 ), Windows ( CTRL + SHIFT + M )
Kvapkadlo: 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 ), Windows ( CTRL + U )
Získejte více nástrojů: Otevírá kolekci nástrojů vývojáře webových stránek na oficiálních stránkách doplňků Mozilly , které obsahují asi tucet populárních rozšíření, jako například Firebug a Greasemonkey.
Microsoft Edge / Internet Explorer
Běžně označovaný jako vývojářské nástroje F12 , poctu ke klávesové zkratce, která spustila rozhraní od dřívějších verzí aplikace Internet Explorer, dev nástrojů v IE11 a Microsoft Edge prošel od svého vzniku velmi dlouhou cestou nabídnutím velmi užitečné skupiny monitory, ladicí programy, emulátory a překladače.
- Klikněte na nabídku Více akcí , které jsou znázorněny třemi tečkami a nacházejí se v pravém horním rohu okna prohlížeče. Když se zobrazí rozbalovací nabídka, vyberte možnost označenou jako Nástroje pro vývojáře F12 . Jak jsem již zmínil, můžete také přistupovat k nástrojům prostřednictvím klávesové zkratky F12 .
- 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 stylové stránky a HTML na aktivní stránce, čímž upravujete výsledky. Využívá funkce IntelliSense k automatickému dokončení kódu, je-li to možné. Klávesová zkratka: (CTRL + 1)
Konzola: Poskytuje možnost odesílat informace o ladění včetně čítačů, časovačů, stop a přizpůsobených zpráv prostřednictvím 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 spuštění, podle potřeby řádkem podle řádku. Klávesová zkratka: (CTRL + 3)
Síť: Vypisuje každou síťovou žádost iniciovanou prohlížečem během načítání a spuštění stránky, včetně podrobností o 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 se 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) - Chcete-li zobrazit konzolu v rámci kteréhokoli z ostatních nástrojů, klikněte na čtvercové tlačítko s pravou konzolu uvnitř, která se nachází v pravém horním rohu rozhraní vývojových nástrojů.
- Chcete-li odpojit, rozhraní nástrojů pro vývojáře se stává samostatným oknem, klikněte na tlačítko představované dvěma kaskádovými obdélníky nebo použijte následující klávesové zkratky: CTRL + P. Nástroje můžete vrátit zpět do původního umístění stisknutím kláves 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.
- V prohlížeči, který se nachází v horní části obrazovky, klikněte na položku Safari . Když se zobrazí rozbalovací 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 (,)
- Rozhraní Safari's Preferences by nyní mělo být zobrazeno a překrývat okno prohlížeče. Klikněte na ikonu Pokročilé , umístěné na pravé straně záhlaví.
- Rozšířené předvolby by měly být nyní viditelné. Ve spodní části této obrazovky je v nabídce s nabídkou Zobrazit vylepšení doplněno 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.
- Zavřete rozhraní Předvolby klepnutím na červenou značku "x" v levém horním rohu.
- Nyní byste si měli všimnout nové možnosti v nabídce prohlížeče s názvem Develop , umístěné mezi záložkami a oknem . 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.
Agent uživatele: Umožňuje vybrat z více než tuctu předem definovaných hodnot agentů, včetně několika verzí prohlížeče Chrome, Firefox a Internet Explorer, a 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 obrazovky.
Zobrazit inspektora webu: 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: Elements , Network , Resources , Timeline , Debugger , Storage , Console .
Zobrazit chybovou konzolu: také spouští rozhraní dev tools, přímo na záložce Console, která zobrazuje chyby, varování a další data protokolu prohledávatelných.
Zobrazit zdrojový kód stránky: Otevře záložku Zdroje , která zobrazuje zdrojový kód aktivní stránky kategorizované podle dokumentu.
Zobrazit zdroje stránek: Provádí stejnou funkci jako možnost Zobrazit zdroj stránky .
Zobrazit editor úryvků: Otevře nové okno, ve kterém můžete zadat kód CSS a HTML a náhled náhledu jeho výstupu.
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 se záložka Časová osa a začne zobrazovat v reálném čase požadavky na síť, informace o uspořádání a vykreslování, stejně jako spuštění JavaScript.
Prázdné mezipaměti: Vymaže celou mezipaměť, která je právě uložena na pevném disku.
Zakázat mezipaměti: Zastaví Safari z ukládání do mezipaměti, aby byl veškerý obsah 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: Omezení výkonu 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ázání hacků specifických pro danou webovou stránku : Pokud byl nástroj Safari upraven tak, aby explicitně řešil 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 - akci, která je z bezpečnostních důvodů standardně omezena.
Zakázat omezování původního původu: Tato omezení jsou ve výchozím nastavení zavedena, aby se zabránilo vzniku XSS a dalších potenciálních nebezpečí. Často je však třeba dočasně zakázat pro rozvojové účely.
Povolit JavaScript z inteligentního vyhledávacího pole: Pokud je povoleno, umožňuje zadávat adresy URL pomocí javascriptu: zabudované přímo do adresního řádku.
Chraňte 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é.