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

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

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

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

Средство "Консоль" можно открыть в верхней или нижней части средств разработчика. он показан в верхней части, на панели действий:

Средство

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

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

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

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

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

Средства разработчика предоставляют подробные сведения об ошибке в консоли:

Средства разработчика предоставляют подробные сведения об ошибке в консоли

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

Выполните поиск сообщений об ошибках консоли в Интернете непосредственно из 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 technologies as a collapsed group
let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
console.groupCollapsed('Technologies');
technologies.forEach(tech => {console.info(tech);})
console.groupEnd();

Чтобы зарегистрировать информацию для отображения в консоли:

Открыть демонстрационную веб-страницу Примеры сообщений консоли: журнал, информация, ошибка и предупреждение в новом окне или вкладке.
Чтобы открыть консоль, нажмите клавиши 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 в прямом эфире по мере его ввода

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

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

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

Выполните несколько строк JavaScript-кода подряд

По умолчанию код JavaScript выполняется на одной строке. Чтобы запустить строку, введите свой JavaScript и нажмите Enter. Чтобы обойти ограничение в одну строку, нажмите клавиши 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. В этом примере вычисленное значение выражения является строкой для заголовка. Значение выражения (строка заголовка) отображается как в консоли , так и на отрисованной веб-странице:

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

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

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

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

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

Дополнительные сведения см. в разделе Вспомогательные функции и селекторы средства "Консоль".

См. также

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-09-02