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: