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

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í rolovacia ponuka, umiestnite kurzor myši nad Ďalšie nástroje voľba.
3. Mala by sa teraz zobraziť podmenu. Vyberte možnosť označenú 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 (doplnok) + 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.prvky: 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.Console: Konzola JavaScript prehliadača Chrome umožňuje zadávanie priamych príkazov, ako aj diagnostické ladenie.zdroj: Umožňuje ladiť kód JavaScript pomocou výkonného grafického rozhrania.sieť: Rozdeľuje 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 prostredníctvom nasledujúcich nástrojov pristupovať aj k nasledujúcim nástrojom >> ikona, ktorá sa nachádza napravo od časová os tab.profil: Rozbité dole Profilu CPU a Profil haldy poskytuje komplexné využitie pamäte a celkový čas vykonávania aktívnej aplikácie alebo stránky.bezpečnosť: Upozorňuje na problémy s certifikátmi a iné problémy súvisiace s bezpečnosťou s aktívnou stránkou alebo aplikáciou.zdroje: Tu môžete skontrolovať 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 všeobecný výkon.
6. Režim zariadenia umožňuje zobraziť aktívnu stránku v simulátore, ktorý ju robí takmer presne tak, ako by sa objavil na jednom z viac ako 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. Prepnúť Režim zariadenia zapnúť a vypnúť, vyberte ikonu mobilného telefónu, ktorá sa nachádza priamo vľavo od elements tab.
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.

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

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ú vývojka , Web Developer menu, ktoré obsahuje 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, zvyčajne umiestnené v spodnej časti okna prehliadača. Klávesová skratka: Mac OS X ( ALT (doplnok) + 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 (doplnok) + 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í, žiadostí o sieť, správ CSS a ďalších informácií. Klávesová skratka: Mac OS X ( ALT (doplnok) + Command + K ), Windows ( CTRL + SHIFT + K )ladiaci: Debugger jazyka JavaScript umožňuje presne určiť a opraviť chyby nastavením bodov prerušenia, kontrola uzlov DOM, vonkajších zdrojov z čierneho boxu a mnoho ďalších. Rovnako ako v prípade inšpektor , táto funkcia tiež podporuje vzdialené ladenie. Klávesová skratka: Mac OS X ( ALT (doplnok) + 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ýkon: Poskytuje podrobný rozpis 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 (doplnok) + Command + Q ), Windows ( CTRL + SHIFT + Q )Panel s nástrojmi pre vývojárov: Otvorí interpretač interaktívneho príkazového riadku. vstúpiť Pomoc do tlmočníka pre 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 spúšťať webové aplikácie prostredníctvom skutočného zariadenia s operačným systémom Firefox alebo pomocou 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 (viď 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, aby ste mohli napodobňovať viaceré zariadenia vrátane tabletov a smartfónov. Klávesová skratka: Mac OS X ( ALT (doplnok) + Command + M ), Windows ( CTRL + SHIFT + M )kvapkadlo: Zobrazuje hexadecimálny kód pre jednotlivé pixely.zápisník: Umožňuje vám napísať, upraviť, 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: V pôvodnom nástroji pre vývojárov založenom 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í Nástroje pre vývojárov webu zbierka na oficiálnych stránkach doplnkov Mozilly, obsahujúca asi tucet populárnych rozšírení ako sú Firebug a Greasemonkey.

Microsoft Edge / Internet Explorer

Bežne označovaný ako Nástroje vývojára F12 , poďakovanie na klávesovú skratku, ktorá spustila rozhranie od predchádzajúcich verzií programu Internet Explorer, sada nástrojov dev na platformách IE11 a Microsoft Edge odvtedy prichádza ďaleko od poskytovania veľmi užitočnej skupiny monitorov, debugérov, emulátorov a na -the-fly kompilátorov.

1. Klikni na Ďalšie akcie menu, ktoré sú zobrazené v troch bodoch av pravom hornom rohu okna prehliadača. Keď sa zobrazí rolovacia ponuka, vyberte možnosť označenú Nástroje vývojára F12 , Ako som už uviedol, môžete tiež pristupovať k nástrojom prostredníctvom nástroja F12 klávesová skratka.
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) Console: 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) ladiaci: Umožňuje nastaviť body prerušenia a ladiť váš kód počas jeho vykonávania, ak je to potrebné. Klávesová skratka: (CTRL + 3) sieť: Zobrazuje zoznam každej žiadosti o sieť iniciovanej prehliadačom počas zaťažovania a vykonávania stránky, vrátane podrobných informácií o protokole, typu obsahu, využitia šírky pásma a oveľa viac. Klávesová skratka: (CTRL + 4) výkon: 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ánok 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 bude aktívna stránka vykresľovať v rôznych rozlíšeniach a veľkostiach obrazoviek, ktoré emulujú smartfóny, tablety a ďalšie 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. Zobrazenie konzola zatiaľ čo v akomkoľvek inom nástroji kliknite na štvorcové tlačidlo s pravým držiakom vnútri, ktorý sa nachádza v pravom hornom rohu rozhrania vývojových nástrojov.
4. Ak chcete odpojiť, rozhranie pre vývojárov, aby sa stalo 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 tlačidla CTRL + P podruhé.

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 safari v ponuke prehliadača umiestnenej v hornej časti obrazovky. Keď sa zobrazí rozbaľovacia ponuka, vyberte položku Preferencie , Pomocou tejto položky ponuky môžete použiť aj nasledujúcu klávesovú skratku: COMMAND + čiarka (,)
2. Safari je Preferencie rozhranie by sa malo teraz zobraziť a prekryť okno prehliadača. Klikni na pokročilý ikona, ktorá sa nachádza na pravom okraji záhlavia.
3. pokročilý Preferencie by mali byť teraz viditeľné. V spodnej časti tejto obrazovky je označená možnosť Na paneli s ponukami zobrazte položku Vývoj , spolu so zaškrtnutím políčka. Ak v poli nie je začiarknutá žiadna začiarkovacia značka, kliknite na ňu raz a umiestnite ju tam.
4. Zavrieť Preferencie rozhranie kliknutím na červený znak "x" nájdený v ľavom hornom rohu.
5. Teraz by ste si mali všimnúť novú možnosť v menu s názvom prehliadača vypracovať , ktorý sa nachádza medzi záložky a okno , Kliknite na túto položku ponuky. Teraz by sa mala zobraziť rolovacia ponuka obsahujúca nasledujúce možnosti.Otvoriť stránku 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.Používateľský agent: Umožňuje vybrať si z viac než 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: Vykresľuje 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 prehliadača a obsahujú nasledujúce časti: elements , sieť , zdroje , časovej osi , ladiaci , skladovanie , konzola .Zobraziť konzolu s chybami: Taktiež spúšťa rozhranie dev nástrojov priamo do priečinka konzola ktorá zobrazuje chyby, upozornenia a ďalšie údaje denníka, ktoré je možné vyhľadávať.Zobraziť zdroj stránky: Otvorí zdroje ktorá zobrazuje zdrojový kód pre aktívnu stránku kategorizovanú podľa dokumentu.Zobraziť zdroje stránky: Vykonáva rovnakú funkciu ako Zobraziť zdroj stránky voľba.Zobraziť editor úryvkov: Otvorí nové okno, v ktorom môžete zadávať kód CSS a HTML a zobrazovať jeho výstup okamžite.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í časovej osi a začne zobrazovať v reálnom čase požiadavky na sieť, informácie o usporiadaní a vykresľovaní a vykonávanie JavaScript.Prázdne vyrovnávacie 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 vykonávanie JavaScript na všetkých stránkach.Zakázať rozšírenia: Zakazuje, aby všetky spustené rozšírenia boli spustené 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 sa tieto modifikácie zaviedli.Zakázať obmedzenia lokálnych súborov: Umožňuje prehliadaču mať prístup k súborom na vašom lokálnom disku, čo je z bezpečnostných dôvodov implicitne zakázané.Zakázať 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 javascript: zabudované priamo do panela s adresou.Nakupte certifikáty SHA-1 ako neisté: SSL certifikáty používajúce algoritmus SHA-1 sa všeobecne považujú za zastarané a zraniteľné.