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

Статья
07/12/2023

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

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

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

Вы можете открыть консоль в верхней или нижней части devTools. Он показан в верхней части на панели действий:

Открытие средства

Консоль отображается здесь в нижней части DevTools (панель быстрого просмотра), а над ней откроется инструмент Элементы:

Консоль на нижней панели с открытым инструментом

Самый быстрый способ открыть консоль напрямую — нажать клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS).

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

Консоль — это место по умолчанию, где сообщается об ошибках JavaScript и подключения. Дополнительные сведения см. в статье Исправление ошибок JavaScript, о которых сообщается в консоли.

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

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

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

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

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

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

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

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

Средства разработки с консолью , полной сообщений:

Средства разработки с консолью, полной сообщений

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

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

Пример кода

// prints the text to the console as  a log message
console.log('This is a log message');

// prints the text to the console as an informational message
console.info('This is some information'); 

// prints the text to the console as an error message
console.error('This is an error');

// prints the text to the console as a warning
console.warn('This is a warning');

// prints the geometry of the document body as an object
console.log(document.body.getBoundingClientRect());

// prints the geometry of the document body as a table
console.table(document.body.getBoundingClientRect());

// shows a list of techologies as a collapsed group
let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
console.groupCollapsed('Technolgies');
technologies.forEach(tech => {console.info(tech);})
console.groupEnd('Technolgies');

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

Откройте демонстрационную веб-страницу Примеры сообщений консоли: журнал, информация, ошибка и предупреждение в новом окне или вкладке.
Чтобы открыть консоль, нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS).

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

Если вы получаете сообщение: Uncaught SyntaxError: Identifier 'technologies' has already been declared:
Откройте новую вкладку или окно.
Чтобы открыть консоль, нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS).
Вставьте приведенный выше код в консоль и нажмите клавишу ВВОД.

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

Пробное использование JavaScript в режиме реального времени в консоли

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

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

Откройте консоль.
Введите 2+2.

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

Консоль отображает результат 2+2 в режиме реального времени при вводе

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

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

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

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

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

Как и в других интерфейсах командной строки, для доступа к предыдущим командам JavaScript нажмите клавишу СТРЕЛКА ВВЕРХ. Функция автозаполнения консоли — это отличный способ узнать о незнакомых методах.

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

Откройте консоль.
Введите doc.
Выберите document в раскрывающемся меню.
Нажмите клавишу TAB , чтобы выбрать document.
Введите .bo.
Нажмите клавишу TAB , чтобы выбрать document.body.
Введите другой . , чтобы отобразить полный список свойств и методов, доступных в тексте текущей веб-страницы.

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

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

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

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

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

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

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

Откройте консоль.
Вставьте следующий код в консоль и нажмите клавишу ВВОД:
```
document.querySelector('h1').innerHTML
```
Это выражение выбирает первый уровень заголовка 1 из DOM, а затем выбирает HTML-содержимое, содержащееся между начальным <h1> и конечным тегами. В консоли отображаются выходные данные выражения, которые являются текстом заголовка:

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

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

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

Чтобы изменить отрисованную веб-страницу, выполните следующие действия:

Откройте консоль.
Вставьте следующий код в консоль и нажмите клавишу ВВОД:
```
document.querySelector('h1').innerHTML = 'Rocking the Console';
```
Приведенное выше выражение JavaScript использует = знак для присвоения значения выбранному элементу DOM. Вычисляемое значение выражения представляет собой строку для заголовка в этом примере. Значение выражения (строка заголовка) отображается как в консоли , так и на отображаемой веб-странице:

Вы изменили заголовок main веб-страницы на Раскачивая консоль.

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

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

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

Откройте консоль.
Вставьте следующий код в консоль и нажмите клавишу ВВОД:
```
$$('a').forEach(a => a.style.border='1px solid lime');
```
Служебная $$(selector) функция консоли — "Селектор запросов все". Эта функция селектора запросов DOM возвращает массив всех элементов, соответствующих указанному селектору CSS, например функцию document.querySelectorAll()JavaScript . В этом примере мы выберем все элементы гиперссылки <a> , а затем применим к ним зеленый прямоугольник:

Дополнительные сведения см. в разделе Функции и селекторы средств консоли.