Как вывести что то в консоль js

Использование JavaScript-консоли в браузерах

Команда console.log() и имена переменных

Простейший вариант использования console.log() заключается, например, в выводе некоей строки или объекта. Например, выведем в консоль строку:

Теперь представим себе, что в консоль нужно вывести несколько объектов. Например — таких:

Взглянем на то, что выводится в консоль.

В консоли нет имён переменных

Команда console.table()

Команда console.table() в действии

Команда console.group()

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

Предположим, мы выводим в консоль сведения о неких пользователях:

Вот как выглядят результаты работы этого кода.

Группировка результатов работы команд вывода данных в консоль

Команды console.warn() и console.error()

Предупреждения и ошибки

Стилизация данных, выводимых в консоль

Команда console.trace()

Команда console.time()

Одна из важных задач, встающая перед фронтенд-разработчиком, заключается в том, чтобы обеспечить высокую скорость работы кода. Команда console.time() позволяет замерять время выполнения операций и выводить то, что удалось выяснить, в консоль. Например, исследуем с помощью этой команды пару циклов:

Взглянем на то, что попало в консоль после выполнения этого кода.

Результаты использования console.time()

Итоги

В этом материале мы рассмотрели некоторые полезные мелочи, касающиеся вывода данных в консоли браузеров. Если раньше вы об этих возможностях не знали — надеемся, теперь у вас появились новые полезные JavaScript-инструменты.

Уважаемые читатели! Если вы занимаетесь разработкой больших JavaScript-проектов — просим вас рассказать о том, какими средствами вы решаете в них проблемы логирования.

Источник

Используем console на полную

Метод console.log() — отличный способ вывести отладочную информацию, не мешая пользователю. Но знаете ли Вы, что объект console имеет еще уйму других не менее полезных методов? Очень редко разработчики используют этот функционал, ограничиваясь неблокирующим alert’ом. Что-ж, давайте исправим это положение.

Небольшое примечание: использование отладочного кода может негативно сказаться на производительности. Удаляйте его из продакшн версии.

Больше, чем просто сообщения

Перед тем, как погрузиться в малоизвестные методы console, рассмотрим функционал console.log подробнее. Например, возможность передачи любого числа аргументов:

В результате все переданные аргументы будут выведены и разделены пробелом. Это, конечно, хорошо, но было бы еще лучше, если бы мы могли как-нибудь вывести все эти аргументы в виде красиво отформатированного сообщения. Хотя, постойте… мы можем!

Если Вы знакомы с функцией printf() в других языках, то спешим обрадовать: console.log() умеет вести себя похожим образом. Возьмем последний пример и передадим первый аргумент в немного измененном виде.

Что за %s?

Отличный вопрос! Это управляющие последовательности, которые заменяются на соответствующие им значения (в порядке очередности). %s означает «трактовать значение как строку», %d — как число (Также можно использовать %i или %f).

Каждое вхождение такой последовательности будет заменено на следующий по порядку аргумент. Первое вхождение — на первый (за первым аргументом-строкой, конечно), ну и так далее.

Эта команда как бы говорит «Я начну со второго аргумента и продолжу, начиная со следующего». Как Вы видите, последовательности, которым не хватило аргументов, остались нетронутыми.

Первый аргумент (строка формата) также участвует в нумерации (она идет с нуля) аргументов. Таким образом, в нашем примере последний аргумент будет иметь номер 5. Но мы задали всего 5 аргументов и, при этом, начали со второго. Поэтому, последней управляющей последовательности аргументов не досталось, и она не изменилась.

Чтобы это исправить, можно изменить формат строки таким образом, чтобы «указатель» не следующий элемент синхронизировался со списком аргументов в определенный момент. Тогда все будет работать как положено.

Для того, чтобы аргументы были выведены правильно, нам нужно изменить порядок вывода второго и третьего элементов. Другие элементы и так в правильном положении, так что нет необходимости указывать их позиции. Аргументы будут использованы в следующем порядке: 2, 1, 3, 4, 5.

Форматирование строк — мощный инструмент, и я охватил только вершину айсберга. Попробуйте поиграться самостоятельно и почитать, что пишет Joe Hewitts о консоли.

Различные типы сообщения

Есть еще пара методов, подобных log, но отличающихся внешне. А именно: console.info(), console.warn() и console.error().
console.info(), console.warn() и console.error() в Firebug’е.

Все три метода умеют выводить строки в соответствие с форматом и принимать любое количество аргументов.

Логи DOM’а

Когда Вам нужно как-то указать в логах на DOM узел лучшего всего использовать методы console.dir() или console.dirxml(), которые могут перечислить свойства элемента или вывести HTML кода элемента.
Знакомьтесь: console.dir() и console.dirxml() в Chrome.

Группировка

Иногда бывает полезно сгруппировать логи для упрощения работы с ними. Для этого существуют методы console.group(), console.groupCollapsed() и console.groupEnd().
Группировка в консоли Safari.

Как Вы можете видеть, подряд идущие вызовы group создают вложенные папки. Чтобы закрывать папку, используйте метод console.groupEnd(). Метод console.groupCollapsed() аналогичен console.group() за тем лишь исключением, что группа со всем содержимым будет изначально свернута.

Профилирование и замеры

Также консоль позволяет точно замерять время, используя метод console.time() и console.timeEnd(). Расположите вызов первого из них перед кодом, время исполнения которого хотите замерить, а второго — после.
Пример работы console.time() и console.timeEnd() в Firefox

Таймеры связаны между собой метками (передаются первым аргументом и могут быть любой строкой), так что Вы можете запустить несколько таймеров одновременно. Когда сработает console.timeEnd(), будет выведено сообщение с меткой и прошедшим временем в миллисекундах.

Помимо замера времени можно профилировать Ваш код и вывести стек профилирования, который подробно показывает, где и сколько времени потратил браузер.
Профилирование в Chrome.

Assert’ы

Когда Вы работаете над сложным проектом, важно покрывать код юнит тестами. Это позволит избежать глупых ошибок и возможных регрессий. К счастью, консоль включает в себя assert’ы.

Assert’ы позволяют обеспечивать соблюдение правил в коде и быть уверенным, что результаты выполнения этого кода соответствуют ожиданиям. Метод console.assert() позволяет проводить элементарное тестирование кода: если что-то пойдет не так, будет выброшено исключение. Первым аргументом может быть все, что угодно: функция, проверка на равенство или проверка существования объекта.
Assert в Chrome

Метод assert принимает условие, которое является обязательным к выполнению (в данном случае простая строгая проверка на равенство) и, вторым аргументом, сообщение, которое будет выведено в консоль вместе с выброшенным исключением, если первое условие не будет выполнено.

Поддержка браузерами

Большинство перечисленных методов поддерживаются достаточно хорошо. IE8+, Firefox с расширением firebug, Opera или webkit-браузер вроде Safari или Chrome. Есть, правда, некоторые различия: Firefox, Safari и Chrome отличаются более широкой поддержкой. Проще всего проверить совместимость можно выполнив console.dir(console), результатом которого будет вывод объекта console со всеми его методами.

Opera с Dragonfly поддерживает большинство методов, за исключением форматирования строк и профилирования (хотя методы profile, profileEnd и реализованы, это всего лишь заглушки).

IE8 также поддерживает много вкусностей, включая форматирование строк и assert’ы, но не замеры времени, профилирование, методы dir или dirxml.

Стоит отметить, что firebug lite может добавить некоторые методы к console в браузерах, их не поддерживающих.

Это не полный список того, что есть в console, но я перечислил наиболее полезные возможности, существенно упрощающие процесс отладки и тестирования. Используйте приобретенные знания и не ограничивайтесь одним лишь логированием строк.

Extra

Итак, это был очень вольный перевод статьи, но теперь я бы хотел добавить немного от себя:
Node.JS (ветка 0.2) поддерживает методы log, info, warn, error, dir, time / timeEnd, assert и trace.
log не умеет изменять порядок аргументов для подстановок, но сами подстановки реализованы. При вызове метода trace в консоль будет выведен стек вызовов (все методы ничего не возвращают, а просто пишут в консоль). Работает это также как минимум в Chrome и Opera.

В Opera и Chrome, помимо уже перечисленных, реализованы следующие методы:
count — выводит, сколько раз уже выполнялась строка, на которой расположен вызов метода. Аргументом передается строка, которая будет выведена перед количеством вызовов.
debug — ничем не отличается от log.

Также в Chrome у объекта console есть свойство memory, являющееся объектом со свойствами totalJSHeapSize и usedJSHeapSize. Однако, в Chromium’е мне так и не удалось застать эти свойства со значениями, отличными от нуля.

Источник

Метод console. log в Javascript позволяет выводить информацию (сообщения, данные и т.п.) из программного кода в консоль.

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

В браузере по умолчанию консоль скрыта от глаз пользователя. Но ее легко открыть при помощи специальной команды:

Зная, как открыть консоль браузера, рассмотрим пример вывода в нее информации при помощи метода console.log.

Итак, при помощи метода console. log можно выводить информацию в консоль браузера.

О пользе и преимуществах работы в консоли Вы узнаете в свое время. В частности, метод console. log удобен тем, что каждое его использование выводит информацию в консоль с новой строки.

Строка №1Строка №2
Строка №3

Строка №1
Строка №2
Строка №3

Читайте также.

Отзывы и комментарии:

Добавил(а): Александр
Дата: 2020-01-05

Скажите пожалуйста? А возможно вывести в строку в консоль через цикл?

Добавил: Admin
Дата: 2020-01-06

Вывести строку в консоль через цикл? Да можно вывести что-либо в консоль через цикл.

Добавил(а): Александр
Дата: 2020-01-07

Добавил: Admin
Дата: 2020-01-07

Хорошо. Не плохая задача для начала. Удачи в учебе.

Добавил(а): Александр
Дата: 2020-01-09

Источник

Отладка JavaScript для начинающих

В последние несколько лет благодаря появлению различных библиотек, таких как jQuery и Prototype, JavaScript завоевал лидирующее место среди языков для создания скриптов для веб проектов. Растущая популярность и простота использования привела к появлению полноценных приложений, например, Gmail, которые содержат тысячи строк JavaScript, выдвигающих к команде разработчиков повышенные требования к уровню владения инструментарием.

Результатом увеличения сложности приложений является необходимость в наличии мощных инструментов для отладки, которые позволяют быстро и эффективно найти источник ошибки. Простой вывод значений переменных с помощью функции alert() потерял свою актуальность.

В данном уроке проводится краткий обзор возможностей современных инструментов разработчиков, которые помогают сделать отладку JavaScript кода более простым процессом. Основное внимание будет уделяться возможностям браузера Chrome и дополнения Firebug для FireFox, но большинство описанных функций доступны и в других инструментах, например, Dragonfly для Opera.

Консоль автоматически выводит ошибки в коде, которые выявляются в ходе выполнения скрипта. Файл и строка указываются рядом с ошибкой, а нажатие клавиши мыши на ошибке перемещает фокус ввода в соответствующее ей место.

Данные выводим в консоль

Консоль может не только показывать ошибки в коде скрипта. С помощью Console API и Command Line API можно управлять выводом данных в консоль. Самая известная и полезная команда .log().

При разработке кода формы очень полезно знать значения переменных, чтобы проверять правильность работы кода. Обычной практикой является использование функции alert() для визуального контроля. Однако, использование такого метода блокирует выполнение остальной части кода до нажатия кнопки в окне диалога.

Современным решением является использование метода console.log, который выводит значения переменных на панель консоли:

Метод можно использовать для вывода вычисленных значений:

Преимуществом такого подхода по сравнению с методом использования диалога alert() является то, что выполнение кода не прерывается, и разработчик может несколько раз выводить значения переменных для наблюдения за изменениями данных в реальном времени.

Выделение сообщений

В выше приведенном примере цикл будет выводить много значений переменных в консоль. Однако, часто бывает удобно визуально разделять различные данные, чтобы эффективно выделять в коде места, требующие повышенного внимания. Для решения таких задач Console API имеет несколько методов.

console.info(): выводит иконку «информация» и выделяет цветом представляемую информацию. Данный метод удобно использовать для предупреждения о различных событиях.

console.warn(): выводит иконку «предупреждение» и выделяет цветом представляемую информацию. Удобно использовать для информации о выходе параметров за рамки ограничений.

console.error(): выводит иконку «ошибка» и выделяет цветом представляемую информацию. Удобно использовать для представления информации об ошибках и критических условиях.

Примечание: инструмент разработчика Chrome не имеет средств для различного представления информации в консоли.

Использование различных методов для вывода информации в консоль позволяет представить данные в наглядном виде. Представление информации можно улучшить с помощью объединения в блоки. Используется метод console.group():

Данный пример сгруппирует информацию в консоли. Визуально е представление будет различаться в разных браузерах, на рисунке ниже представлен вид в Dragonfly для Opera:

Выше приведенные примеры представляют небольшой список доступных методов из Console API. Имеется много других полезных методов, которые описаны на официальной странице Firebug.

Прерывание хода выполнения скрипта

Вывод информации в консоль является полезным средством, но код может выполняться очень быстро и при этом отслеживать много переменных.

Чтобы облегчить процесс отладки можно прерывать ход выполнения кода в определенной точке с получением доступа к данным. Для этого использутся точки прерывания.

Работаем с точками прерывания

Когда выполнение прервется, можно поместить курсор мыши над любой переменной и отладчик выведет подсказку со значением в текущий момент.

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

Условные точки прерывания

В процессе отладки кода иногда требуется останавливать выполнение кода только при соблюдении определенных условий. Например, если в вашем скрипте есть цикл, каждая итерация которого совершается за 50 миллисекунд, то будет очень неудобно запускать процесс выполнения после остановки на каждом шаге, когда нам нужна лишь 300 итерация. Для таких случаев есть условные прерывания.

В примере на рисунке выполнение кода не будет прерываться до тех пор, пока значение перменной total_photos_diff не станет больше 200.

Для активации условного прерывания нужно нажать правую клавишу мыши на точке прерывания и выбрать пункт ‘Edit Breakpoint’ для вывода диалога редактирования условий формирования прерывания.

Установка точки прерывания в коде

Не всегда удобно устанавливать точки прерывания с помощью интерфейса инструмента разработчика в браузере. Иногда проще запустить отладчик из кода специальной командой. В примере, приведённом ниже, показано, как вы можете прервать выполнение кода при соблюдении определенных условий:

Другие способы прервать выполнение кода

Кроме использования точки прерывания инструмент разработчика предоставляет другие возможности остановить выполнение кода в разных случаях.

Остановка при изменении DOM

Если вам нужно отладить часть кода, которая управляет изменениями DOM, то инструмент разработчика предоставляет в ваше распоряжение способ остановки выполнения кода при изменениях узла DOM.

На панели кода HTML при нажатии правой кнопки мыши на нужном элементе можно выбрать условия остановки кода (изменение атрибутов, добавление/удаление потомков, удаление элемента) при изменении DOM. Перегрузите код и при изменении элементов выполнение кода остановится.

Остановка при появлении всех или необрабатываемых исключений

Большинство инструментов разработчика позволяют останавливать выполнение скрипта при появлении исключений. В Chrome данный функционал может быть включен с помощью иконки ‘ Pause ‘ в нижней строке интерфейса.

Можно выбрать, для каких исключений будет выполняться остановка выполнения кода. Пример, приведенный ниже, демонстрирует одно необрабатываемое и одно обрабатываемое (блок try|catch) исключения:

Введение в стек вызовов

Если ошибка появится при выполнении вашего скрипта, то выше описанные методы помогут остановить программу для анализа ошибки. Но не всегда сразу понятно, где скрывается причина.

Когда выполнение скрипта прерывается, обратите внимание на правую панель, на которой представлена полезная информация, среди которой содержится стек вызовов (Call stack).

Стек вызовов показывает полный путь, который привел к точке появления ошибки и остановки выполнения кода.

На представленном ниже рисунке ошибка намеренно сгенерирована в функции incrementValues(), что привело к остановке выполнения кода. инструмент разработчика показывает полный стек вызовов, что позволяет определить потенциально опасные места.

Заключение

Данный урок является отправной точкой для более детального изучения документации по тому инструменту, которым вы планируете активно пользоваться.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.netmagazine.com/tutorials/javascript-debugging-beginners
Перевел: Сергей Фастунов
Урок создан: 26 Марта 2012
Просмотров: 209539
Правила перепечатки

5 последних уроков рубрики «Разное»

Как выбрать хороший хостинг для своего сайта?

Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Источник

Консольные команды JavaScript в Visual Studio

Для отправки сообщений и выполнения других задач в окне консоли JavaScript системы Visual Studio можно использовать команды. Примеры использования этого окна см. в кратком руководстве по отладке JavaScript. Информация в этом разделе относится к приложениям Node.js, приложения UWP и приложениям, созданным с помощью инструментов Visual Studio для Apache Cordova.

Если окно консоли JavaScript закрыто, его можно открыть при отладке в Visual Studio, выбрав Отладка > Windows > Консоль JavaScript.

Сведения об использовании консоли в средствах разработчика Microsoft Edge см. в этой статье.

команды объекта console

Более ранние версии Visual Studio не поддерживают полный набор команд. Для быстрого получения информации о поддерживаемых командах используйте IntelliSense для объекта консоли.

Существующая запись в окне консоли определяется параметром title (при его наличии) и обновляется командой count. Новая запись не создается.console.count();

console.count(«inner loop»);debug(message)Отправляет message в окно консоли.

Эта команда идентична команде console.log.

Объекты, передаваемые с помощью данной команды, преобразуются в строковый параметр.console.debug(«logging message»);dir(object)Отправляет указанный объект в окно консоли и отображает его в визуализаторе объекта. Визуализатор можно использовать для изучения свойств в окне консоли.console.dir(obj);dirxml(object)Отправляет заданный параметром object объект узла XML в окно консоли и отображает его в виде дерева узла XML.console.dirxaml(xmlNode);error(message)Отправляет message в окно консоли. Текст сообщения красный и ему предшествует символ ошибки.

Объекты, передаваемые с помощью данной команды, преобразуются в строковый параметр.console.error(«error message»);group(title)Запускает группирование сообщений, отправляемых в окно консоли, и посылает необязательный заголовок title в качестве метки группы. Группы могут быть вложенными и отображаются в окне консоли в представлении в виде дерева.

Дополнительные примеры см. в разделе Formatting console.log output далее в этой статье.log(message)Отправляет message в окно консоли.

Объекты, передаваемые с помощью данной команды, преобразуются в строковый параметр.console.warn(«warning message»);

Разные команды

Эти команды также доступны в окне консоли JavaScript (но недоступны в коде).

cd(window)Позволяет изменить контекст для оценки выражений с назначенного по умолчанию окна верхнего уровня страницы на окно заданного фрейма. Вызов cd() без параметров возвращает контекст в окно верхнего уровня.cd();

cd(myframe);select(element)Выбирает указанный элемент в проводнике DOM.select(document.getElementById(«element»));

select($1);dir(object)Возвращает визуализатор для заданного объекта. Визуализатор можно использовать для изучения свойств в окне консоли.dir(obj);

Проверка наличия консольной команды

Просмотр объектов в окне консоли JavaScript

Форматирование вывода команды console.log

console.log также поддерживает шаблоны подстановки «printf» для форматирования вывода. При использовании шаблонов подстановки в первом аргументе, дополнительные аргументы будут использоваться для замены указанных шаблонов в том порядке, в котором они используются.

Поддерживаются следующие шаблоны подстановки:

%s — строка, %i — целое число, %d — целое число, %f — число с плавающей запятой, %o — объект, %b — двоичные данные, %x — шестнадцатеричные данные, %e — экспонента

Источник