Mierzenie czasu wykonywania skryptu za pomocą console.time()

W poprzednim wpisie przyjrzeliśmy się możliwością, jakie daje nam funkcja console.table(). Dzisiaj natomiast skupimy się na sposobie mierzenia czasu wykonywania skryptu korzystając z dobrodziejstw, jakie niesie za sobą rzadko używana przez deweloperów funkcja console.time().

Klasyczny sposób pomiaru czasu wykonywania skryptu w JavaScript

Wyobraźmy sobie prosty skrypt:

var i, output = "";

// Remember when we started
var start = new Date().getTime();

for (i = 1; i <= 1e6; i++)
    output += i;

// Remember when we finished
var end = new Date().getTime();

// Now calculate and output the difference    
console.log(end - start);

Gdyby ktoś z Was zastanawiał się, co dokładnie oznacza zapis 1e6 - to nic innego, jak liczba 10 podniesiona do potęgi szóstej - 1000000, a zapis ten jest po prostu zapisem skróconym.

Kod jest wyjątkowo przejrzysty i będzie działał wszędzie, jednak w przypadku korzystania z nowoczesnych przeglądarek istnieje prostszy sposób na wykonanie tego samego pomiaru - wystarczy użyć funkcji console.time().

Pomiar czasu wykonywania skryptu za pomocą console.time()

Korzystając z funkcji console.time() kod zaprezentowany powyżej będzie wyglądał w sposób następujący:

var i, output = "";

// Start timing now
console.time("concatenation");

for (i = 1; i <= 1e6; i++)
    output += i;

// ... and stop.
console.timeEnd("concatenation");

W powyższym przypadku wywołujemy dwie funkcje - console.time(), która rozpoczyna pomiar czasu oraz console.timeEnd(), która wspomniany pomiar czasu kończy. Nazwa przekazana jako argument musi być identyczna zarówno w jednej, jak i drugiej funkcji.

A oto wynik, jaki otrzymamy:

Zaawansowane debugowanie JavaScript za pomocą console.table()

Nie wszyscy programiści korzystający na co dzień z języka JavaScript w swojej typowej pracy zdają sobie sprawę, że oprócz najprostszego console.log() służącego do logowania zdarzeń, obiekt Console posiada również kilka innych również mocno przydatnych funkcji.

Jedną z nich jest bez wątpienia console.table() i właśnie tej funkcji chciałbym zadedykować pierwszy post na nowym blogu.

Logowanie danych z tablicy za pomocą console.log()

Wyobraźmy sobie, że stworzyliśmy listę języków programowania wraz z przypisanymi do nich rozszerzeniami:

var languages = [
    { name: "JavaScript", fileExtension: ".js" },
    { name: "TypeScript", fileExtension: ".ts" },
    { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.log(languages);

Wywołanie funkcji console.log() będzie skutkować poniższą prezentacją danych:

Ten sposób reprezentacji, owszem, jest dobry, ale otwieranie każdego węzła, przy większej liczbie elementów tablicy może być nieco męczące. Zobaczmy więc, jak zachowa się funkcja console.table().

Logowanie danych z tablicy za pomocą console.table()

console.table(languages);

Oto wynik, jaki dostaniemy po wywołaniu wspomnianej funkcji:

Warto w tym miejscu zauważyć, że każdą z tych kolumn można sortować klikając myszą w jej nazwę.

Logowanie danych obiektu za pomocą console.table()

Tą samą sztuczkę możemy zastosować również do logowania danych obiektu.

var languages = {
    csharp: { name: "C#", paradigm: "object-oriented" },
    fsharp: { name: "F#", paradigm: "functional" }
};

console.table(languages);

A oto wynik: