K čemu jsou Chrome DevTools?

Chrome DevTools je sada nástrojů pro vytváření a ladění webových stránek zabudovaných do prohlížeče Google Chrome. Můžeme je samozřejmě také použít ve své open source verzi; Chrom.

K nástrojům Chrome pro vývojáře je možné přistupovat stisknutím kombinace kláves Ctrl + Shift + I, také podržením kurzoru nad prvkem a kliknutím pravým tlačítkem na Inspect.

Components

Když otevřete Chrome DevTools, vidíme, že se objeví un panel napravo od stránky, kterou procházíme. Tento panel je naprJe rozdělena na karty odpovídající každému z nástrojů. Nástroje jsou zase rozděleny do sekcí.
Sekce jsou:

• Prvky: Zobrazuje různé součásti stránky.
• Console: Umožňuje vám spustit diagnostiku během vývoje nebo pracovat s kódem Javascript, jako byste to udělali s terminálem Linux.
• Zdroje: Usnadňuje ladění kódu Javascript a práci s místními soubory.
• Síť: Pomáhá sledovat a zlepšovat výkon stránky.
• Časová osa: Umožňuje zaznamenávat a zkoumat různé události, ke kterým dojde během návštěvy webu.
• Aplikace: Vyšetřuje všechny načtené prostředky; mimo jiné databáze IndexedDB nebo Web SQL, místní úložiště a úložiště relací, soubory cookie, mezipaměť aplikací, obrázky, písma a šablony stylů.
• Zabezpečení: Zjistí problémy se zabezpečením v kódu.

Uvidíme, k čemu můžeme Chrome DevTools použít

Opravte, co nefunguje

Stalo se to každému vývojáři. Napište kód, zkontrolujte, zda v něm nejsou žádné chyby, a přesto v okamžiku pravdy stránka nefunguje tak, jak by měla. Nástroj Console ukazuje, k jaké chybě dochází v době provádění.

Zkraťte dobu načítání

Pokud se načítání stránky trvá dlouho, uživatel se unaví a přejde na jiný web. Naštěstí éra webů Flash a jejich animovaných úvodů skončila. Na kartě Sítě v nástroji Chrome DevTools usnadňuje zjištění, které prvky zpožďují zatížení. Test můžeme opakovat pro různé rychlosti připojení.

Upravte kód

Na kartě Prvky můžeme zobrazit prvky stránky, související html kód a vlastnosti css. Můžeme je také změnit.

Můžeme upravit text stránky pomocí příkazu

document.designMode = 'on';

Vyzkoušejte různé velikosti obrazovky

Tablety, smartphony, chytré televize, stolní počítače. Seznam zařízení, se kterými surfujeme na internetu, roste. S Chrome DevTools můžeme vyzkoušejte, zda stránka vypadá dobře v různých velikostech.

Benchmarking

V managementu znamená pojem benchmarking poučení z osvědčených postupů těch, kteří dělají totéž jako my. S Chrome DevTolls, pokud se nám líbí design webových stránek, můžeme zobrazit html kód a šablony stylů css a zkopírovat je na náš web.

Získání nástrojů Chrome DevTools

Chrome DevTools je k dispozici v prohlížečích Google Chrome a Chromium. Chrom je v úložištích hlavních distribucí. Lze jej také nainstalovat z obchodů Vyfotit. Pokud jde o Google Chrome, můžete pojď sem. ve formátu DEB a RPM