Как вывести в консоль: console.log и другие
Выводит значение в консоль console.log:
const name = "Аня";
const score = 95;
console.log("Привет!");
console.log("Имя:", name, "баллы:", score);
console.log(`Имя: ${name}, баллы: ${score}`);
console.log([1, 2, 3], { ok: true });Привет!
Имя: Аня баллы: 95
Имя: Аня, баллы: 95
[ 1, 2, 3 ] { ok: true }Значения через запятую выводятся через пробел. Шаблонная строка в обратных кавычках вставляет значения в текст через ${…}. Массивы и объекты консоль показывает целиком.
Где смотреть вывод
- В браузере — инструменты разработчика:
F12, вкладка Console. Сразу в консоль:Ctrl+Shift+Jв Chrome и Edge,Ctrl+Shift+Kв Firefox; на macOS —Cmd+Option+JиCmd+Option+K. - В Node.js — в том же терминале, где запущена программа:
node app.js.
Вывод console.log посетитель сайта не видит, пока сам не откроет консоль. Чтобы показать что-то на странице, меняют элементы (element.textContent = …) — см. урок DOM: элементы страницы и события. Окно alert("текст") тоже показывает сообщение, но останавливает страницу, пока его не закроют.
Другие методы console
| Метод | Что делает |
|---|---|
console.error(...) | сообщение об ошибке: в браузере — красным, в Node.js — в поток ошибок |
console.warn(...) | предупреждение: в браузере — жёлтым |
console.table(массив) | массив или объект в виде таблицы |
console.dir(объект) | объект со всеми свойствами, в виде дерева |
console.clear() | очистить консоль |
console.time("метка") и console.timeEnd("метка") | сколько миллисекунд прошло между вызовами |
console.table особенно удобен для массива объектов: каждый объект — строка, свойства — столбцы.
const users = [
{ name: "Аня", age: 17 },
{ name: "Олег", age: 22 },
];
console.table(users);Почему вывода не видно
- В консоли включён фильтр. В Chrome справа вверху консоли есть список уровней сообщений и строка фильтра: если там что-то набрано или отключены обычные сообщения, часть вывода скрыта.
- Страница перезагрузилась. После отправки формы или перехода по ссылке консоль очищается. Включите в настройках консоли сохранение журнала — в Chrome флажок «Preserve log».
- Код не дошёл до строки. Выше случилась ошибка — она будет в консоли красным, а выполнение на ней остановилось.
- Скрипт не подключён. Поставьте
console.log("старт")первой строкой файла и проверьте, появляется ли она.
Подводный камень: объект в консоли браузера
Браузер показывает объект в консоли «живым»: когда вы раскрываете его щелчком, видны значения на момент раскрытия, а не на момент вывода. Если объект меняется после console.log, можно увидеть уже новые значения. Чтобы зафиксировать состояние, выводите копию: console.log(JSON.stringify(obj)) или console.log(structuredClone(obj)). В Node.js этого эффекта нет: объект печатается сразу текстом.