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.

  1. 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.
  2. Console slúži na debugovanie javascriptového kódu (napríklad).
  3. Sources - obsahuje zoznam všetkých zdrojov, ktoré tvoria náš web (súbory, priečinky).
  4. 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.
  5. Timeline slúži na sledovanie rýchlosti napríklad načítania webstránky, obrázkov a podobných akcií.
  6. Taktiež Google Chrome umožňuje prepnúť webstránku do zobrazenia na mobilných a tabletových zariadeniach pomocou druhej ikonky telefónu s tabletom
  7. 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.