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

Kayce Basques

Sofia Emelianova

Эта страница содержит описание функций консоли инструментов разработчика Chrome. Предполагается, что вы уже знакомы с использованием консоли для просмотра сообщений журнала и выполнения JavaScript. Если нет, см. раздел «Начало работы» .

Если вам нужна справочная информация по API таких функций, как console.log() см. Справочник по API консоли . Справочную информацию по функциям, таким как monitorEvents() см. Справочник по API утилит консоли .

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

Консоль можно открыть как панель или как вкладку в выдвижном меню .

Откройте панель «Консоль».

Нажмите Control + Shift + J или Command + Option + J (Mac).

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

Откройте консоль в выдвижном ящике.

Нажмите клавишу Escape или щелкните «Настроить и управлять инструментами разработчика». а затем выберите «Показать выдвижную консоль» .

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

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

Откройте настройки консоли

Нажмите Настройки консоли находятся в правом верхнем углу консоли .

Ссылки ниже содержат пояснения к каждой настройке:

• Скрыть сеть
• Сохраните бревно
• Только для избранного контекста
• Сгруппируйте похожие сообщения в консоли.
• Отобразить ошибки CORS в консоли
• Запись в журнал XMLHttpRequests
• Нетерпеливая оценка
• Автозаполнение из истории

Откройте боковую панель консоли.

Нажмите «Показать боковую панель консоли» . для отображения боковой панели, которая полезна для фильтрации.

Просмотреть сообщения

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

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

Откройте настройки консоли и отключите функцию группировки, аналогично тому, как это делается для отключения стандартного поведения консоли по группировке сообщений. Пример см. в разделе «Запись XHR-запросов и запросов Fetch» .

Просмотр сообщений с точек останова

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

• console.* вызывает условные точки останова, отмеченные оранжевым вопросительным знаком ?
• Сообщения Logpoint , отмеченные двумя розовыми точками ..

Чтобы перейти к встроенному редактору точек останова на панели «Источники» , щелкните ссылку рядом с сообщением о точке останова.

Просмотреть трассировку стека

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

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

Просмотрите причины ошибок в трассировках стека.

В консоли можно отобразить цепочки причин ошибок в трассировке стека, если таковые имеются.

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

Просмотреть трассировку стека асинхронных операций

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

В данном случае трассировка стека показывает "полную картину" асинхронной операции.

Отображение известных сторонних фреймов в трассировках стека.

Если в картах исходного кода присутствует поле ignoreList , по умолчанию консоль скрывает из трассировки стека сторонние фреймы из исходных файлов, сгенерированных сборщиками (например, webpack) или фреймворками (например, Angular).

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

Чтобы всегда отображать полный трассировочный стек, отключите эту функцию. Настройки > Список игнорируемых скриптов > Автоматически добавлять известные сторонние скрипты в список игнорируемых скриптов.

Регистрируйте запросы XHR и Fetch.

Откройте настройки консоли и включите параметр «Регистрировать XMLHttpRequests» , чтобы записывать все запросы XMLHttpRequest и Fetch в консоль по мере их выполнения.

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

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

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

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

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

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

1. Откройте настройки консоли .
2. Установите флажок «Скрыть сеть» .

Показать или скрыть ошибки CORS

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

Чтобы отобразить или скрыть ошибки CORS:

1. Откройте настройки консоли .
2. Установите или снимите флажок «Показывать ошибки CORS в консоли» .

Если в консоли настроено отображение ошибок CORS, и вы с ними столкнулись, вы можете нажать следующие кнопки рядом с ошибками:

• открыть запрос с TypeError связанной с CORS, в панели «Сеть» .
• Возможное решение можно найти на вкладке «Проблемы» .

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

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

Отфильтровать сообщения браузера

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

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

Инструменты разработчика присваивают большинству методов console.* уровни серьезности.

Существует четыре уровня:

• Verbose
• Info
• Warning
• Error

Например, console.log() относится к группе Info , а console.error() — к группе Error . В справочнике API консоли описан уровень серьезности каждого применимого метода.

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

Чтобы включить или отключить сообщения в режимах Verbose , Info , Warning или Error , щелкните раскрывающийся список Log Levels .

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

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

Введите url: а затем URL-адрес, чтобы просмотреть только сообщения, присланные с этого URL-адреса. После ввода url: в инструментах разработчика отобразятся все соответствующие URL-адреса.

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

Чтобы скрыть все сообщения с указанного URL-адреса, введите -url: а затем сам URL-адрес, например, https://b.wal.co . Это фильтр с отрицательным URL-адресом.

Также вы можете отображать сообщения с одного URL-адреса, открыв боковую панель консоли , развернув раздел «Сообщения пользователей» , а затем щелкнув URL-адрес скрипта, содержащего сообщения, на которых вы хотите сосредоточиться.

Фильтрация сообщений из разных контекстов

Предположим, на вашей странице размещена реклама. Реклама встроена в <iframe> и генерирует множество сообщений в консоли. Поскольку эта реклама находится в другом контексте JavaScript , один из способов скрыть её сообщения — открыть настройки консоли и включить флажок «Только выбранный контекст» .

Отфильтруйте сообщения, не соответствующие шаблону регулярного выражения.

Введите регулярное выражение, например /[foo]\s[bar]/ в текстовое поле «Фильтр» , чтобы отфильтровать сообщения, не соответствующие этому шаблону. Пробелы не поддерживаются, используйте вместо них \s . Инструменты разработчика проверят, найден ли шаблон в тексте сообщения или в скрипте, вызвавшем запись сообщения в лог.

Например, следующий фильтр отфильтровывает все сообщения, которые не соответствуют /[gm][ta][mi]/ .

Поиск текста в логах

Для поиска текста в сообщениях журнала:

1. Чтобы открыть встроенную строку поиска, нажмите Command + F (Mac) или Ctrl + F (Windows, Linux).
2. В строке поиска введите свой запрос. В этом примере запрос называется legacy . При желании вы можете:
   • Нажмите Используйте функцию Match Case , чтобы сделать ваш запрос чувствительным к регистру.
   • Нажмите Используйте регулярные выражения для поиска с помощью выражения RegEx.
3. Нажмите Enter . Чтобы перейти к предыдущему или следующему результату поиска, нажмите кнопку вверх или вниз.

Запустить JavaScript

В этом разделе описаны возможности запуска JavaScript в консоли. Подробное пошаговое руководство см. в разделе «Запуск JavaScript» .

Параметры копирования строк

По умолчанию консоль выводит строки как допустимые JavaScript-литералы. Щелкните правой кнопкой мыши по выводу и выберите один из трех вариантов копирования:

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

Повторно выполните предыдущие действия и очистите историю.

Нажмите клавишу «Стрелка вверх» , чтобы просмотреть историю выражений JavaScript, которые вы запускали ранее в консоли . Нажмите Enter , чтобы запустить это выражение снова.

Чтобы очистить историю консоли, щелкните правой кнопкой мыши по пустому месту в консоли и выберите в контекстном меню пункт «Очистить историю консоли» .

Очистить, скопировать, развернуть, свернуть и сохранить сообщения

Чтобы очистить окно консоли , выполните одно из следующих действий:

• Нажмите кнопку « Очистить консоль» на панели действий вверху.
• Нажмите Ctrl + L или Cmd + K.
• Щелкните правой кнопкой мыши по пустому месту в консоли и выберите пункт «Очистить консоль» в контекстном меню.

Чтобы развернуть или свернуть все сообщения, нажмите кнопку «Развернуть все» (Развернуть) или кнопку «Свернуть все» (Свернуть) на панели действий вверху.

Из контекстного меню вы также можете:

• Copy console : Копирует все текущие сообщения в буфер обмена, но не историю предыдущих команд .
• Сохранить как... : Сохраняет все текущие сообщения в текстовый файл с расширением .log .

Отслеживайте значение выражения в режиме реального времени с помощью функции Live Expressions.

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

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

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

Инициировать активацию пользователя с помощью оценки

Активация пользователя — это состояние сеанса просмотра, зависящее от действий пользователя. Состояние «активен» означает, что пользователь в данный момент взаимодействует со страницей или взаимодействовал с ней с момента загрузки страницы.

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

Отключить автозаполнение из истории

По мере ввода выражения всплывающее окно автозаполнения в консоли отображает выражения, которые вы выполняли ранее. Эти выражения начинаются с символа > . В следующем примере инструменты разработчика ранее выполнили document.querySelector('a') и document.querySelector('img') .

Откройте настройки консоли и снимите флажок « Автозаполнение из истории» , чтобы прекратить отображение выражений из вашей истории.

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

По умолчанию в раскрывающемся списке «Контекст JavaScript» установлено значение «top », которое представляет собой контекст просмотра основного документа.

Предположим, на вашей странице размещена реклама, встроенная в <iframe> . Вы хотите запустить JavaScript, чтобы изменить DOM-структуру рекламы. Для этого сначала необходимо выбрать контекст просмотра рекламы из выпадающего списка «Контекст JavaScript» .

Проверить свойства объекта

В консоли можно отобразить интерактивный список свойств указанного вами объекта JavaScript.

Для просмотра списка введите имя объекта в консоль и нажмите Enter .

Чтобы просмотреть свойства объектов DOM, выполните действия, описанные в разделе «Просмотр свойств объектов DOM» .

Найдите собственную и унаследованную недвижимость.

В консоли свойства собственного объекта отображаются первыми и выделяются жирным шрифтом.

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

Оцените пользовательские средства доступа.

По умолчанию DevTools не выполняет проверку созданных вами методов доступа. Чтобы выполнить проверку пользовательского метода доступа к объекту, нажмите (...) .

Найдите перечислимые и неперечислимые свойства.

Перечислимые свойства имеют яркий цвет. Неперечислимые свойства имеют приглушенный цвет. Перечисляемые свойства можно перебирать с помощью цикла for … in или метода Object.keys() .

Выявление закрытых свойств экземпляров классов

В консоли закрытые свойства экземпляров классов обозначаются префиксом # .

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

Проверьте внутренние свойства JavaScript.

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

Внутренние свойства различных объектов могут быть следующими:

• Любой объект имеет [[Prototype]] .
• Примитивные обертки имеют свойство [[PrimitiveValue]] .
• Объекты ArrayBuffer обладают следующими свойствами:
  • [[Int8Array]] , [[Uint8Array]] , [[Int16Array]] , [[Int32Array]]
  • [[ArrayBufferByteLength]] , [[ArrayBufferData]]
• В дополнение к свойствам, специфичным ArrayBuffer , объекты WebAssembly.Memory имеют свойство [[WebAssemblyMemory]] .
• У коллекций с ключами (карт и множеств) есть свойство [[Entries]] , содержащее их записи с ключами.
• Объекты Promise обладают следующими свойствами:
  • [[PromiseState]] : ожидается, выполнено или отклонено
  • [[PromiseResult]] : undefined если ожидается, <value> если выполнено, <reason> если отклонено
• Proxy объекты обладают следующими свойствами: объект [[Handler]] , объект [[Target]] и [[isRevoked]] (отключено или нет).

Проверьте функции

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

Для просмотра внутренних свойств функций JavaScript используйте команду console.dir() .

Функции обладают следующими свойствами:

• [[FunctionLocation]] . Ссылка на строку с определением функции в исходном файле.
• [[Scopes]] . Отображает значения и выражения, к которым функция имеет доступ. Чтобы просмотреть области видимости функции во время отладки, см. раздел «Просмотр и редактирование локальных, замыкающих и глобальных свойств» .
• Связанные функции обладают следующими свойствами:
  • [[TargetFunction]] . Цель функции bind() .
  • [[BoundThis]] . Значение this .
  • [[BoundArgs]] . Массив аргументов функции.
• Функции-генераторы помечены свойством [[IsGenerator]]: true .
• Генераторы возвращают объекты-итераторы, обладающие следующими свойствами:
  • [[GeneratorLocation]] . Ссылка на строку с определением генератора в исходном файле.
  • [[GeneratorState]] : suspended , closed или running.
  • [[GeneratorFunction]] . Генератор, вернувший объект.
  • [[GeneratorReceiver]] . Объект, получающий значение.

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

Для очистки консоли можно использовать любой из следующих способов:

• Нажмите «Очистить консоль» .
• Щелкните правой кнопкой мыши по сообщению и выберите «Очистить консоль» .
• Введите clear() в консоли и нажмите Enter .
• Вызовите метод console.clear() из JavaScript-кода вашей веб-страницы.
• Нажмите сочетание клавиш Control + L, когда консоль находится в фокусе.

Kayce Basques

Sofia Emelianova

Эта страница содержит описание функций консоли инструментов разработчика Chrome. Предполагается, что вы уже знакомы с использованием консоли для просмотра сообщений журнала и выполнения JavaScript. Если нет, см. раздел «Начало работы» .

Если вам нужна справочная информация по API таких функций, как console.log() см. Справочник по API консоли . Справочную информацию по функциям, таким как monitorEvents() см. Справочник по API утилит консоли .

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

Консоль можно открыть как панель или как вкладку в выдвижном меню .

Откройте панель «Консоль».

Нажмите Control + Shift + J или Command + Option + J (Mac).

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

Откройте консоль в выдвижном ящике.

Нажмите клавишу Escape или щелкните «Настроить и управлять инструментами разработчика». а затем выберите «Показать выдвижную консоль» .

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

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

Откройте настройки консоли

Нажмите Настройки консоли находятся в правом верхнем углу консоли .

Ссылки ниже содержат пояснения к каждой настройке:

• Скрыть сеть
• Сохраните бревно
• Только для избранного контекста
• Сгруппируйте похожие сообщения в консоли.
• Отобразить ошибки CORS в консоли
• Запись в журнал XMLHttpRequests
• Нетерпеливая оценка
• Автозаполнение из истории

Откройте боковую панель консоли.

Нажмите «Показать боковую панель консоли» . для отображения боковой панели, которая полезна для фильтрации.

Просмотреть сообщения

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

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

Откройте настройки консоли и отключите функцию группировки, аналогично тому, как это делается для отключения стандартного поведения консоли по группировке сообщений. Пример см. в разделе «Запись XHR-запросов и запросов Fetch» .

Просмотр сообщений с точек останова

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

• console.* вызывает условные точки останова, отмеченные оранжевым вопросительным знаком ?
• Сообщения Logpoint , отмеченные двумя розовыми точками ..

Чтобы перейти к встроенному редактору точек останова на панели «Источники» , щелкните ссылку рядом с сообщением о точке останова.

Просмотреть трассировку стека

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

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

Просмотрите причины ошибок в трассировках стека.

В консоли можно отобразить цепочки причин ошибок в трассировке стека, если таковые имеются.

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

Просмотреть трассировку стека асинхронных операций

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

В данном случае трассировка стека показывает "полную картину" асинхронной операции.

Отображение известных сторонних фреймов в трассировках стека.

Если в картах исходного кода присутствует поле ignoreList , по умолчанию консоль скрывает из трассировки стека сторонние фреймы из исходных файлов, сгенерированных сборщиками (например, webpack) или фреймворками (например, Angular).

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

Чтобы всегда отображать полный трассировочный стек, отключите эту функцию. Настройки > Список игнорируемых скриптов > Автоматически добавлять известные сторонние скрипты в список игнорируемых скриптов.

Регистрируйте запросы XHR и Fetch.

Откройте настройки консоли и включите параметр «Регистрировать XMLHttpRequests» , чтобы записывать все запросы XMLHttpRequest и Fetch в консоль по мере их выполнения.

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

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

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

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

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

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

1. Откройте настройки консоли .
2. Установите флажок «Скрыть сеть» .

Показать или скрыть ошибки CORS

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

Чтобы отобразить или скрыть ошибки CORS:

1. Откройте настройки консоли .
2. Установите или снимите флажок «Показывать ошибки CORS в консоли» .

Если в консоли настроено отображение ошибок CORS, и вы с ними столкнулись, вы можете нажать следующие кнопки рядом с ошибками:

• открыть запрос с TypeError связанной с CORS, в панели «Сеть» .
• Возможное решение можно найти на вкладке «Проблемы» .

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

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

Отфильтровать сообщения браузера

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

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

Инструменты разработчика присваивают большинству методов console.* уровни серьезности.

Существует четыре уровня:

• Verbose
• Info
• Warning
• Error

Например, console.log() относится к группе Info , а console.error() — к группе Error . В справочнике API консоли описан уровень серьезности каждого применимого метода.

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

Чтобы включить или отключить сообщения в режимах Verbose , Info , Warning или Error , щелкните раскрывающийся список Log Levels .

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

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

Введите url: а затем URL-адрес, чтобы просмотреть только сообщения, присланные с этого URL-адреса. После ввода url: в инструментах разработчика отобразятся все соответствующие URL-адреса.

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

Чтобы скрыть все сообщения с указанного URL-адреса, введите -url: а затем сам URL-адрес, например, https://b.wal.co . Это фильтр с отрицательным URL-адресом.

Также вы можете отображать сообщения с одного URL-адреса, открыв боковую панель консоли , развернув раздел «Сообщения пользователей» , а затем щелкнув URL-адрес скрипта, содержащего сообщения, на которых вы хотите сосредоточиться.

Фильтрация сообщений из разных контекстов

Предположим, на вашей странице размещена реклама. Реклама встроена в <iframe> и генерирует множество сообщений в консоли. Поскольку эта реклама находится в другом контексте JavaScript , один из способов скрыть её сообщения — открыть настройки консоли и включить флажок «Только выбранный контекст» .

Отфильтруйте сообщения, не соответствующие шаблону регулярного выражения.

Введите регулярное выражение, например /[foo]\s[bar]/ в текстовое поле «Фильтр» , чтобы отфильтровать сообщения, не соответствующие этому шаблону. Пробелы не поддерживаются, используйте вместо них \s . Инструменты разработчика проверят, найден ли шаблон в тексте сообщения или в скрипте, вызвавшем запись сообщения в лог.

Например, следующий фильтр отфильтровывает все сообщения, которые не соответствуют /[gm][ta][mi]/ .

Поиск текста в логах

Для поиска текста в сообщениях журнала:

1. Чтобы открыть встроенную строку поиска, нажмите Command + F (Mac) или Ctrl + F (Windows, Linux).
2. В строке поиска введите свой запрос. В этом примере запрос называется legacy . При желании вы можете:
   • Нажмите Используйте функцию Match Case , чтобы сделать ваш запрос чувствительным к регистру.
   • Нажмите Используйте регулярные выражения для поиска с помощью выражения RegEx.
3. Нажмите Enter . Чтобы перейти к предыдущему или следующему результату поиска, нажмите кнопку вверх или вниз.

Запустить JavaScript

В этом разделе описаны возможности запуска JavaScript в консоли. Подробное пошаговое руководство см. в разделе «Запуск JavaScript» .

Параметры копирования строк

По умолчанию консоль выводит строки как допустимые JavaScript-литералы. Щелкните правой кнопкой мыши по выводу и выберите один из трех вариантов копирования:

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

Повторно выполните предыдущие действия и очистите историю.

Нажмите клавишу «Стрелка вверх» , чтобы просмотреть историю выражений JavaScript, которые вы запускали ранее в консоли . Нажмите Enter , чтобы запустить это выражение снова.

Чтобы очистить историю консоли, щелкните правой кнопкой мыши по пустому месту в консоли и выберите в контекстном меню пункт «Очистить историю консоли» .

Очистить, скопировать, развернуть, свернуть и сохранить сообщения

Чтобы очистить окно консоли , выполните одно из следующих действий:

• Нажмите кнопку « Очистить консоль» на панели действий вверху.
• Нажмите Ctrl + L или Cmd + K.
• Щелкните правой кнопкой мыши по пустому месту в консоли и выберите пункт «Очистить консоль» в контекстном меню.

Чтобы развернуть или свернуть все сообщения, нажмите кнопку «Развернуть все» (Развернуть) или кнопку «Свернуть все» (Свернуть) на панели действий вверху.

Из контекстного меню вы также можете:

• Copy console : Копирует все текущие сообщения в буфер обмена, но не историю предыдущих команд .
• Сохранить как... : Сохраняет все текущие сообщения в текстовый файл с расширением .log .

Отслеживайте значение выражения в режиме реального времени с помощью функции Live Expressions.

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

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

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

Инициировать активацию пользователя с помощью оценки

Активация пользователя — это состояние сеанса просмотра, зависящее от действий пользователя. Состояние «активен» означает, что пользователь в данный момент взаимодействует со страницей или взаимодействовал с ней с момента загрузки страницы.

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

Отключить автозаполнение из истории

По мере ввода выражения всплывающее окно автозаполнения в консоли отображает выражения, которые вы выполняли ранее. Эти выражения начинаются с символа > . В следующем примере инструменты разработчика ранее выполнили document.querySelector('a') и document.querySelector('img') .

Откройте настройки консоли и снимите флажок « Автозаполнение из истории» , чтобы прекратить отображение выражений из вашей истории.

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

По умолчанию в раскрывающемся списке «Контекст JavaScript» установлено значение «top », которое представляет собой контекст просмотра основного документа.

Предположим, на вашей странице размещена реклама, встроенная в <iframe> . Вы хотите запустить JavaScript, чтобы изменить DOM-структуру рекламы. Для этого сначала необходимо выбрать контекст просмотра рекламы из выпадающего списка «Контекст JavaScript» .

Проверить свойства объекта

В консоли можно отобразить интерактивный список свойств указанного вами объекта JavaScript.

Для просмотра списка введите имя объекта в консоль и нажмите Enter .

Чтобы просмотреть свойства объектов DOM, выполните действия, описанные в разделе «Просмотр свойств объектов DOM» .

Найдите собственную и унаследованную недвижимость.

В консоли свойства собственного объекта отображаются первыми и выделяются жирным шрифтом.

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

Оцените пользовательские средства доступа.

По умолчанию DevTools не выполняет проверку созданных вами методов доступа. Чтобы выполнить проверку пользовательского метода доступа к объекту, нажмите (...) .

Найдите перечислимые и неперечислимые свойства.

Перечислимые свойства имеют яркий цвет. Неперечислимые свойства имеют приглушенный цвет. Перечисляемые свойства можно перебирать с помощью цикла for … in или метода Object.keys() .

Выявление закрытых свойств экземпляров классов

В консоли закрытые свойства экземпляров классов обозначаются префиксом # .

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

Проверьте внутренние свойства JavaScript.

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

Внутренние свойства различных объектов могут быть следующими:

• Любой объект имеет [[Prototype]] .
• Примитивные обертки имеют свойство [[PrimitiveValue]] .
• Объекты ArrayBuffer обладают следующими свойствами:
  • [[Int8Array]] , [[Uint8Array]] , [[Int16Array]] , [[Int32Array]]
  • [[ArrayBufferByteLength]] , [[ArrayBufferData]]
• In addition to ArrayBuffer -specific properties, WebAssembly.Memory objects have a [[WebAssemblyMemory]] property.
• Keyed collections (maps and sets) have an [[Entries]] property that contains their keyed entries.
• Promise objects have the following properties:
  • [[PromiseState]] : pending, fulfilled, or rejected
  • [[PromiseResult]] : undefined if pending, <value> if fulfilled, <reason> if rejected
• Proxy objects have the following properties: [[Handler]] object, [[Target]] object, and [[isRevoked]] (switched off or not).

Inspect functions

In JavaScript, functions are also objects with properties. However, if you type a function name into the Console , DevTools calls it instead of displaying its properties.

To view function properties internal to JavaScript, use the console.dir() command.

Functions have the following properties:

• [[FunctionLocation]] . A link to the line with the function definition in a source file.
• [[Scopes]] . Lists values and expressions the function has access to. To inspect function scopes during debugging, see View and edit local, closure, and global properties .
• Bound functions have the following properties:
  • [[TargetFunction]] . The target of bind() .
  • [[BoundThis]] . The value of this .
  • [[BoundArgs]] . An array of function arguments.
• Generator functions are marked with a [[IsGenerator]]: true property.
• Generators return iterator objects and they have following properties:
  • [[GeneratorLocation]] . A link to a line with the generator definition in a source file.
  • [[GeneratorState]] : suspended , closed , or running.
  • [[GeneratorFunction]] . The generator that returned the object.
  • [[GeneratorReceiver]] . An object that receives the value.

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

You can use any of the following workflows to clear the Console:

• Click Clear Console .
• Right-click a message and then select Clear Console .
• Type clear() in the Console and then press Enter .
• Call console.clear() from your webpage's JavaScript.
• Press Control + L while the Console is in focus.

Kayce Basques

Sofia Emelianova

This page is a reference of features related to the Chrome DevTools Console. It assumes that you're already familiar with using the Console to view logged messages and run JavaScript. If not, see Get Started .

If you're looking for the API reference on functions like console.log() see Console API Reference . For the reference on functions like monitorEvents() see Console Utilities API Reference .

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

You can open the Console as a panel or as a tab in the Drawer .

Откройте панель «Консоль».

Press Control + Shift + J or Command + Option + J (Mac).

To open the Console from the Command Menu , start typing Console and then run the Show Console command that has the Panel badge next to it.

Open the Console in the Drawer

Press Escape or click Customize And Control DevTools and then select Show Console Drawer .

The Drawer pops up at the bottom of your DevTools window, with the Console tab open.

To open the Console tab from the Command Menu , start typing Console and then run the Show Console command that has the Drawer badge next to it.

Open Console Settings

Нажмите Console Settings in the top-right corner of the Console .

The links below explain each setting:

• Скрыть сеть
• Сохраните бревно
• Только для избранного контекста
• Сгруппируйте похожие сообщения в консоли.
• Отобразить ошибки CORS в консоли
• Запись в журнал XMLHttpRequests
• Нетерпеливая оценка
• Автозаполнение из истории

Open the Console Sidebar

Click Show Console Sidebar to show the Sidebar, which is useful for filtering.

Просмотреть сообщения

This section contains features that change how messages are presented in the Console. See View messages for a hands-on walkthrough.

Disable message grouping

Open Console Settings and disable Group similar to disable the Console's default message grouping behavior. See Log XHR and Fetch requests for an example.

View messages from breakpoints

The Console marks messages triggered by breakpoints in the following way:

• console.* calls in conditional breakpoints with an orange question mark ?
• Logpoint messages with pink two dots ..

To jump to the inline breakpoint editor in the Sources panel, click the anchor link next to the breakpoint message.

View stack traces

The Console automatically captures stack traces for errors and warnings. A stack trace is a history of function calls (frames) that led to the error or warning. The Console shows them in reverse order: the latest frame is at the top.

To view a stack trace, click the expand icon next to an error or warning.

View error causes in stack traces

The Console can show you chains of error causes in the stack trace, if any.

To make debugging easier, you can specify error causes when catching and rethrowing errors. As the Console walks up the cause chain, it prints each error stack with a Caused by: prefix, so you can find the original error.

View async stack traces

If supported by the framework you are using or when directly using browser scheduling primitives, such as setTimeout , DevTools can trace async operations by linking both parts of the async code together.

In this case, the stack trace shows the "full story" of the async operation.

Show known third-party frames in stack traces

When source maps include the ignoreList field, by default, the Console hides from stack traces the third-party frames from sources generated by bundlers (for example, webpack) or frameworks (for example, Angular).

To view the full stack trace including third-party frames, click Show N more frames at the bottom of the stack trace.

To always view the full stack trace, disable the Settings > Ignore List > Automatically add known third-party scripts to ignore list setting.

Log XHR and Fetch requests

Open Console Settings and enable Log XMLHttpRequests to log all XMLHttpRequest and Fetch requests to the Console as they happen.

The top message in the example above shows the Console's default grouping behavior. The example below shows how the same log looks after disabling message grouping .

Persist messages across page loads

By default the Console clears whenever you load a new page. To persist messages across page loads, Open Console Settings and then enable the Preserve Log checkbox.

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

By default the browser logs network messages to the Console . For example, the top message in the following example represents a 404.

To hide network messages:

1. Open Console Settings .
2. Enable the Hide Network checkbox.

Show or hide CORS errors

The Console can show CORS errors if network requests fail due to Cross-Origin Resource Sharing (CORS) .

To show or hide CORS errors:

1. Open Console Settings .
2. Check or clear the Show CORS errors in the console checkbox.

If the console is set to show CORS errors and you encounter them, you can click the following buttons next to errors:

• to open the request with a CORS-related TypeError in the Network panel.
• to get a potential solution on the Issues tab .

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

There are many ways to filter out messages in the Console.

Filter out browser messages

Open the Console Sidebar and click User Messages to only show messages that came from the page's JavaScript.

Filter by log level

DevTools assigns most of console.* methods severity levels.

Существует четыре уровня:

• Verbose
• Info
• Warning
• Error

For example, console.log() is in the Info group, whereas console.error() is in the Error group. The Console API Reference describes the severity level of each applicable method.

Every message that the browser logs to the Console has a severity level too. You can hide any level of messages that you're not interested in. For example, if you're only interested in Error messages, you can hide the other 3 groups.

Click the Log Levels drop-down to enable or disable Verbose , Info , Warning or Error messages.

You can also filter by log level by opening the Console Sidebar and then clicking Errors , Warnings , Info , or Verbose .

Filter messages by URL

Type url: followed by a URL to only view messages that came from that URL. After you type url: DevTools shows all relevant URLs.

Domains also work. For example, if https://example.com/a.js and https://example.com/b.js are logging messages, url:https://example.com enables you to focus on the messages from these 2 scripts.

To hide all messages from a specified URL, type -url: followed by the URL, for example, https://b.wal.co . This is a negative URL filter.

You can also show messages from a single URL by opening the Console Sidebar , expanding the User Messages section, and then clicking the URL of the script containing the messages you want to focus on.

Filter out messages from different contexts

Suppose that you've got an ad on your page. The ad is embedded in an <iframe> and is generating a lot of messages in your Console. Because this ad is in a different JavaScript context , one way to hide its messages is to open Console Settings and enable the Selected Context Only checkbox.

Filter out messages that don't match a regular expression pattern

Type a regular expression such as /[foo]\s[bar]/ in the Filter text box to filter out any messages that don't match that pattern. Spaces are not supported, use \s instead. DevTools checks if the pattern is found in the message text or the script that caused the message to be logged.

For example, the following filters out all messages that don't match /[gm][ta][mi]/ .

Search for text in logs

To search for text in log messages:

1. To open a built-in search bar, press Command + F (Mac) or Ctrl + F (Windows, Linux).
2. In the bar, type your query. In this example the query is legacy . При желании вы можете:
   • Нажмите Match Case to make your query case-sensitive.
   • Нажмите Use Regular Expression to search using a RegEx expression.
3. Press Enter . To jump to previous or next search result, press the up or down button.

Run JavaScript

This section contains features related to running JavaScript in the Console. See Run JavaScript for a hands-on walkthrough.

String copy options

The console outputs strings as valid JavaScript literals by default. Right-click an output and choose between three copy options:

• Copy as JavaScript literal . Escapes appropriate special characters and wraps the string in either single quotes, double quotes, or backticks depending on the content.
• Copy string contents . Copies the exact raw string to the clipboard, including new lines and other special characters.
• Copy as JSON literal . Formats the string to valid JSON.

Re-run previous expressions and clear history

Press the Up Arrow key to cycle through the history of JavaScript expressions that you ran earlier in the Console . Press Enter to run that expression again.

To clear the console history, right-click an empty space in the Console and select Clear console history from the context menu.

Clear, copy, expand, collapse, and save messages

To clear the Console window, do one of the following:

• Click block Clear console in the action bar at the top.
• Press Ctrl + L or Cmd + K .
• Right-click an empty space in the Console and select Clear console from the context menu.

To expand or collapse all messages, click expand Expand all or compress Collapse all in the action bar at the top.

From the context menu, you can also:

• Copy console : Copy all current messages to clipboard, but not the history of previous commands .
• Save as... : Save all current messages to a plaintext .log file.

Watch an expression's value in real-time with Live Expressions

If you find yourself typing the same JavaScript expression in the Console repeatedly, you might find it easier to create a Live Expression . With Live Expressions , you type an expression once and then pin it to the top of your Console. The value of the expression updates in near real-time. See Watch JavaScript Expression Values In Real-Time With Live Expressions .

Disable Eager Evaluation

As you type JavaScript expressions in the Console, Eager Evaluation shows a preview of that expression's return value. Open Console Settings and disable the Eager Evaluation checkbox to turn off the return value previews.

Trigger user activation with evaluation

User activation is the state of a browsing session that depends on user actions. An "active" state means the user is currently interacting with the page or has interacted since page load.

To trigger user activation with any evaluation, open Console Settings and check Treat code evaluation as user action .

Disable autocomplete from history

As you type out an expression, the Console's autocomplete popup shows expressions that you ran earlier. These expressions are prepended with the > character. In the following example, DevTools earlier evaluated document.querySelector('a') and document.querySelector('img') .

Open Console Settings and disable the Autocomplete From History checkbox to stop showing expressions from your history.

Select JavaScript context

By default the JavaScript Context drop-down is set to top , which represents the main document's browsing context .

Suppose you have an ad on your page embedded in an <iframe> . You want to run JavaScript in order to tweak the ad's DOM. To do this, you first need to select the ad's browsing context from the JavaScript Context drop-down.

Inspect object properties

The Console can display an interactive list of properties of a JavaScript object you specify.

To browse the list, type the object name into the Console and press Enter .

To inspect the properties of DOM objects, follow the steps in View the properties of DOM objects .

Spot own and inherited properties

The Console sorts own object properties first and highlights them in bold font.

Properties inherited from the prototype chain are in regular font. The Console displays them on the object itself by evaluating the corresponding native accessors of built-in objects.

Evaluate custom accessors

By default, DevTools doesn't evaluate accessors you create. To evaluate a custom accessor on an object, click (...) .

Spot enumerable and non-enumerable properties

Enumerable properties are bright in color. Non-enumerable properties are muted. Enumerable properties can be iterated over with the for … in loop or Object.keys() method.

Spot private properties of class instances

The Console designates private properties of class instances with a # prefix.

The Console can also autocomplete private properties even when you evaluate them ouside the class scope.

Inspect internal JavaScript properties

Borrowing the ECMAScript notation , the Console encloses some properties internal to JavaScript in double square brackets. You can't interact with such properties in your code. However, it might be useful to inspect them.

You might see the following internal properties on different objects:

• Any object has a [[Prototype]] .
• Primitive wrappers have a [[PrimitiveValue]] property.
• ArrayBuffer objects have the following properties:
  • [[Int8Array]] , [[Uint8Array]] , [[Int16Array]] , [[Int32Array]]
  • [[ArrayBufferByteLength]] , [[ArrayBufferData]]
• In addition to ArrayBuffer -specific properties, WebAssembly.Memory objects have a [[WebAssemblyMemory]] property.
• Keyed collections (maps and sets) have an [[Entries]] property that contains their keyed entries.
• Promise objects have the following properties:
  • [[PromiseState]] : pending, fulfilled, or rejected
  • [[PromiseResult]] : undefined if pending, <value> if fulfilled, <reason> if rejected
• Proxy objects have the following properties: [[Handler]] object, [[Target]] object, and [[isRevoked]] (switched off or not).

Inspect functions

In JavaScript, functions are also objects with properties. However, if you type a function name into the Console , DevTools calls it instead of displaying its properties.

To view function properties internal to JavaScript, use the console.dir() command.

Functions have the following properties:

• [[FunctionLocation]] . A link to the line with the function definition in a source file.
• [[Scopes]] . Lists values and expressions the function has access to. To inspect function scopes during debugging, see View and edit local, closure, and global properties .
• Bound functions have the following properties:
  • [[TargetFunction]] . The target of bind() .
  • [[BoundThis]] . The value of this .
  • [[BoundArgs]] . An array of function arguments.
• Generator functions are marked with a [[IsGenerator]]: true property.
• Generators return iterator objects and they have following properties:
  • [[GeneratorLocation]] . A link to a line with the generator definition in a source file.
  • [[GeneratorState]] : suspended , closed , or running.
  • [[GeneratorFunction]] . The generator that returned the object.
  • [[GeneratorReceiver]] . An object that receives the value.

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

You can use any of the following workflows to clear the Console:

• Click Clear Console .
• Right-click a message and then select Clear Console .
• Type clear() in the Console and then press Enter .
• Call console.clear() from your webpage's JavaScript.
• Press Control + L while the Console is in focus.