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

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

Консоль похожа на интеллектуальную, многофункциональную командную строку в 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.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 по мере его ввода. Результат 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-содержимое, содержащееся между начальным

и конечным тегами. В консоли отображаются выходные данные выражения, которые являются текстом заголовка:

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

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

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

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

Откройте консоль.
Вставьте следующий код в консоль и нажмите клавишу ВВОД:

document.querySelector('h1').innerHTML = 'Rocking the Console';

Запись текста в DOM в консоли

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

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

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

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

Откройте консоль.
Вставьте следующий код в консоль и нажмите клавишу ВВОД:

$$('a').forEach(a => a.style.border='1px solid lime');

Управление выбором элементов с помощью консоли

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

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

См. также

Взаимодействие с DOM с помощью консоли.
Справочник по функциям консоли
Справочные материалы по API объектов консоли
Вспомогательные функции и селекторы средства «Консоль»

Справочник по функциям консоли

В этой статье описаны функции консоли.

Содержимое:

Открытие консоли
- Открытие средства «Консоль»
- Открытие средства «Консоль» в ящике
- Открытие параметров консоли
- Открытие боковой панели консоли
- Отключение группирования сообщений
- Ведение журнала запросов XHR и выборки
- Сохранение сообщений при загрузке страницы
- Скрыть сетевые сообщения
- Фильтрация сообщений браузера
- Фильтрация по уровню журнала
- Фильтрация сообщений по URL-адресу
- Фильтрация сообщений из разных контекстов
- Фильтрация сообщений, не соответствующих шаблону регулярного выражения
- Повторное выполнение выражений из журнала
- Просмотр значения выражения в режиме реального времени с помощью динамических выражений
- Отключить страстную оценку
- Отключение автозаполнения из журнала
- Выбор контекста JavaScript
Открытие консоли

Консоль можно открыть как инструмент в верхней области или как инструмент в ящике.

Открытие средства «Консоль»

Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS).

Чтобы открыть средство «Консоль» в меню «Команда», введите Console и выполните команду Показать консоль , рядом с которой отображается значок Панель .

Открытие средства «Консоль» в ящике

Нажмите клавишу ESC. Или щелкните Настройка и управление средствами разработки ( . ), а затем выберите Показать панель консоли.

В нижней части окна Средства разработки появится окно «Панель» с открытым инструментом «Консоль «.

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

Открытие параметров консоли

Нажмите кнопку Параметры консоли ().

Открытие боковой панели консоли

Чтобы отобразить боковую панель, щелкните Показать боковую панель консоли (). Боковая панель помогает выполнять фильтрацию.

Просмотр сообщений

В этом разделе содержатся функции, изменяющие способ представления сообщений в консоли. Практическое пошаговое руководство см. в разделе Просмотр сообщений.

Отключение группирования сообщений

Чтобы отключить поведение группирования сообщений по умолчанию в консоли, нажмите кнопку Параметры консоли (), а затем установите флажок Рядом с пунктом Сгруппировать аналогично. Пример см. в разделах Log XHR и Fetch requests.

Ведение журнала запросов XHR и выборки

Чтобы записать все XMLHttpRequest запросы в консоль по Fetch мере каждого из них, нажмите кнопку Параметры консоли () и установите флажок рядом с полем Log XMLHttpRequests.

В верхнем сообщении на предыдущем рисунке отображается поведение группирования по умолчанию консоли.

##### Old Figure 9 > How the logged `XMLHttpRequest` and `Fetch` requests look after ungrouping > ![How the logged XMLHttpRequest and Fetch requests look after ungrouping](./reference-images/console-xhr-fetch-all.png) —>

Сохранение сообщений при загрузке страницы

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

Скрыть сетевые сообщения

Действие по умолчанию для Microsoft Edge заключается в том, чтобы записывать сетевые сообщения в консоль. На следующем рисунке выбранное сообщение представляет код 429 состояния HTTP для .

Чтобы скрыть сетевые сообщения, выполните приведенные далее действия.
1. Нажмите кнопку Параметры консоли ().
2. Установите флажок рядом с пунктом Скрыть сеть.
Фильтрация сообщений

Существует несколько способов фильтрации сообщений в консоли.

Фильтрация сообщений браузера

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

Фильтрация по уровню журнала

DevTools назначает каждому console.* методу один из четырех уровней серьезности:

Например, console.log() находится в Info группе, но console.error() находится в Error группе. Справочник по API объектов консоли описывает уровень серьезности каждого применимого метода. Каждое сообщение, которое браузер регистрирует в консоли, также имеет уровень серьезности.

Вы можете скрыть сообщения любого уровня, которые вас не интересуют. Например, если вас интересуют Error только сообщения, можно скрыть остальные три группы.

Чтобы отфильтровать сообщения, щелкните раскрывающийся список Уровни журнала и выберите Verbose , Info , Warning или Error .

Чтобы использовать уровень журнала для фильтрации, откройте боковую панель консоли и выберите Ошибки, Предупреждения, Сведения или Подробные сведения.

Фильтрация сообщений по URL-адресу

Введите url: url-адрес, чтобы просмотреть только сообщения, полученные из этого URL-адреса. После ввода url: средства разработки отобразятся все соответствующие URL-адреса. Домены также работают. Например, если https://example.com/a.js и https://example.com/b.js регистрируют сообщения, url:https://example.com позволяет сосредоточиться на сообщениях из этих двух скриптов.

Чтобы скрыть сообщения из URL-адреса, введите -url: . Это отрицательный фильтр URL-адресов.

Чтобы отобразить сообщения из одного URL-адреса, выполните приведенные далее действия.
1. Откройте боковую панель консоли.
2. Разверните раздел #пользовательские сообщения .
3. Выберите URL-адрес скрипта, который содержит сообщения, на которые нужно сосредоточиться.
Фильтрация сообщений из разных контекстов

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

Фильтрация сообщений, не соответствующих шаблону регулярного выражения

Введите регулярное выражение, /[gm][ta][mi]/ например, в текстовое поле Фильтр , чтобы отфильтровать сообщения, которые не соответствуют шаблону. DevTools проверяет, найден ли шаблон в тексте сообщения или в скрипте, который вызвал запись сообщения в журнал.

Запуск JavaScript

В этом разделе содержатся функции, связанные с запуском JavaScript в консоли. Практическое пошаговое руководство см. в статье Запуск JavaScript.

Повторное выполнение выражений из журнала

Нажмите клавишу СТРЕЛКА ВВЕРХ , чтобы циклически просмотреть журнал выражений JavaScript, которые вы выполнили ранее в консоли. Нажмите клавишу ВВОД , чтобы снова запустить это выражение.

Просмотр значения выражения в режиме реального времени с помощью динамических выражений

Если вы несколько раз вводите одно и то же выражение JavaScript в консоли , вам может быть проще создать динамическое выражение. С помощью динамических выражений вы вводите выражение один раз, а затем закрепляете его в верхней части консоли. Значение выражения обновляется почти в реальном времени. См . раздел Просмотр значений выражений JavaScript в Real-Time с динамическими выражениями.

Отключить страстную оценку

При вводе выражений JavaScript в консоли отображается предварительный просмотр возвращаемого значения. Чтобы отключить предварительный просмотр возвращаемых значений, выполните следующие действия.
1. Нажмите кнопку Параметры консоли ().
2. Снимите флажок рядом с кнопкой Охотное вычисление.
Отключение автозаполнения из журнала

При вводе выражения во всплывающем окне автозаполнения консоли отображаются выражения, которые вы выполнили ранее. Выражения предварительно заполняются символом > . Чтобы остановить отображение выражений из журнала, нажмите кнопку Параметры консоли (), а затем снимите флажок Рядом с флажком Автозаполнение из журнала .

На следующем рисунке и document.querySelector(‘img’) являются выражениями, document.querySelector(‘a’) которые были оценены ранее.

Выбор контекста JavaScript

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

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

Очистка консоли

Чтобы очистить консоль, используйте любой из следующих подходов:
- Щелкните Очистить консоль ().
- Щелкните сообщение правой кнопкой мыши и выберите Команду Очистить консоль.
- Введите clear() в консоли и нажмите клавишу ВВОД.
- Вызов из console.clear() JavaScript веб-страницы.
- Нажмите клавиши CTRL+L , пока консоль находится в фокусе.
См. также
- Журнал сообщений в средстве «Консоль» — фильтрация сообщений журнала, таких как «Сведения», «Предупреждения» и «Ошибки» в консоли.
- Начало работы с запуском JavaScript в консоли . Инструкции по выполнению инструкций и выражений JavaScript в консоли.
- Справочник по API объектов консоли . Функции и выражения, которые можно ввести в консоли для записи сообщений в консоль, например console.log() .
- Служебные функции и селекторы консольных инструментов — удобные функции, которые можно вводить в средстве консоли , например monitorEvents() .
Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.

Как запустить консоль (панель разработчика) в большинстве браузеров.

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

Выглядит это примерно так:

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

Для тех, кто хочет посмотреть как эта панель помогает на практике, в веб-разработке, посмотрите этот курс «Консоль браузера. Эффективная работа.»

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

Чаще всего, в Windows — это будет комбинация клавиш:
```
Ctrl + Shift + I
```
Для компьютеров на Mac OS подобная комбинация выглядит следующим образом:
```
⌥ + ⌘ + I (или Shift + Cmd + I)
```
Эта комбинация клавиш должна работать и для браузера Opera

И в браузере Firefox

Единственное исключение из этого правила Internet Explorer, здесь консоль вызывается клавишей F12.

Нужно просто запомнить эти комбинации клавиш.

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

Для тех, кто хочет посмотреть как эта панель помогает на практике, в веб-разработке, посмотрите этот курс «Консоль браузера. Эффективная работа.»

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

База знаний

Эта статья создана с использованием машинного перевода.

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

Jenny Takahara , 1 ноября 2023 г.

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

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

Информация о консоли браузера

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

Чтобы открыть консоль браузера в большинстве браузеров, вы можете:
- Щелкнуть правой кнопкой мыши
- Нажмите «Инспектировать/Инспектировать элемент»
- Нажмите «Консоль»
Если возникают ошибки страницы, они появятся красным и должны быть включены в любые снимки экрана, которые вы предоставляете для службы поддержки. Pipedrive не предоставляет карты исходных кодов (предупреждения консоли в желтых алертах), поэтому, пожалуйста, скройте их.

Дополнительную информацию о том, как открыть консоль браузера, можно найти по ссылке здесь.

Примечание: Убедитесь, что выбрана вкладка Консоль, когда делаете снимок экрана.

Информация о сети браузера

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

Чтобы открыть вкладку сети в большинстве браузеров, вы можете:
- Щелкнуть правой кнопкой мыши
- Кликнуть «Inspect/Inspect Element»
- Кликнуть «Network»
После переключения на вкладку Network, перезагрузите страницу, чтобы записать действия в журнале сети перед созданием скриншота.

При создании скриншота вкладки сети браузера, пожалуйста, запишите все ошибки, которые появляются.
Похожие публикации: