V tomto návode získate podrobný prehľad o používaní útržkov a funkcie merania času v rámci Chrome Developer Tools. Útržky vám umožňujú vytvárať opakovateľné kósové fragmenty, ktoré vám môžu poskytnúť užitočné služby pri programovaní a testovaní vášho kódu. Okrem toho vám ukážeme, ako môžete meriť vykonávacie časy kódu v JavaScripte, aby ste mohli optimalizovať výkon vašich aplikácií. Takéto funkcie môžu byť rozhodujúce pre získanie lepšieho prehľadu o vašom prostredí na vývoj v JavaScripte.
Najdôležitejšie zistenia
- Útržky sú opakovateľné kósové fragmenty uložené v rámci Chrome Developer Tools.
- Môžete vytvárať, upravovať a spúšťať útržky, aby ste automatizovali časté úlohy.
- Pomocou funkcií console.time() a console.timeEnd() môžete meriať vykonávacie časy úsekov kódu.
- Správne použitie volaní time a time end je rozhodujúce pre získanie správnych hodnôt meraní.
Krok za krokom návod
Vytváranie a spravovanie útržkov
Najprv si ukážeme, ako môžete vytvárať a spravovať útržky v Chrome Developer Tools.
Pre prístup k útržkom otvorte Chrome Developer Tools, kliknite na kartu „Sources“ a vyhľadajte panel Útržky. Panel Útržkov môžete aktivovať buď prispôsobením zobrazenia, alebo pomocou menu.
Tu môžete vytvárať nové útržky. Kliknite na „Nový útržok“, aby ste vytvorili nový útržok. Budete vyzvaní, aby ste zadali názov pre váš útržok; napríklad nazvite ho „Test“.
Po pomenovaní útržka môžete začať s úpravou. Tu môžete napísať požadovaný kód v JavaScripte, ktorý sa potom vykoná pri spustení útržku.
Zmeny sa dočasne uložia, kým ich nenatlačíte stlačením Ctrl + S (alebo Command + S na Macu). Upozorňujeme, že útržky sa ukladajú nezávisle od navštívenej webovej stránky, čo znamená, že útržky môžete použiť na každej stránke.
Ak chcete spustiť útržok, stačí kliknúť na symbol prehrávania alebo použiť skratku Ctrl + Enter (alebo Command + Enter na Macu).
Po spustení útržku dostanete výstup priamo v oblasti Konzoly nástrojov pre vývojárov.
Meranie času pomocou console.time() a console.timeEnd()
Po úspešnom vytvorení útržkov sa pozrime, ako môžete pomocou funkcií console.time() a console.timeEnd() merať výkon vášho kódu v JavaScripte.
Môžete spustiť meranie času pridaním console.time('Loop') na začiatok časti kódu, ktorú chcete merať. Uistite sa, že na konci príslušného kódu použijete rovnaký reťazec v console.timeEnd('Loop'). Čas medzi nimi sa potom zobrazí v milisekundách.
Ak sa reťazce nezhodujú alebo zabudnete zavolať funkciu timeEnd, dostanete upozornenie.
Príklad merania času
Uvažujme jednoduchý príklad, kde robíte cyklus cez 100 000 prvkov a ukladáte ich do poľa.
Umiestnite console.time('Loop') pred cyklus a console.timeEnd('Loop') po cykle. Týmto spôsobom môžete merať čas, ktorý cyklus potrebuje na vykonanie.
Ak skúsite túto funkcionalitu raz, uvidíte, že meranie času vám pomôže identifikovať a optimalizovať úzke miesta.
Dôležité pokyny pre používanie
Všimnite si, že použitie console.time() a console.timeEnd() nie je odporúčané pre produkčné prostredie. Tieto funkcie by mali byť používané výhradne na testovanie, pretože môžu byť rôzne podporované v rôznych JavaScriptových prostrediach.
Záver k používaniu Snippets a meraniu času
Teraz ste sa naučili základy používania Snippets a metód console.time() a console.timeEnd() v Chrome Developer Tools. Tieto funkcie vám pomôžu pracovať efektívnejšie a lepšie porozumieť výkonu vašich aplikácií.
Zhrnutie
V skratke, používanie Snippets a meranie času v Chrome Developer Tools poskytuje cenné nástroje na zvýšenie vášho vývojového výkonu a získanie hlbšieho prehľadu o vykonávacej dobe vašich JavaScriptových kódov.
Často kladené otázky
Ako vytvoriť Snippet v Chrome Developer Tools?Kliknite v záložke „Sources“ na „New Snippet“ a zadajte názov vášho Snippetu.
Ako spustiť Snippet?Kliknite na symbol pre prehrávanie alebo použite skratku Ctrl + Enter resp. Command + Enter.
Ako zmerať časovanie vykonávania kódu?Využite console.time('Názov') na začiatku a console.timeEnd('Názov') na konci vášho kódu na meranie času.
Môžem používať Snippets na ľubovoľnej webovej stránke?Áno, Snippets sú uložené v Chrome Developer Tools a môžu byť používané na ktorejkoľvek webovej stránke.
Sú nejaké obmedzenia pri používaní console.time()?Áno, console.time() by nemal byť vložený do produkčného kódu, pretože to môže spôsobiť neočakávané chyby.
