Методы консоли в Javascript

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

Результат выводится текстовым сообщением после введенного оператора и после нажатия Enter, а затем оператор выполняется интерпретатором. Консоль позволяет вводить все доступные конструкции языка, в том числе BOM и DOM.

Запись кода в текстовом редакторе требует сохранения файла и перезагрузки страницы в браузере. Консоль исключает эту необходимость и выполняет код в режиме live reload — после оператор выполняется сразу, будь это вывод текста, изменение свойств объектов HTML или вызов функции. В отличии от cmd в Windows, браузерные консоли поддерживают исключительно JavaScript для навигации по браузеру и не могут выполнять команды Windows или MacOS.

Основы работы с браузерной консолью

Для того, чтобы открыть браузерную консоль в Windows, следует нажать клавишу F12 при открытом окне браузера. Откроются инструменты разработчика, в которых будет вкладка Console.

Другой способ открытия консоли выполнятся в следующем порядке:

1. Выбрать настройки в окне браузера, к примеру в Google Chrome это значок три точки стоящих вертикально.
2. Выбрать «Дополнительные инструменты».
3. Выбрать «Инструменты разработчика».
4. В открывшемся окне разработчика выбрать вкладку «Console».
5. В окне консоли будет отображен значек «>», указывающий на ввод команды.

Если ввести произвольный текст в виде «HelloWorld» без кавычек, что будет выдана ошибка «Uncaught ReferenceError: HelloWorld is not defined». Если этот же текст ввести в кавычках, что консоль распознает в нем строку и вернет эту же строку.

Пример:

> HelloWorld; // нажимаем Enter
Uncaught ReferenceError: HelloWorld is not defined
>»HelloWorld»; // строка без сохранения в переменную
> HelloWorld // возврат строки после нажатия Enter

Пример:

> var str = «Hy»; // нажимаем Enter
> undefined // ничего не возвратилось
> var str1 = «Michail !»;
> undefined
> str;
> Hy // возврат значения переменной
> console.log(str +» «+str1);
> Hi Michail ! // результат функции
> undefined // ничего не возвращено

Пример:

function message(){return 5+5}
> undefined
> message();
> 10 // результат вызываемой функции

Из последнего примера можно заметить, что тело функции не переносится по строкам. Функции и другие сложные выражения всегда должны писать в одну строку. Так как при нажатии Enter в консоли, она распознает это как окончание ввода оператора и тут же выполняет его. Поэтому запись массивов, объектов, циклов, функций и других подобных конструкций выполняется в одну строку.

Работа с DOM

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

Пример:

document.write(«Hello»);
> undefined
// Тут же в окне браузера будет отображена строка Hello.
> document.body.style.bacgroundColor = «red»; // нажимаем Enter
> undefined // Цвет элемента body станет красным

Функции JavaScript для работы с консолью

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

В класс Console есть следующие функции:

1. console.log(стили css, любой тип данных) — выводит значение в консоль, которое помещено в скобки. Первый параметр не обязательный — он устанавливает стили CSS для сообщения в консоли.
2. console.info(текст) — аналогичная функция предыдущей. Отличие лишь в том, что сообщение в консоль выводится с пометкой «i».
3. console.warn(текст) — аналог предыдущей функции, только сообщение выводится со знаком предупреждения «!».
4. console.error(текст) — выводит текст ошибки красным цветом.
5. console.dir(объект) — выводит дочерние элементы объекта, имя которого введено в качестве параметра. Пожалуй это самая полезная функция консоли, так как она позволяет изучать внутренние объекты JavaScript. В консоли отображаются не только введенный объект и его дочерние объекты, но также и имена свойств со значениями, а также имена методов и возвращаемые значения.
6. console.table(arr/obj) — функция выводит содержимое объекта или массива в табличной форме, удобной для чтения.
7. console.trace() — выводит имена функций и методов с названиями файлов в которых они расположены.
8. console.time() — включает таймер, который отсчитывает миллисекунды до вызова функции console.timeEnd() и выводит количество миллисекунд, прошедших между вызовом этих двух функций.
9. console.clear() — вызов этой функции полностью очищает все текстовое наполнение консоли. Обычно эту функцию используют для организации удобства работы, когда поле консоли перегружено ненужным текстом.

Что нужно знать

Работа с консолью позволяет по экспериментировать с HTML документом. Команды, вводимые в поле консоли, тут же выполняются! Это позволяет поиграть с содержимым страницы и увидеть результат мгновенно без сохранения файла и перегрузки браузера. Важно знать то, что при работе с консолью мы не изменяем файл HTML. Если работа велась с DOM через консоль, то при перезагрузки окна браузера, содержимое окна восстановится до кода, написанного в файле. Поэтому консоль используют для отладки кода и его тестирования.

Консоль является стандартным инструментом любого браузера. По умолчанию, консоль предназначена для вывода сообщений об ошибках в коде. Достаточно допустить какую-либо ошибку в коде и в консоли будет выведено сообщение на подобие Reference error или Syntax error красным цветом с описанием ошибки, а также возможностью перейти на тот участок кода, где спрятана ошибка.

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