Jak wyświetlić dane jako tabelę w konsoli przeglądarki

Konsola to narzędzie wbudowane w przeglądarkę, które rejestruje błędy występujące na stronach internetowych. W przypadku wystąpienia jakichkolwiek błędów - np. uszkodzonych linków, niekompletnych funkcji JavaScript lub nieznanych właściwości CSS - przeglądarka wyświetli komunikaty o błędach w Konsoli.

Możesz także wchodzić w interakcję z Konsolą poprzez powłokę i API Konsoli, co jest przydatne do testowania niektórych funkcji i danych wyjściowych. W tym artykule znajdziesz przydatną wskazówkę dotyczącą korzystania z API konsoli.

Dostęp do konsoli w przeglądarce

W przeglądarce Chrome możesz wybrać opcję Widok > Deweloper > Konsola JavaScript , aby wyświetlić konsolę. Dodatkowo możesz także użyć skrótu klawiaturowego: Cmd+ Option+ Jw systemie OS X i Ctrl+ Shift+ Jw systemie Windows.

Poniżej znajduje się wolna od błędów konsola Chrome.

Stąd możesz zacząć korzystać z poleceń dostępnych w API konsoli.

Wejdź w interakcję z konsolą

Możesz wchodzić w interakcję z konsolą przeglądarki za pośrednictwem samej konsoli i dodając JavaScript. Na przykład tutaj prosimy konsolę o wyświetlenie wyniku „Dzień dobry!” wpisując komendę console.log() bezpośrednio w konsoli:

Jak wspomniano, możesz także zastosować console.log(). Console.log() może służyć do testowania instrukcji warunkowej JavaScript. Możesz zobaczyć wyraźniej, kiedy wynik zwraca prawdę lub fałsz (prawda lub fałsz) za pomocą console.log().

Oto przykład:

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

Powyższy kod zwróci wartość true, ponieważ zmienna zawiera liczbę 1 . W konsoli zobaczysz, że przeglądarka wyświetla tekst o treści „true”.

Dane wyjściowe w formie tabeli

Czasami będziesz musiał przetworzyć tablicę danych lub listę obiektów, jak pokazano poniżej:

var data = [

{ name: "Andi", age: "21", city: "Tuban" },

{ name: "Ani", age: "25", city: "Trenggalek" },

{ name: "Adi", age: "30", city: "Kediri" }

];

console.table(data);

Dane te będą trudne do odczytania, gdy użyjemy metody console.log(). Metoda console.log() wyświetli tablicę w zwijanym widoku drzewa, jak pokazano poniżej.

Kiedy masz do czynienia z taką tablicą, lepszym sposobem na wyprowadzenie danych jest użycie console.table() . Ta metoda wyświetla dane w formacie tabeli. Biorąc te same dane co powyżej, wynik będzie wyglądał następująco:

Konsola przeglądarki pomaga twórcom stron internetowych obsługiwać błędy w witrynach internetowych. Użytkownicy mogą go również używać do sprawdzania danych wyjściowych, tak jak w przypadku metody console.log(). Kiedy masz tablicę danych, polecenie console.table() jest bardziej przydatne, ponieważ wyświetla tablicę w łatwym do odczytania formacie tabeli. Należy pamiętać, że console.table() ma zastosowanie wyłącznie w przeglądarkach opartych na Webkit, takich jak Chrome, Safari i najnowsza wersja Opery.

Mam nadzieję, że odniesiesz sukces.