Зачем консоль в браузере

Обзор консоли

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

Средство консоли помогает выполнять несколько задач, которые более подробно рассматриваются в следующих статьях:

• Отслеживайте проблемы , чтобы узнать, почему что-то не работает в текущем проекте. См . раздел «Исправление ошибок JavaScript» в консоли.
• Получение сведений о веб-проекте в браузере в виде сообщений журнала. См . сообщения консоли фильтров.
• Сведения журнала в скриптах для отладки. См . сообщения журнала в средстве консоли.
• Попробуйте использовать выражения JavaScript в среде REPL . См . раздел «Запуск JavaScript в консоли».
• Взаимодействие с веб-проектом в браузере с помощью JavaScript. См . раздел «Взаимодействие с DOM с помощью консоли».

Средство консоли можно открыть в верхней или нижней части devTools; он показан здесь в верхней части на главной панели инструментов:

Telnet, SSH, консоль и терминал — что это и зачем нужно?

Консоль показана в нижней части средства разработки ( drawer) с открытым над ним средством Elements :

Самый быстрый **** способ открыть Ctrl«J«Shift ++консоль — нажать клавиши (Windows, Linux) J Command + Option +или (macOS).

Отчеты об ошибках и консоль

Консоль — это место по умолчанию, в котором отображаются сообщения об ошибках JavaScript и подключения. При возникновении ошибок рядом со значком Параметры в DevTools отображается счетчик проблем, который содержит количество ошибок и предупреждений.**** Щелкните счетчик «Проблемы» , чтобы открыть средство « Проблемы» и отобразить проблему. Дополнительные сведения см. в разделе «Исправление ошибок JavaScript» в консоли.

DevTools предоставляет подробные сведения об ошибке в консоли:

Поиск строки сообщения об ошибке консоли в Интернете

Найдите в Интернете сообщения об ошибках консоли прямо из DevTools. В консоли многие сообщения об ошибках имеют поиск этого **** сообщения на веб-кнопке, показанный в виде увеличительного лупы:

Замечательный JavaScript #4 Консоль браузера, console.log и document.write

При нажатии кнопки «Поиск этого сообщения в Интернете» в браузере откроется новая вкладка с результатами поиска сообщения об ошибке:

Проверка и фильтрация сведений на текущей веб-странице

При открытии DevTools на веб-странице в консоли может быть слишком много информации. Объем информации становится проблемой, когда необходимо определить важную информацию. Чтобы просмотреть важную информацию, которая требует действий, используйте средство » Проблемы» в DevTools.

Проблемы постепенно перемещаются из консоли в средство «Проблемы «. Однако в консоли по-прежнему есть много информации, поэтому рекомендуется знать об автоматических параметрах журналов и фильтров в консоли. Дополнительные сведения см. в разделе «Сообщения консоли фильтрации».

DevTools с консолью, полной сообщений:

Сведения журнала, отображаемые в консоли

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

Пример кода

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

Откройте демонстрационные примеры сообщений консоли веб-страницы : журнал, сведения, ошибка и предупреждение в новом окне или вкладке.

Чтобы открыть консоль, Ctrl ++ Shift«J нажмите (Windows, Linux) J Command + Option +или (macOS).

Консоль отображает полученные сообщения, вызванные демонстрационным кодом:

Вставьте приведенный выше код в консоль и нажмите клавишу Enter .

Если вы получаете сообщение: Uncaught SyntaxError: Identifier ‘technologies’ has already been declared

Откройте новую вкладку или окно.

Чтобы открыть консоль, Ctrl ++ Shift«J нажмите (Windows, Linux) J Command + Option +или (macOS).

Вставьте приведенный выше код в консоль и нажмите клавишу Enter .

При работе с консолью доступно множество полезных методов. Дополнительные сведения см . в разделе «Сообщения журнала» в средстве консоли.

Попробуйте использовать JavaScript в консоли

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

Чтобы попробовать выполнить JavaScript в консоли, выполните следующие действия:

Откройте консоль.

Консоль отображает результат динамического 2+2 ввода, отображая результат в 4 следующей строке:

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

Чтобы запустить выражение JavaScript в консоли и при необходимости отобразить результат, нажмите клавишу Enter . Затем можно написать следующий код JavaScript для запуска в консоли.

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

По умолчанию код JavaScript выполняется в одной строке. Чтобы запустить строку, введите код JavaScript и нажмите клавишу Enter . Чтобы обойти ограничение в одной строке, нажмите Shift + Enter вместо . Enter

Как и в других интерфейсах командной строки, чтобы получить доступ к предыдущим командам JavaScript, нажмите клавишу Arrow-Up . Функция автозаполнения консоли — это **** отличный способ узнать о незнакомых методах.

Чтобы попробовать автозавершение, выполните следующие действия.

Дополнительные сведения обо всех способах работы с консолью см. в разделе «Консоль как среда JavaScript».

Автозавершение выражений JavaScript в консоли:

Взаимодействие с текущей веб-страницей в браузере

Консоль имеет доступ к объекту Window браузера. Вы можете написать скрипты, взаимодействующие с текущей веб-страницей, считав данные из МОДЕЛИ DOM и назначив данные элементам DOM.

Чтение из дерева DOM в консоли

Чтобы использовать выражение JavaScript для чтения с текущей страницы путем считывания выбранного элемента из дерева DOM:

Откройте консоль.

Вставьте следующий код в консоль и нажмите: Enter

Это выражение выбирает первый уровень заголовка 1 из модели DOM, а затем выбирает HTML-содержимое , содержащегося между начальным и конечным тегами. Консоль отображает выходные данные выражения, которое является текстом заголовка:

Вы считыли данные из представления веб-страницы DOM, введя выражение JavaScript в консоли и **** отобразив выходные данные в консоли.

Запись в дерево DOM и на веб-страницу из консоли

Вы также можете изменить отображаемую веб-страницу, изменив DOM (или запись __ в DOM) из консоли.

Чтобы изменить отображаемую веб-страницу:

Откройте консоль.

Вставьте следующий код в консоль и нажмите: Enter

Приведенное выше выражение JavaScript использует знак = для присвоения значения выбранному элементу DOM. Вычисленное значение выражения является строкой для заголовка в этом примере. Значение выражения (строка заголовка) отображается как в консоли, так и **** на отображаемой веб-странице:

Вы изменили основной заголовок веб-страницы на «Раскапись консоли».

Использование служебного метода консоли $$ для

Методы программы консоли упрощают доступ к текущей веб-странице и управление ней.

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

Откройте консоль.

Вставьте следующий код в консоль и нажмите: Enter

Служебная $$(selector) функция консоли — «Query selector all». Эта функция выбора запросов DOM возвращает массив всех элементов, соответствующих указанному выбору CSS, например функции JavaScript document.querySelectorAll() . В этом примере мы выделим все элементы гиперссылки и применим к ним зеленую рамку:

Дополнительные сведения см. в разделе «Служебные функции и селекторы средства консоли».

Источник

Команды для работы с JavaScript-консолью в браузерах и повышение производительности труда программиста

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

Пожалуй, первое, что многим приходит в голову при слове «консоль» — это команда console.log() . Однако, она — лишь одна из многих подобных команд. Материал, перевод которого мы сегодня публикуем, посвящён особенностям работы с консолью JavaScript.

Что такое консоль?

Консоль JavaScript — это механизм, интегрированный в современные браузеры, который поддерживает встроенные инструменты разработки в интерфейсе, напоминающем командную строку. С использованием консоли разработчик может делать следующее:

• Просматривать журналы ошибок и предупреждений, возникающих на веб-странице.
• Взаимодействовать с веб-страницей, используя команды JavaScript.
• Отлаживать приложения и работать с DOM непосредственно из браузера.
• Исследовать и анализировать сетевую активность.

Методы console.log, console.error, console.warn и console.info

Вероятно, наиболее часто используемыми методами при работе с консолью являются console.log() , console.error() , console.warn() и console.info() . Этим методам можно передавать один или несколько параметров. Система вычисляет значение каждого из них и объединяет все результаты в строку, части которой разделены пробелами. В случае с объектами или массивами эти команды позволяют выводить их в таком виде, который позволяет просматривать их содержимое. Вот как это выглядит.

Использование различных команд для вывода данных в консоль

Метод console.group

Метод console.group() позволяет собирать серии вызовов console.log() (а также — других подобных методов) в группы, содержимое которых можно сворачивать и разворачивать. Пользоваться этим методом очень просто: после вызова console.group() (или после console.groupCollapsed() , если группу требуется вывести сразу в свёрнутом виде) нужно поместить все вызовы console.log() , которые надо сгруппировать. Затем, в конце набора команд, которые требуется сгруппировать, надо поместить команду console.groupEnd() . Рассмотри пример.

В консоль, после выполнения этого фрагмента кода, попадёт следующее.

Группировка данных в консоли с помощью метода console.group()

Метод console.table

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

То, что получилось, и выглядит отлично, и способно облегчить отладку.

Табличное оформление выводимых данных с помощью console.table()

Методы console.count, console.time и console.timeEnd

Методы console.count() , console.time() и console.timeEnd() можно назвать чем-то вроде швейцарского ножа для разработчика, который занимается отладкой приложений. Так, метод console.count() позволяет подсчитывать количество собственных вызовов и выводить его в консоль с заданной меткой.

Метод console.time() позволяет запустить именованный таймер (имя передаётся ему в качестве параметра, на одной странице может присутствовать до 10000 таймеров). Для того чтобы остановить конкретный таймер, используется команда console.timeEnd() с меткой таймера, передаваемой в качестве параметра. Она останавливает таймер и выводит время его работы в консоль. Вот как пользоваться этими методами.

А вот как выглядит результат работы этого кода в консоли.

Использование методов console.count(), console.time() и console.timeEnd()

Методы console.trace и console.assert

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

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

Результат использования команд console.assert() и console.trace()

Команды для работы с консолью и продакшн-код

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

Не стоит нагружать компьютеры ненужной работой, пусть и такой, казалось бы, незначительной, как вывод данных в консоль. В то же время, учитывая то, что команды для работы с консолью могут пригодиться в ходе доработки приложения, лучше всего не удалять их из исходного кода программы насовсем, а убирать их лишь из её продакшн-версии. Тут нам на помощь придут средства для сборки проектов. Так, я постоянно пользуюсь Webpack, и на работе, и в собственных проектах. Этот инструмент позволяет удалять все ненужные команды по работе с консолью (он способен отличить их от других команд) из продакшн-сборок с использованием uglifyjs-webpack-plugin.

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

Итоги

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

Уважаемые читатели! Какие команды для работы с JavaScript-консолью вы используете?

Источник