Как отобразить данные в виде таблицы в консоли браузера

Консоль – это встроенный в браузер инструмент, который регистрирует ошибки, возникающие на сайте. Если есть какие-либо ошибки – например, неработающие ссылки, неполные функции JavaScript или неизвестные свойства CSS – браузеры будут отображать сообщения об ошибках в консоли.

Кроме того, мы также можем взаимодействовать с консолью через оболочку и Консольный API, что полезно при тестировании определенных функций и вывода данных. Здесь мы покажем вам один полезный совет для использования Console API.

Рекомендуемое чтение: создание HTML-таблиц – более 30 красивых примеров и полезных JavaScript-сценариев

Доступ к консоли браузера
В Chrome мы можем выбрать View> Developer> JavaScript Console menu, чтобы открыть консоль. В качестве альтернативы мы также можем использовать сочетание клавиш: Cmd + Option + J в OS X и Ctrl + Shift + J в Windows.

Ниже показана безошибочная консоль Chrome.
Отсюда мы можем начать использовать команду, представленную в Консольный API,
Взаимодействие с консолью
Мы можем взаимодействовать с консолью браузера через саму консоль и добавляя JavaScript в документ. В качестве примера, здесь мы говорим консоли: «Доброе утро!» введя команду console.log () непосредственно в консоли:
Как уже упоминалось, мы также можем применить console.log () в документе. Одним из практических методов console.log () является проверка условного оператора JavaScript. Мы можем более четко видеть, возвращает ли результат значение true или false с помощью console.log ().

Ниже приведен один пример:

var a = 1;
if (a == 1) {
console.log ( ‘истина’);
} еще {
console.log ( ‘ложь’);
}

Приведенный выше код вернет true, поскольку переменная содержит число 1. В консоли вы должны увидеть, как браузер выводит текст true.
Выходные данные в виде таблицы
Иногда мы имеем дело с массивом данных или списком объектов, как показано ниже:

var data = [
{ name: “Andi”, age: “21”, city: “Tuban” },
{ name: “Ani”, age: “25”, city: “Trenggalek” },
{ name: “Adi”, age: “30”, city: “Kediri” }
];
console.table (данные);

Эти данные будет трудно прочитать, когда мы будем использовать метод console.log (). Метод console.log () покажет массив в сворачиваемом виде в виде дерева, как показано ниже.
Когда мы имеем дело с таким массивом, лучше использовать console.table () для его вывода. Этот метод покажет данные в табличном формате. Взяв те же данные, что и выше, он выдаст как:
Вывод
Консоль браузера помогает веб-разработчикам обрабатывать ошибки на веб-сайтах. Мы также можем использовать его для проверки вывода данных, как в методе console.log (). Когда у нас есть массив данных, команда console.table () будет более полезной, так как она показывает массив в виде таблицы, которая легко читается. Обратите внимание, что console.table () применима только в браузерах на основе Webkit, таких как Chrome, Safari и последняя версия Opera.
Дальнейшее чтение