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

Integrované sady nástrojov pre návrhárov webu, vývojárov a testery

Okrem väčšiny prehliadačov, ktorí sa zameriavajú na každodenného používateľa, ktorý sa snaží surfovať po webe, sa tiež starajú o vývojárov webových stránok, návrhárov a profesionálov zabezpečujúcich kvalitu, ktorí pomáhajú budovať aplikácie a lokality, ktoré majú prístup k týmto používateľom, integráciou výkonných nástrojov do prehľadávačov samotných.

Preč sú dni, v ktorých sa v prehliadači nachádzali iba nástroje na programovanie a testovanie, ktoré umožňujú zobraziť zdrojový kód stránky a nič viac. Dnešné prehliadače vám umožňujú hlbšie ponoriť tým, že vykonávate a ladíte úryvky JavaScript, kontrolujete a upravujete prvky DOM, monitorujete sieťovú prevádzku v reálnom čase, keď sa vaša aplikácia alebo stránka načíta, identifikuje prekážky, analyzuje výkonnosť CSS, zaisťuje, že je váš kód nepoužívajú príliš veľa pamäte alebo príliš veľa cyklov CPU a oveľa viac. Z hľadiska testovania môžete reprodukovať spôsob, akým aplikácia alebo webová stránka bude vykresľovať v rôznych prehliadačoch, ako aj na rôznych zariadeniach a platformách, a to prostredníctvom kouzla citlivého dizajnu a zabudovaných simulátorov. Najlepšie je, že môžete urobiť všetko bez toho, aby ste museli opustiť váš prehliadač!

Naučenia nižšie vám pomôžu získať prístup k týmto nástrojom pre vývojárov v niekoľkých populárnych webových prehliadačoch.

Google Chrome

Nástroje vývojára prehliadača Chrome umožňujú upravovať a ladiť kód, kontrolovať jednotlivé komponenty s cieľom odhaliť problémy s výkonom, simulovať rôzne obrazovky zariadení vrátane tých, ktoré používajú systém Android alebo iOS , a vykonávať niekoľko ďalších užitočných funkcií.

1. Kliknite na tlačidlo hlavnej ponuky 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 nad možnosť Viac nástrojov .
3. Mala by sa teraz zobraziť podmenu. Vyberte možnosť označenú ako Nástroje pre vývojárov . Pomocou 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ástroje pre vývojárov prehliadača Chrome by sa malo teraz zobraziť, ako je uvedené na tomto príklade obrazovky. V závislosti od vašej verzie prehliadača Chrome môže byť počiatočné usporiadanie, ktoré vidíte, trochu odlišné od tu zobrazenej. Hlavný rozbočovač nástrojov pre vývojárov, ktorý sa obvykle nachádza na spodnej alebo pravej strane obrazovky, obsahuje nasledujúce karty.
   Elements: Poskytuje možnosť kontrolovať CSS a HTML kód, ako aj upravovať CSS on-the-fly a vidieť efekty vašich zmien v reálnom čase.
   Konzola: Konzola JavaScript prehliadača Chrome umožňuje zadávanie priamych príkazov, ako aj diagnostické ladenie.
   Zdroje: Umožňuje ladiť kód JavaScript pomocou výkonného grafického rozhrania.
   Sieť: Kategorizuje a zobrazuje podrobné informácie o každej súvisiacej operácii na aktívnej aplikácii alebo stránke vrátane kompletných hlavičiek žiadostí a odpovedí, ako aj pokročilých metrík načasovania.
   Časová os: Umožňuje hĺbkovú analýzu každej aktivity, ktorá prebieha v prehliadači hneď po spustení žiadosti o načítanie stránky alebo aplikácie.
5. Okrem týchto častí môžete tiež získať prístup k nasledujúcim nástrojom pomocou ikony >> , ktorá sa nachádza napravo od karty Časová os .
   Profil: Rozdelený do sekcií profiler CPU a sekcií profilu haldy poskytuje komplexné využitie pamäte a celkový čas vykonávania aktívnej aplikácie alebo stránky.
   Zabezpečenie: upozorňuje na problémy s certifikátmi a ďalšie problémy súvisiace s bezpečnosťou s aktívnou stránkou alebo aplikáciou.
   Zdroje: Tu môžete prezrieť súbory cookie, lokálne úložisko, vyrovnávaciu pamäť aplikácií a iné lokálne zdroje údajov, ktoré používa aktuálna webová stránka alebo aplikácia.
   Audity: ponúka spôsoby, ako optimalizovať čas na načítanie 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 robí takmer presne tak, ako by sa zobrazil na jednom z viac než tucet zariadení, vrátane niekoľkých známych modelov Android a iOS, ako napríklad iPad, iPhone a Samsung Galaxy. Tiež máte možnosť emulovať vlastné rozlíšenie obrazovky tak, aby vyhovovalo vašim konkrétnym potrebám v oblasti vývoja alebo testovania. Ak chcete zapnúť alebo vypnúť režim zariadenia , vyberte ikonu mobilného telefónu, ktorá sa nachádza priamo vľavo od karty Prvky .
7. Môžete tiež prispôsobiť vzhľad vašich vývojárskych nástrojov kliknutím na tlačidlo ponuky zobrazené tromi vertikálne umiestnenými bodkami, ktoré sa nachádzajú na pravej strane vyššie uvedených záložiek. V rámci tejto rozbaľovacej ponuky môžete premiestniť dok, zobraziť alebo skryť rôzne nástroje a tiež spustiť pokročilejšie položky, ako napríklad inšpektor zariadenia. Zistíte, že rozhranie dev tools itself je veľmi prispôsobiteľné prostredníctvom nastavení v tejto sekcii.

Mozilla Firefox

Sekcia pre vývojárov webových stránok Firefoxu obsahuje nástroje pre dizajnérov, vývojárov a testery, ako je editor štýlov a pixelový zacieľovací eyedropper.

Odporúčané čítanie: Top 25 Greasemonkey a Tampermonkey užívateľské skripty

1. Kliknite na tlačidlo hlavnej ponuky prehliadača Firefox, ktoré sú zobrazené v hornom pravom rohu okna prehliadača.
2. Keď sa zobrazí rozbaľovacia ponuka, vyberte ikonu označenú ako Vývojár . V ponuke Web Developer by sa malo teraz zobrazovať nasledujúce možnosti. Všimnite si, že väčšina položiek ponuky obsahuje klávesové skratky, ktoré sú s nimi spojené.
   Prepnúť nástroje: Zobrazí alebo skryje rozhranie nástrojov pre vývojárov, ktoré sú zvyčajne umiestnené v spodnej časti okna prehliadača. Klávesová skratka: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
   Inšpektor: Umožňuje vám skontrolovať a / alebo upraviť CSS a HTML kód na aktívnej stránke, ako aj na prenosnom zariadení pomocou vzdialeného ladenia. Klávesová skratka: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
   Webová konzola: Umožňuje spustiť výrazy jazyka JavaScript na aktívnej stránke, ako aj prehľad rôznych súborov zaznamenaných údajov vrátane bezpečnostných upozornení, požiadaviek na sieť, správ CSS a ďalších informácií. 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 zlomových bodov, kontrola uzlov DOM, vonkajšie zdroje čierneho boxu a mnoho ďalšieho. Rovnako ako v prípade inšpektora , táto funkcia tiež podporuje vzdialené ladenie. Klávesová skratka: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
   Editor štýlov: Umožňuje vytvoriť nové šablóny so štýlmi a začleniť ich do aktívnej webovej stránky alebo upraviť existujúce hárky a otestovať, ako sa vaše zmeny zobrazujú v prehliadači jediným kliknutím. Klávesová skratka: Mac OS X, Windows ( SHIFT + F7 )
   Výkonnosť: Poskytuje podrobné rozčlenenie výkonnosti siete aktívnej stránky, údajov o snímkovej frekvencii, času a stavu spustenia JavaScript, blikania farieb a oveľa viac. Klávesová skratka: Mac OS X, Windows ( SHIFT + F5 )
   Sieť: Zobrazuje zoznam každej žiadosti o sieť iniciovanej prehliadačom spolu s príslušnou metódou, pôvodnou doménou, typom, veľkosťou a uplynutým časom. Klávesová skratka: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
   Panel s nástrojmi pre vývojárov: Otvorí interpretač interaktívnej príkazovej riadky. Pomocou tlmočníka zadajte zoznam všetkých dostupných príkazov a ich správnej syntaxe. Klávesová skratka: Mac OS X, Windows ( SHIFT + F2 )
   WebIDE: Poskytuje možnosť vytvárať a vykonávať webové aplikácie prostredníctvom skutočného zariadenia s operačným systémom Firefox 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 webová konzola (pozri vyššie). Všetky vrátené údaje sú však pre celú aplikáciu Firefox (vrátane rozšírení a funkcií na úrovni prehliadača) na rozdiel od aktívnej webovej stránky. Klávesová skratka: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
   Referenčný dizajnový pohľad: Umožňuje vám okamžite zobraziť webovú stránku v rôznych rozlíšeniach, rozloženiach a veľkostiach obrazoviek, ktoré napodobňujú viaceré zariadenia vrátane tabletov a smartfónov. Klávesová skratka: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
   Kapkový kôš: Zobrazí hexadecimálny kód pre jednotlivé pixely.
   Scratchpad : Umožňuje vám písať, upravovať, integrovať a vykonávať úryvky kódu JavaScript z okna vyskakovacieho okna Firefoxu. Klávesová skratka: Mac OS X, Windows ( SHIFT + F4 )
   Zdroj stránky: pôvodný nástroj pre vývojárov 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ískajte viac nástrojov: Otvorí sa kolekcia Toolbox pre vývojárov webových stránok na oficiálnych stránkach doplnkov Mozilly, ktoré obsahujú asi desať populárnych rozšírení, ako sú Firebug a Greasemonkey.

Microsoft Edge / Internet Explorer

Bežne označovaný ako F12 Developer Tools , poďakovanie na klávesovú skratku, ktorá spustila rozhranie od predchádzajúcich verzií programu Internet Explorer, sú dev toolset v IE11 a Microsoft Edge ďaleko od svojho vzniku tým, že ponúkajú veľmi praktickú skupinu monitorov, debugérov, emulátorov a kompilátorov.

1. Kliknite na ponuku Ďalšie akcie , ktorá je reprezentovaná troma bodkami a nachádza sa v pravom hornom rohu okna prehliadača. Keď sa zobrazí rozbaľovacia ponuka, vyberte možnosť označenú ako Nástroje vývojára F12 . Ako som už uviedol, môžete tiež pristupovať k nástrojom pomocou klávesovej skratky F12 .
2. Rozhranie vývoja by sa teraz malo zobraziť, obvykle v spodnej časti okna prehliadača. K dispozícii sú nasledujúce nástroje, z ktorých každý je prístupný kliknutím na príslušný nadpis záloľky alebo pomocou priloľenej klávesovej skratky.
   DOM Explorer: Umožňuje upravovať štýly a HTML na aktívnej stránke a upravovať výsledky tak, ako idete. Využíva funkciu IntelliSense na automatické dokončenie kódu, ak je to vhodné. Klávesová skratka: (CTRL + 1)
   Konzola: Poskytuje možnosť odosielať informácie o ladení vrátane počítadiel, časovačov, stopy a prispôsobených správ prostredníctvom integrovaného rozhrania API. Umožňuje tiež vtlačiť kód na aktívnu webovú stránku a upraviť hodnoty priradené jednotlivým premenným v reálnom čase. Klávesová skratka: (CTRL + 2)
   Debugger: Umožňuje nastaviť body prerušenia a ladiť váš kód počas jeho vykonávania, ak je to potrebné, line za riadkom. Klávesová skratka: (CTRL + 3)
   Sieť: Zoznam každej žiadosti o sieť iniciovanej prehliadačom počas načítania a vykonávania stránky vrátane detailov protokolu, typu obsahu, využitia šírky pásma a oveľa viac. Klávesová skratka: (CTRL + 4)
   Výkonnosť: Podrobnosti o frekvenciách snímok, využití CPU a ďalších ukazovateľoch súvisiacich s výkonom, ktoré vám pomôžu urýchliť čas načítania stránky a ďalšie aktivity. Klávesová skratka: (CTRL + 5)
   Pamäť: Pomáha vám izolovať a opraviť potenciálne netesnosti pamäte na aktuálnej webovej stránke zobrazením časovej osi používania pamäte spolu so snímkami z rôznych časových intervalov. Klávesová skratka: (CTRL + 6)
   Emulácia: Zobrazuje, ako by sa aktívna stránka zobrazovala v rozličných rozlíšeniach a veľkostiach obrazoviek, emulujúcimi smartfóny, tablety a iné zariadenia. Tiež poskytuje možnosť upraviť užívateľského agenta a orientáciu stránky, rovnako ako simulovať rôzne geolokácie zadaním zemepisnej šírky a dĺžky. Klávesová skratka: (CTRL + 7)
3. Ak chcete zobraziť konzolu v rámci ktoréhokoľvek iného nástroja, kliknite na štvorcové tlačidlo s pravým držiakom vnútri, ktoré sa nachádza v pravom hornom rohu rozhrania vývojárskych nástrojov.
4. Ak chcete odpojiť, rozhranie vývojárskych nástrojov sa stáva samostatným oknom, kliknite na tlačidlo reprezentované dvoma kaskádovými obdĺžnikmi alebo použite nasledujúcu klávesovú skratku: CTRL + P. Nástroje môžete vrátiť späť do pôvodného umiestnenia stlačením CTRL + P druhýkrát.

Apple Safari (iba OS X)

Safari je rozmanitý nástroj dev odráža veľkú komunitu vývojárov, ktorá využíva Mac pre ich dizajn a programovanie potrieb. Okrem výkonnej konzoly a tradičných funkcií na zaznamenávanie a ladenie sú tiež k dispozícii ľahko použiteľné reakčné dizajnové režimy a nástroj na vytvorenie vlastných rozšírení prehliadača.

1. Kliknite na položku Safari v ponuke prehliadača umiestnenej v hornej časti obrazovky. Keď sa zobrazí rozbaľovacia ponuka, vyberte položku Predvoľby . Môžete tiež použiť túto klávesovú skratku namiesto tejto položky ponuky: COMMAND + COMMA (,)
2. Rozhranie preferencií programu Safari by sa teraz malo zobraziť a prekryť okno prehliadača. Kliknite na ikonu Pokročilé , ktorá sa nachádza na pravom okraji záhlavia.
3. Rozšírené predvoľby by mali byť teraz viditeľné. V spodnej časti tejto obrazovky je na paneli s ponukami označená možnosť Zobrazovať vývoj , doplnená začiarkavacie políčko. Ak v poli nie je začiarknutá žiadna začiarkovacia značka, kliknite na ňu raz a umiestnite ju tam.
4. Zatvorte rozhranie Predvoľby kliknutím na červený znak "x" v ľavom hornom rohu.
5. Teraz by ste si mali všimnúť novú voľbu v ponuke prehliadača s názvom Vyvíjať , ktorý sa nachádza medzi záložkami a oknom . Kliknite na túto položku ponuky. Teraz by sa mala zobraziť rolovacia ponuka obsahujúca nasledujúce možnosti.
   Otvorená stránka s: Umožňuje vám otvoriť aktívnu webovú stránku v jednom z ostatných prehliadačov, ktoré sú momentálne nainštalované na počítači Mac.
   User Agent: Umožňuje vybrať si z viac ako tucet vopred definovaných hodnôt používateľského agenta vrátane niekoľkých verzií prehliadača Chrome, Firefox a Internet Explorer a tiež definovať vlastný vlastný reťazec.
   Zadajte režim odpovedajúceho návrhu : Zobrazí aktuálnu stránku tak, ako by sa zobrazovala na rôznych zariadeniach a pri rozličných rozlíšeniach obrazovky.
   Zobraziť webový inšpektor: Spustí hlavné rozhranie nástrojov Safari dev, ktoré sú zvyčajne umiestnené v spodnej časti obrazovky vášho prehliadača a obsahujú nasledujúce časti: Elements , Network , Resources , Timeline , Debugger , Storage , Console .
   Zobraziť konzolu s chybami : tiež spúšťa rozhranie dev tools, priamo na karte Console, ktorá zobrazuje chyby, upozornenia a iné údaje denníka vyhľadávania.
   Zobraziť zdrojovú stránku: Otvorí sa záložka Zdroje , ktorá zobrazuje zdrojový kód pre aktívnu stránku kategorizovanú podľa dokumentu.
   Zobraziť zdroje stránky: Vykonáva rovnakú funkciu ako voľba Show Page Source .
   Zobraziť editor úryvkov: Otvorí sa nové okno, do ktorého môžete zadať kód CSS a HTML a náhľad jeho výstupu v priebehu používania.
   Zobraziť rozšírenie Builder: Poskytuje možnosť vytvárať alebo upravovať rozšírenia Safari pomocou CSS, HTML a JavaScript.
   Zobraziť záznam časovej osi: Otvorí sa karta Časové rady a začne zobrazovať v reálnom čase informácie o sieťových požiadavkách, rozloženie a vykresľovanie, ako aj vykonávanie JavaScript.
   Prázdne vyrovnávace pamäte : Vymaže celú vyrovnávaciu pamäť, ktorá sa momentálne ukladá na pevnom disku.
   Zakázať vyrovnávaciu pamäť: Zastaví Safari z ukladania do vyrovnávacej pamäte, aby sa pri každom načítaní stránky prevzal celý obsah zo servera.
   Zakázať obrázky: Zabraňuje zobrazovaniu 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: Obmedzuje výkon JavaScript na všetkých stránkach.
   Zakázať rozšírenia: Zakazuje spustenie všetkých nainštalovaných rozšírení v prehliadači.
   Zakázať špecifické hackovanie na stránkach: Ak bola služba Safari upravená tak, aby explicitne riešila problémy špecifické pre aktívnu webovú stránku, táto možnosť zablokuje tieto zmeny tak, aby sa stránka načítavala tak, ako keby boli tieto zmeny zavedené.
   Zakázať obmedzenia lokálnych súborov: Umožňuje prehliadaču mať prístup k súborom na vašich lokálnych diskoch, čo je z bezpečnostných dôvodov predvolene obmedzená činnosť.
   Zakázať obmedzenia týkajúce sa obmedzenia pôvodu: Tieto obmedzenia sú zavedené štandardne, aby sa zabránilo vzniku XSS a iných potenciálnych nebezpečenstiev. Často však musia byť dočasne zakázané na rozvojové účely.
   Povoliť JavaScript z inteligentného vyhľadávacieho poľa: Ak je povolené, poskytuje možnosť zadávať adresy URL pomocou javascriptu: zabudované priamo do panela s adresou.
   Správa certifikátov SHA-1 ako neohrozených: SSL certifikáty používajúce algoritmus SHA-1 sa všeobecne považujú za zastarané a zraniteľné.