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

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

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

Ключевой момент: DevTools реализует эту функцию «асинхронной маркировки стека» на основе метода API console.createTask() . DevTools рекомендует фреймворкам и абстракциям использовать этот API. Например, Angular поддерживает эту функцию .

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

Если в картах исходного кода присутствует поле 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 JavaScript , на который ссылается объект представления, щелкните по нему. кнопка.
• В дополнение к свойствам, специфичным 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, когда консоль находится в фокусе.