Chrome Developer Tools: Klíč k fragmentům a časování

V této příručce získáš podrobný přehled o použití snippets a o funkci měření času v rámci nástrojů Chrome Developer Tools. Snippets ti umožňují vytvářet znovupoužitelné úryvky kódu, které ti mohou poskytnout cennou pomoc při programování a testování tvého kódu. Kromě toho ti ukážeme, jak můžeš měřit časovou náročnost JavaScriptového kódu pro optimalizaci výkonu tvých aplikací. Tyto funkce mohou být klíčové pro zlepšení tvého prostředí pro vývoj v JavaScriptu.

Nejdůležitější poznatky

• Snippets jsou znovupoužitelné úryvky kódu uložené v nástrojích Chrome Developer Tools.
• Můžeš vytvářet, editovat a spouštět snippety ke zautomatizování častých úkolů.
• S funkcemi console.time() a console.timeEnd() můžeš měřit dobu trvání částí kódu.
• Správné použití volání time a time end je rozhodující pro získání správných měření.

Krok za krokem

Vytváření a řízení snippety

Nejprve se podíváme na to, jak můžeš vytvářet a řídit snippety v nástrojích Chrome Developer Tools.

Pro přístup ke snippetům otevři nástroje Chrome Developer Tools, klikni na kartu „Sources“ a vyhledej panel Snippets. Panel Snippets můžeš buď vyvolat úpravou zobrazení, nebo přes menu.

Zde můžeš vytvářet nové snippety. Klikni na „Nový snippet“, abys vytvořil(a) nový snippet. Bude se tě ptát na název tvého snippetu; pojmenuj ho například „Test“.

Jakmile pojmenuješ svůj snippet, můžeš ho hned upravit. Zde můžeš napsat požadovaný JavaScriptový kód, který se poté spustí při spuštění snippetu.

Změny jsou dočasně uloženy, dokud je neuložíš stisknutím Ctrl + S (nebo Command + S na Macu). Všimni si, že snippety jsou uloženy nezávisle na navštívené webové stránce, což znamená, že můžeš snippety použít na každé stránce.

Pro spuštění snippetu stačí kliknout na tlačítko Play nebo použít klávesovou zkratku Ctrl + Enter (nebo Command + Enter na Macu).

Po spuštění snippetu obdržíš výstup přímo v konzoli nástrojů pro vývojáře.

Měření času s console.time() a console.timeEnd()

Nyní, když jsi úspěšně vytvořil(a) snippety, podíváme se, jak můžeš měřit výkon svých JavaScriptových kódů pomocí funkcí console.time() a console.timeEnd().

Můžeš zahájit měření času tím, že vložíš console.time('Smyčka') na začátek části kódu, kterou chceš měřit. Ujisti se, že na konci příslušného kódu použiješ stejný řetězec v console.timeEnd('Smyčka'). Čas mezi těmito voláními bude poté zobrazen v milisekundách.

Pokud se řetězce neshodují nebo zapomeneš zavolat funkci timeEnd, obdržíš upozornění.

Příklad měření času

Uveďme si jednoduchý příklad, ve kterém provedeš smyčku pro 100 000 prvků a zapíšeš je do pole.

Před smyčku vlož console.time('Smyčka') a po smyčce console.timeEnd('Smyčka'). Tím zjistíš, jak dlouho trvá smyčce na vykonání.

Jednou, když vyzkoušíš tuto funkčnost, uvidíš, že měření času ti pomáhá identifikovat a optimalizovat úzká místa.

Důležité pokyny k použití

Vezmi v úvahu, že použití console.time() a console.timeEnd() není doporučeno pro produkční prostředí. Tyto funkce by měly být použity pouze pro testování, protože mohou být různě podporovány v různých JavaScriptových prostředích.

Závěr k používání snippetů a měření času

Nyní jsi se naučil základy používání snippetů a metod console.time() a console.timeEnd() v nástrojích pro vývojáře Chrome. Tyto funkce jsou mocné pro efektivnější práci a lepší porozumění výkonu tvých aplikací.

Shrnutí

Shrnutím lze říci, že používání snippetů a měření času v nástrojích pro vývojáře Chrome ti poskytuje cenné nástroje pro zvýšení efektivity tvého vývoje a lepší pochopení doby provádění tvého JavaScriptového kódu.