Ako používať Vývojárske nástroje webového prehliadača

2024 Autor: Abigail Brown | [email protected]. Naposledy zmenené: 2024-01-07 19:06

Popri väčšine výrobcov prehliadačov, ktorí sa zameriavajú na bežných používateľov, ktorí chcú surfovať na webe, sa venujú aj webovým vývojárom, dizajnérom a profesionálom na zabezpečenie kvality, ktorí pomáhajú vytvárať aplikácie a stránky, ku ktorým títo používatelia pristupujú, integráciou výkonných nástroje priamo do samotných prehliadačov.

Preč sú dni, keď vám jediné programovacie a testovacie nástroje v prehliadači umožňovali zobraziť zdrojový kód stránky a nič viac. Dnešné prehliadače vám umožňujú ponoriť sa oveľa hlbšie tým, že robíte veci, ako je spúšťanie a ladenie úryvkov JavaScriptu, kontrola a úprava prvkov DOM, monitorovanie sieťovej prevádzky v reálnom čase pri načítavaní vašej aplikácie alebo stránky s cieľom identifikovať prekážky, analyzovať výkon CSS a zabezpečiť, aby bol váš kód nevyužíva príliš veľa pamäte alebo príliš veľa cyklov CPU a oveľa viac.

Z hľadiska testovania môžete pomocou kúzla responzívneho dizajnu a vstavaných simulátorov reprodukovať, ako sa aplikácia alebo webová stránka vykreslí v rôznych prehliadačoch, ako aj na rôznych zariadeniach a platformách. Najlepšie na tom je, že to všetko môžete urobiť bez toho, aby ste museli opustiť prehliadač!

Návody uvedené nižšie vás prevedú, ako získať prístup k týmto vývojárskym nástrojom v niekoľkých populárnych webových prehliadačoch.

Google Chrome

Nástroje pre vývojárov prehliadača Chrome vám umožňujú upravovať a ladiť kód, auditovať jednotlivé komponenty, aby sa odhalili problémy s výkonom, simulovať obrazovky rôznych zariadení vrátane obrazoviek so systémom Android alebo iOS a vykonávať niekoľko ďalších užitočných funkcií.

1. Vyberte hlavnú ponuku prehliadača Chrome, ktorá je označená tromi vodorovnými čiarami a nachádza sa v pravom hornom rohu prehliadača.

2. Keď sa zobrazí rozbaľovacia ponuka, umiestnite kurzor myši na možnosť Viac nástrojov.

   

3. Teraz by sa mala zobraziť podponuka. Vyberte možnosť označenú Nástroje pre vývojárov. Namiesto tejto položky ponuky môžete použiť aj nasledujúcu klávesovú skratku: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Rozhranie nástrojov pre vývojárov prehliadača Chrome by sa teraz malo zobraziť, ako je znázornené na tomto príklade snímky obrazovky. V závislosti od vašej verzie prehliadača Chrome sa počiatočné rozloženie, ktoré vidíte, môže mierne líšiť od rozloženia tu. Hlavné centrum nástrojov pre vývojárov, ktoré sa zvyčajne nachádza v spodnej alebo pravej časti obrazovky, obsahuje nasledujúce karty.

5. Okrem týchto sekcií máte tiež prístup k nasledujúcim nástrojom cez ikonu >>, ktorá sa nachádza napravo od Performance tab.

   • Memory: Monitorujte a zaznamenávajte využitie pamäte na webovej stránke. Môžete vidieť, aký náročný je JavaScript na vašej stránke.
   • Zabezpečenie: Zdôrazňuje problémy s certifikátmi a iné problémy súvisiace so zabezpečením aktívnej stránky alebo aplikácie.
   • Aplikácia: Kontrola zdrojov používaných webovou aplikáciou. Získajte úplný rozpis toho, čo sa používa.
   • Audits: Ponúka spôsoby, ako optimalizovať čas načítania stránky alebo aplikácie a celkový výkon.

   

6. Režim zariadenia vám umožňuje zobraziť aktívnu stránku v simulátore, ktorý ju vykreslí takmer presne tak, ako by vyzerala na jednom z viac ako tuctu zariadení vrátane niekoľkých známych zariadení so systémom Android a modely iOS, ako sú iPad, iPhone a Samsung Galaxy. Máte tiež možnosť emulovať vlastné rozlíšenia obrazovky, aby vyhovovali vašim konkrétnym vývojovým alebo testovacím potrebám.

   Ak chcete zapnúť a vypnúť Režim zariadenia, vyberte ikonu mobilného telefónu umiestnenú priamo naľavo od Karta Elements.

   

7. Vzhľad a štýl svojich vývojárskych nástrojov si môžete prispôsobiť aj tak, že najskôr vyberiete tlačidlo ponuky reprezentované tromi zvisle umiestnenými bodkami a nachádza sa úplne na pravej strane vyššie uvedených kariet.

   V tejto rozbaľovacej ponuke môžete zmeniť polohu doku, zobraziť alebo skryť rôzne nástroje, ako aj spustiť pokročilejšie položky, ako je napríklad inšpektor zariadenia. Zistíte, že samotné rozhranie nástrojov pre vývojárov je vysoko prispôsobiteľné prostredníctvom nastavení v tejto sekcii.

   

Mozilla Firefox

Sekcia pre vývojárov webu Firefoxu obsahuje nástroje pre dizajnérov, vývojárov aj testerov, ako je editor štýlov a kvapkadlo na zacielenie na pixely.

1. Vyberte hlavnú ponuku prehliadača Firefox, ktorú predstavujú tri vodorovné čiary a nachádza sa v pravom hornom rohu okna prehliadača.

2. Keď sa zobrazí rozbaľovacia ponuka, vyberte Web Developer.

   

3. Teraz by sa mala zobraziť ponuka Web Developer s nasledujúcimi možnosťami. Všimnite si, že väčšina položiek ponuky má priradené klávesové skratky.

   • Toggle Tools: Zobrazí alebo skryje rozhranie nástrojov pre vývojárov, ktoré sa zvyčajne nachádza v spodnej časti okna prehliadača. Klávesová skratka: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Umožňuje vám skontrolovať a/alebo upraviť kód CSS a HTML na aktívnej stránke, ako aj na prenosnom zariadení prostredníctvom vzdialeného ladenia. Klávesová skratka: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Webová konzola: Umožňuje spúšťať výrazy JavaScript na aktívnej stránke, ako aj kontrolovať rôznorodú množinu zaznamenaných údajov vrátane bezpečnostných upozornení, sieťových požiadaviek, správ CSS a ďalších. Klávesová skratka: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: Debugger JavaScript vám umožňuje presne určiť a opraviť chyby nastavením bodov prerušenia, kontrolou uzlov DOM, externými zdrojmi čierneho boxu a oveľa viac. Rovnako ako v prípade Inspectora, aj táto funkcia podporuje vzdialené ladenie. Klávesová skratka: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Editor štýlov: Umožňuje vám vytvárať nové šablóny štýlov a začleniť ich do aktívnej webovej stránky alebo upravovať existujúce hárky a testovať, ako sa vaše zmeny vykreslia v prehliadači jediným kliknutím. Klávesová skratka: Mac OS X, Windows (SHIFT+F7)
   • Výkon: Poskytuje podrobný rozpis výkonu siete aktívnej stránky, údajov o snímkovej frekvencii, času a stavu spustenia JavaScriptu, blikania farby a mnoho ďalšieho. Klávesová skratka: Mac OS X, Windows (SHIFT+F5)
   • Network: Uvádza každú sieťovú požiadavku iniciovanú prehliadačom spolu s príslušnou metódou, pôvodnou doménou, typom, veľkosťou a uplynulým časom. Klávesová skratka: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Inšpektor úložiska: Pozrite sa na vyrovnávaciu pamäť a súbory cookie, ktoré webová lokalita ukladá. Klávesová skratka: (SHIFT+F9)
   • Panel s nástrojmi pre vývojárov: Otvorí interaktívny interpret príkazového riadku. Zadajte help do tlmočníka pre zoznam všetkých dostupných príkazov a ich správnu syntax. Klávesová skratka: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Poskytuje možnosť vytvárať a spúšťať webové aplikácie prostredníctvom skutočného zariadenia s operačným systémom Firefox OS alebo prostredníctvom simulátora operačného systému Firefox. Klávesová skratka: Mac OS X, Windows (SHIFT+F8)
   • Konzola prehliadača: Poskytuje rovnakú funkčnosť ako Web Console (pozri vyššie). Všetky vrátené údaje sa však týkajú celej aplikácie Firefox (vrátane rozšírení a funkcií na úrovni prehliadača), nie iba aktívnej webovej stránky. Klávesová skratka: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Zobrazenie responzívneho dizajnu: Umožňuje vám okamžite zobraziť webovú stránku v rôznych rozlíšeniach, rozloženiach a veľkostiach obrazovky, aby napodobňovali viaceré zariadenia vrátane tabletov a smartfónov. Klávesová skratka: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Kvapkadlo: Zobrazuje hexadecimálny kód farby pre jednotlivo vybrané pixely.
   • Scratchpad: Aplikácia Scratchpad vám umožňuje písať, upravovať, integrovať a spúšťať útržky kódu JavaScript z rozbaľovacieho okna Firefoxu. Otvorte interaktívny dokument JavaScript, ktorý vám umožní písať kód a otestovať ho na webovej lokalite. Klávesová skratka: (SHIFT+F4)
   • Servisní pracovníci: Odlaďte servisným pracovníkom vašu webovú aplikáciu. Získajte podrobné informácie o ich výkone a chybách.
   • Zdroj stránky: Pôvodný vývojársky nástroj založený na prehliadači, táto možnosť jednoducho zobrazuje dostupný zdrojový kód pre aktívnu stránku. Klávesová skratka: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Získať ďalšie nástroje: Otvorí kolekciu Web Developer's Toolbox na oficiálnej stránke doplnkov Mozilly, ktorá obsahuje asi tucet populárnych rozšírení, napr. ako Firebug a Greasemonkey.

   

Microsoft Edge/Internet Explorer

Bežne označované ako F12 Developer Tools, pocta klávesovej skratke, ktorá spúšťala rozhranie od starších verzií Internet Explorera, sady nástrojov pre vývojárov v IE11 a Microsoft Edge prešla od svojho vzniku dlhú cestu tým, že ponúka veľmi šikovnú skupinu monitorov, debuggerov, emulátorov a kompilátorov za chodu.

Microsoft už nepodporuje Internet Explorer a odporúča vám aktualizovať na novší prehliadač Edge. Prejdite na ich stránku a stiahnite si najnovšiu verziu.

1. Vyberte Viac akcií, ktoré predstavujú tri bodky a nachádzajú sa v pravom hornom rohu okna prehliadača.

   

2. Keď sa zobrazí rozbaľovacia ponuka, vyberte možnosť označenú Nástroje pre vývojárov.

   

3. Rozhranie vývoja by sa teraz malo zobraziť, zvyčajne v spodnej časti okna prehliadača. K dispozícii sú nasledujúce nástroje, z ktorých každý je dostupný kliknutím na príslušný nadpis karty alebo pomocou sprievodnej klávesovej skratky.

   

   • Prieskumník DOM: Umožňuje vám upravovať šablóny so štýlmi a HTML na aktívnej stránke a vykresľovať upravené výsledky za pochodu. V prípade potreby využíva funkciu IntelliSense na automatické dopĺňanie kódu. Klávesová skratka: (CTRL+1)
   • Konzola: Poskytuje možnosť odosielať informácie o ladení vrátane počítadiel, časovačov, stôp a prispôsobených správ prostredníctvom integrovaného rozhrania API. Umožňuje tiež vložiť kód do aktívnej webovej stránky a v reálnom čase upravovať hodnoty priradené jednotlivým premenným. Klávesová skratka: (CTRL+2)
   • Debugger: Umožňuje vám nastaviť prerušovacie body a ladiť váš kód počas jeho vykonávania, v prípade potreby riadok po riadku. Klávesová skratka: (CTRL+3)
   • Network: Uvádza každú sieťovú požiadavku iniciovanú prehliadačom počas načítania a vykonávania stránky vrátane podrobností o protokole, type obsahu, využití šírky pásma a oveľa viac. Klávesová skratka: (CTRL+4)
   • Výkon: Podrobnosti o snímkových frekvenciách, využití procesora a ďalších metrikách súvisiacich s výkonom, ktoré vám pomôžu urýchliť načítanie stránky a ďalšie aktivity. Klávesová skratka: (CTRL+5)
   • Memory: Pomáha vám izolovať a opraviť potenciálne úniky pamäte na aktuálnej webovej stránke zobrazením časovej osi využitia pamäte spolu so snímkami z rôznych časových intervalov. Klávesová skratka: (CTRL+6)
   • Emulation: Ukazuje, ako by sa aktívna stránka vykresľovala v rôznych rozlíšeniach a veľkostiach obrazovky, pričom emuluje smartfóny, tablety a iné zariadenia. Poskytuje tiež možnosť upraviť používateľského agenta a orientáciu stránky, ako aj simulovať rôzne geolokácie zadaním zemepisnej šírky a dĺžky. Klávesová skratka: (CTRL+7)

4. Ak chcete zobraziť Konzolu v ktoromkoľvek z iných nástrojov, stlačte štvorcové tlačidlo s pravou zátvorkou vo vnútri, ktoré sa nachádza v v pravom hornom rohu rozhrania vývojových nástrojov.

   

5. Ak chcete odpojiť rozhranie nástrojov pre vývojárov, aby sa zmenilo na samostatné okno, vyberte dva kaskádovité obdĺžniky alebo použite nasledujúcu klávesovú skratku: CTRL+P. Nástroje môžete vrátiť na pôvodné miesto stlačením CTRL+P druhýkrát.

   

Apple Safari (iba Mac)

Rozmanitá súprava vývojárskych nástrojov Safari odzrkadľuje veľkú komunitu vývojárov, ktorí využívajú Mac na svoje dizajnérske a programovacie potreby. Okrem výkonnej konzoly a tradičných funkcií protokolovania a ladenia je k dispozícii aj ľahko použiteľný režim responzívneho dizajnu a nástroj na vytváranie vlastných rozšírení prehliadača.

1. V ponuke prehliadača v hornej časti obrazovky vyberte Safari. Keď sa zobrazí rozbaľovacia ponuka, vyberte Preferences. Namiesto tejto položky ponuky môžete použiť aj nasledujúcu klávesovú skratku: COMMAND+COMMA(,)

   

2. Rozhranie Preferences by sa teraz malo zobraziť a prekryť okno prehliadača. Vyberte ikonu Rozšírené, ktorá sa nachádza úplne na pravej strane hlavičky.

   

3. Predvoľby Advanced by teraz mali byť viditeľné. V spodnej časti tejto obrazovky je možnosť označená ako Zobraziť ponuku vývoja na paneli ponuky spolu so začiarkavacím políčkom. Ak sa v poli nezobrazuje žiadna značka začiarknutia, kliknite na ňu raz a umiestnite ju tam.

   

4. Zatvorte rozhranie Preferencie.

5. Teraz by ste si mali všimnúť novú možnosť v ponuke prehliadača s názvom Develop, ktorá sa nachádza medzi Záložkami a oknom. Kliknite na túto položku ponuky. Teraz by sa mala zobraziť rozbaľovacia ponuka obsahujúca nasledujúce možnosti.

   • Otvoriť stránku s: Umožňuje vám otvoriť aktívnu webovú stránku v jednom z iných prehliadačov aktuálne nainštalovaných na vašom Macu.
   • User Agent: Umožňuje vám vybrať si z viac ako tuctu preddefinovaných hodnôt používateľského agenta vrátane niekoľkých verzií prehliadačov Chrome, Firefox a Internet Explorer, ako aj definovať svoje vlastné reťazec.
   • Vstúpte do režimu responzívneho dizajnu: Vykreslí aktuálnu stránku tak, ako by vyzerala na rôznych zariadeniach a pri rôznych rozlíšeniach obrazovky.
   • Show Web Inspector: Spustí hlavné rozhranie pre vývojárske nástroje Safari, ktoré sa zvyčajne nachádza v spodnej časti obrazovky prehliadača a obsahuje nasledujúce sekcie: Prvky, Sieť, Zdroje, Časové osi, Debugger, Storage, Console.
   • Show Error Console: Spustí tiež rozhranie nástrojov pre vývojárov, priamo na kartu Console, ktorá zobrazuje chyby, upozornenia a ďalšie možnosti vyhľadávania údaje denníka.
   • Zobraziť zdroj stránky: Otvorí kartu Zdroje, ktorá zobrazuje zdrojový kód pre aktívnu stránku kategorizovanú podľa dokumentu.
   • Zobraziť zdroje stránky: Vykonáva rovnakú funkciu ako možnosť Zobraziť zdroj stránky.
   • Zobraziť editor úryvkov: Otvorí nové okno, v ktorom môžete zadať kód CSS a HTML a zobraziť ukážku jeho výstupu za behu.
   • Show Extension Builder: Poskytuje možnosť vytvárať alebo upravovať rozšírenia Safari pomocou CSS, HTML a JavaScript.
   • Zobraziť záznam časovej osi: Otvorí kartu Časové osy a začne zobrazovať sieťové požiadavky, rozloženie a informácie o vykresľovaní, ako aj spustenie JavaScriptu v reálnom čase.
   • Empty Caches: Vymaže celú vyrovnávaciu pamäť, ktorá je momentálne uložená na vašom pevnom disku.
   • Zakázať vyrovnávacie pamäte: Zastaví Safari ukladanie do vyrovnávacej pamäte, aby sa všetok obsah načítal zo servera pri každom načítaní stránky.
   • Zakázať obrázky: Zabraňuje vykresľovaniu obrázkov na všetkých webových stránkach.
   • Zakázať štýly: Ignoruje vlastnosti CSS pri načítaní stránky.
   • Zakázať JavaScript: Obmedzí spustenie JavaScriptu na všetkých stránkach.
   • Zakázať rozšírenia: Zakáže spustenie všetkých nainštalovaných rozšírení v prehliadači.
   • Zakázať hacky špecifické pre lokalitu: Ak bolo Safari upravené tak, aby explicitne riešilo problémy špecifické pre aktívnu webovú stránku, táto možnosť zablokuje tieto zmeny, takže stránka zaťaží tak, ako by to bolo pred zavedením týchto úprav.
   • Zakázať obmedzenia miestnych súborov: Umožňuje prehliadaču získať prístup k súborom na lokálnych diskoch, čo je akcia, ktorá je z bezpečnostných dôvodov predvolene obmedzená.
   • Zakázať obmedzenia krížového pôvodu: Tieto obmedzenia sú štandardne zavedené, aby sa predišlo XSS a iným potenciálnym nebezpečenstvám. Často ich však treba dočasne deaktivovať na účely vývoja.
   • Povoliť JavaScript z poľa inteligentného vyhľadávania: Ak je povolené, poskytuje možnosť zadávať adresy URL pomocou javascriptu: začleneného priamo do panela s adresou.
   • Považujte certifikáty SHA-1 za nezabezpečené: Certifikáty SSL využívajúce algoritmus SHA-1 sa všeobecne považujú za zastarané a zraniteľné.