Na čo slúžia Chrome DevTools?

Chrome DevTools je sada nástrojov na vytváranie a ladenie webových stránok zabudovaných do prehliadača Google Chrome. Môžeme ich samozrejme tiež použiť v otvorenej verzii; Chróm.

K nástrojom Chrome pre vývojárov je možné pristupovať stlačením kombinácie klávesov Ctrl + Shift + I, tiež umiestnením kurzora myši na prvok a kliknutím pravým tlačidlom myši na položku Skontrolovať.

Components

Keď otvoríme Chrome DevTools, uvidíme, že sa objaví un panel napravo od stránky, ktorú prechádzame. Pokiaľ ide o túto časť, tento panel naprJe rozdelený na karty zodpovedajúce každému z nástrojov. Nástroje sú zase rozdelené do sekcií.
Sekcie sú:

• Prvky: Zobrazuje rôzne komponenty stránky.
• Konzola: Umožňuje vám spustiť diagnostiku počas vývoja alebo interagovať s kódom Javascript, ako by to bolo s terminálom Linux.
• Zdroje: Uľahčuje ladenie kódu Javascript a prácu s miestnymi súbormi.
• Sieť: Pomáha monitorovať a zlepšovať výkon stránky.
• Časová os: Umožňuje zaznamenávať a skúmať rôzne udalosti, ktoré sa vyskytnú počas návštevy stránky.
• Aplikácia: Vyšetrí všetky načítané zdroje; okrem iného aj databázy IndexedDB alebo Web SQL, lokálne úložisko a úložisko relácií, cookies, medzipamäť aplikácií, obrázky, písma a štýly.
• Zabezpečenie: Zistí problémy so zabezpečením v kóde.

Pozrime sa, na čo všetko môžeme Chrome DevTools použiť

Opravte, čo nefunguje

Stalo sa to každému vývojárovi. Napíšte kód, overte, či v ňom nie sú chyby, a napriek tomu stránka v skutočnosti nefunguje tak, ako by mala. Nástroj Console ukazuje, aká chyba sa vyskytuje v čase vykonania.

Skráťte čas načítania

Ak sa načítanie stránky trvá dlho, používateľ sa unaví a prejde na inú stránku. Éra webov Flash a ich animovaných úvodov našťastie skončila. Karta Sieťy v Chrome DevTools uľahčuje zistenie, ktoré prvky oneskorujú zaťaženie. Test môžeme opakovať pre rôzne rýchlosti pripojenia.

Upravte kód

Na karte Prvky môžeme zobraziť prvky stránky, súvisiaci html kód a vlastnosti css. Môžeme ich tiež zmeniť.

Text stránky môžeme upraviť pomocou príkazu

document.designMode = 'on';

Vyskúšajte rôzne veľkosti obrazovky

Tablety, smartfóny, inteligentné televízory, stolné počítače. Zoznam zariadení, s ktorými surfujeme na internete, rastie. S Chrome DevTools môžeme otestujte, či stránka vyzerá dobre v rôznych veľkostiach.

benchmarking

V Manažmente pojem benchmarking znamená učenie sa z najlepších postupov tých, ktorí robia to isté ako my. S Chrome DevTolls, ak sa nám páči dizajn webových stránok, môžeme prezrite si html kód a šablóny štýlov css a skopírujte ich na našu stránku.

Získava sa nástroj Chrome DevTools

Chrome DevTools je k dispozícii v prehliadačoch Google Chrome a Chromium. Chróm je v úložiskách hlavných distribúcií. Môže byť tiež inštalovaný z obchodov prasknutie. Pokiaľ ide o Google Chrome, môžete poď sem. vo formáte DEB a RPM