Google Chrome - developerské nástroje
Google Chrome je prehliadač, no okrem toho, že ho využívame na prezeranie webových stránok obsahuje v sebe Google Developer Tools, ktoré nám vývoj webových stránok (aplikácií) zjednodušujú a uľahčujú.
Takémuto kroku, kedy skúšame ladiť kód priamo v prehliadači sa hovorí debugovanie. Ako správny programátor sa s debugovaním kódu určite stretneš. Debugovanie umožňujú aj ostatné prehliadače, no pre zachovanie jednotnosti tutoriálu by bolo dobré, keby si nainštaluješ Google Chrome a pracujeme v jednotnom prostredí.
Inštalácia
Ak Google Chrome ešte nainštalovaný nemáš pokračuj nižšie, inak prejdi na koniec tejto lekcie.
Google Chrome si môžeš stiahnuť z oficiálnej stránky Google. Google automaticky identifikuje operačný systém tvojho počítača, preto jediné, čo stačí urobiť je stiahnuť súbor a prejsť klasickou inštaláciou.
Po nainštlovaní otvor tvoj index.html súbor v prehliadači Google Chrome.
Debugovanie
Debuger v Google Chrome zapneš pravým kliknutím myši na webstránke a výber možnosti Preskúmať. Otvorí sa ti nasledovne vyzerajúce okno.
Okno je tvorené sekciami.
- Elements - obsahuje náš konkrétny html súbor práve otvorenej webstránky. Napravo sa nachádza zoznam definovaných štýlov pre jednotlivé elementy.
- Console slúži na debugovanie javascriptového kódu (napríklad).
- Sources - obsahuje zoznam všetkých zdrojov, ktoré tvoria náš web (súbory, priečinky).
- Network - obsahuje informácie potrebné napríklad na sledovanie odoslania formulárov, prihlásenie, zmenu stavu prvkov na webe. Často využívané počas sťahovania dát z webových stránok.
- Timeline slúži na sledovanie rýchlosti napríklad načítania webstránky, obrázkov a podobných akcií.
- Taktiež Google Chrome umožňuje prepnúť webstránku do zobrazenia na mobilných a tabletových zariadeniach pomocou druhej ikonky telefónu s tabletom
- Prvá ikonka (šípky v okne) slúži na aktivovanie a možnosti vybrať konkrétny element na webstránke.
Debugovaniu v praxi sa budeme venovať v nasledujúcej sekcii. Teraz môžeš debuger zatvoriť a prejsť k ďalšej kapitole.