Консоль хрома как читать

0

Использование консоли Google Chrome

Консоль предоставляет две функции для разработчиков для тестирования веб-страниц и приложений:

• в консоль можно выводить отладочную информацию, используя такие методы Console API, как console.log() и console.profile().
• оболочка для работы в консоли, в которой вы можете вводить команды, в частности используя автодополнение, и оперировать document и Chrome DevTools. Вы можете выполнять JavaScript-выражения прямо в консоли и использовать методы Command Line API, например, $() для создания выборки элементов, или profile() для запуска CPU-профайлера.

В статье мы рассмотрим наиболее распространённые способы использования Console API и Command Line API. Более подробно о них вы сможете узнать в документации.

Базовые операции

Открытие консоли

Консоль в Chrome DevTools доступна в двух вариантах: вкладка Console и в виде разделённой версии, доступной из любой другой вкладки.

Для того, чтобы открыть вкладку Console вы можете:

• использовать хоткей Command — Option — J (Mac) или Control — Shift — J (Windows/Linux);
• выбрать пункт меню View > Developer > JavaScript Console.

Для того, чтобы вызвать или скрыть разделённую версию консоли в других вкладках, нажмите клавишу Esc или кликните на иконку Show/Hide Console в нижнем левом углу DevTools. Скриншот показывает разделённый вариант консоли во вкладке Elements.

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

Для очистки консоли:

• через контекстное меню вкладки консоли (клик правой кнопки мыши) выберите пункт Clear Console.
• Введите clear() — команду из Command Line API в консоли.
• Вызовите console.clear() (команду из Console API) из скрипта.
• Используйте хоткеи ⌘K или ⌃L (Mac) Control — L (Windows и Linux).

По умолчанию, история консоли очищается при переходе на другую страницу. Вы можете отменить очистку включив Preserve log upon navigation в разделе консоли в настройках DevTools (см. настройки Консоли).

Настройки консоли

Консоль имеет две главные опции, которые вы можете настраивать в главной вкладке настроек DevTools:

• Log XMLHTTPRequests — определяет, логировать ли XMLHTTPRequest в панели консоли.
• Preserve log upon navigation — определяет, сбрасываться ли истории консоли при переходе на новую страницу. По умолчанию обе из этих опций отключены.

Вы можете поменять эти настройки в контекстном меню консоли, кликнув правой кнопкой мыши.

Использование API консоли

Console API — набор методов, доступных из объекта console , объявленного из DevTools. Одно из главных назначений API — логировать информацию (значение свойства, целый объект или DOM-элемент) в консоль во время работы вашего приложения. Вы также можете группировать вывод, чтобы избавиться от визуального мусора.

Вывод в консоль

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

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

Ошибки и предупреждения

Метод console.error() выводит красную иконку рядом с сообщением красного цвета.

Метод console.warn() выводит жёлтую иконку рядом с текстом сообщения.

Проверки

Метод console.assert() выводит сообщение об ошибке (это второй аргумент) только в том случае, если первый аргумент равен false . К примеру, в следующем примере сообщение об ошибке появится, только если количество дочерних элементов DOM-элемента list больше пятисот.

Фильтрация вывода в консоли

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

• All — без фильтрации.
• Errors — сообщения console.error() .
• Warnings — сообщения console.warn() .
• Logs — сообщения console.log() , console.info() и console.debug() .
• Debug — сообщения console.timeEnd() и остальных функций консольного вывода.

Группирование вывода

Вы можете визуально группировать вывод в консоли с помощью команд console.group() и groupEnd().

Также вы можете вкладывать группы логов друг в друга. В следующем примере группа логов создаётся для этапа аутентификации в процессе логина. Если пользователь аутентифицирован, то создаётся вложенная группа для этапа авторизации.

Для создания изначально свёрнутой группы используйте console.groupCollapsed() вместо console.group() :

Замена строк и их форматирование

Первый параметр, передаваемый в любой метод консоли (например, log() или error() ), может содержать модификаторы форматирования. Модификатор вывода состоит из символа % , сразу за которым следует буква, сообщающая о том, какое форматирование должно быть применено (например, %s — для строк). Модификатор форматирования определяет, куда подставить значение, переданное из следующих параметров функции.

В следующем примере используется строчный и числовой модификаторы %s (string) и %d (decimal) для замены значений в выводимой строке.

Результатом будет «Саша купил 100 бочонков мёда».

Приведённая таблица содержит поддерживаемые модификаторы форматирования и их значения:

В следующем примере модификатор форматирования %d заменяется на значение document.childNodes.length и форматируется как целое число; модификатор %f заменяется на значение, возвращаемое Date.now() и форматируется как число с плавающей точкой.

Представление DOM-элементов как JavaScript-объекты

По умолчанию, когда вы логируете DOM-элемент в консоль, он выводится в XML- формате, как в панели Elements:

Вы можете вывести DOM-элемент в JavaScript-представлении с помощью метода console.dir() :

Точно также вы можете использовать модификатор вывода %0 в методе console.log() :

Стилизация вывода консоли с помощью CSS

Можно использовать модификатор %c , чтобы применить СSS-правила, к любой строке, выводимой с помощью console.log() или похожих методов.

Измерение временных затрат

Методы console.time() и console.timeEnd() используются для измерения того, как много времени потребовалось для выполнения скрипта. console.time() вызывается для запуска таймера, а console.timeEnd() — для его остановки. Время, прошедшее между вызовами этих функций, будет выведено в консоль.

Внимание: необходимо использовать одинаковые строки в параметрах console.time() и timeEnd() для ожидаемой работы таймера — считайте эту строку его уникальным идентификатором.

Корреляция с панелью Timeline

Панель Timeline предоставляет подробный обзор того, куда было потрачено время работы вашего приложения. Метод console.timeStamp() создаёт отдельную отметку в момент своего исполнения. Это помогает легко и непринуждённо соотносить события в приложении с браузерными событиями reflow и repaint.

Внимание: метод console.timeStamp() выполняется только при записи событий в панели Timeline.

В следующем примере в панели Timeline появляется отметка «Adding result» в тот момент, когда поток выполнения программы доходит до console.timeStamp(«Adding result»)

Как проиллюстрировано в скриншоте, вызов timeStamp() отмечен в следующих местах:

• жёлтая вертикальная линия в панели Timeline.
• Запись добавлена в список записанных событий.

Создание точек останова

Вы можете начать отладку вашего кода, вызвав команду debugger. К примеру, в следующем коде отладка начинается сразу после вызова метода brightness() :

Использование Command Line API

Кроме того, что консоль — это место вывода логов вашего приложения, вы можете вводить в нее команды, определенные в Command Line API. Это API дает следующие возможности:

• удобные функции для выделения DOM-элементов.
• Методы управления CPU-профайлером.
• Псевдонимы для некоторых методов Console API.
• Отслеживание событий.
• Просмотр обработчиков событий объекта.

Выполнение выражений

Консоль выполнит любой JavaScript-код, который вы в неё введёте, сразу после нажатия кнопки Return или Enter. В консоли действует автодополнение и дополнение по табу. По мере ввода выражений и свойств вам предлагают возможные варианты. Если существуют несколько одинаково начинающихся свойств, вы можете выбирать между ними с помощью кнопки Tab. Нажав стрелку вправо вы выберете текущую подсказку. Если подсказка одна, то нажатие Tab тоже приведет к ее выбору.

Для того, чтобы вводить многострочные JavaScript-выражения, используйте сочетание клавиш Shift+Enter для перевода строки.

Выделение элементов

Command Line API предоставляет набор методов для доступа к DOM-элементам в вашем приложении. К примеру, метод $() возвращает первый элемент, соответствующий объявленному CSS-селектору, идентично с document.querySelector(). Следующий код вернёт первый элемент с ID «loginBtn».

Метод $$() возвращает массив элементов, соответствующих указанному CSS- селектору, идентично document.querySelectorAll(). Чтобы получить все кнопки с классом loginBtn , нужно ввести:

И, наконец, метод x() принимает XPath-путь в качестве параметра и возвращает массив элементов, соответствующих этому пути. Например, этот код вернёт все элементы <script> , являющиеся дочерними по отношению к элементу <body> :

Инспектирование DOM-элементов и объектов

Метод inspect() принимает ссылку на DOM-элемент (или объект) в качестве параметра и отображает элемент или объект в соответствующей панели: DOM-элемент в панели Elements и JavaScript-объект в панели Profile.

К примеру, в следующем скриншоте функция $() использована, чтобы получить ссылку на элемент <li> . Затем последнее исполненное выражение ($_) передаётся в inspect() , чтобы открыть этот элемент в панели Elements.

Доступ к недавно вызванным DOM-элементам или объектам

Часто во время тестирования вы выбираете DOM-элементы либо непосредственно в панели Elements, либо используя соответствующий инструмент (иконка — увеличительное стекло), чтобы работать с этими элементами. Также вы можете выбрать снимок использования памяти в панели Profiles для дальнейшего изучения этого объекта.

Консоль запоминает последние пять элементов (или объектов), которые вы выбирали, и к ним можно обратиться используя свойства $0, $1, $2, $3 и $4. Последний выбранный элемент или объект доступен как $0 , второй — $1 и так далее.

Следующий скриншот показывает значения этих свойств после выбора трех различных элементов подряд из панели Elements:

Внимание: В любом случае вы можете кликнуть правой кнопкой мыши или кликнуть с зажатой клавишей Control в консоли и выбрать пункт «Reveal in Elements Panel»

Отслеживание событий

Метод monitorEvents() позволяет отслеживать определенные события объекта. При возникновении события оно выводится в консоль. Вы определяете объект и отслеживаемые события. Например, следующий код позволяет отслеживать событие “resize” объекта окна.

Чтобы отслеживать несколько событий одновременно, можно передать в качестве второго аргумента массив имен событий. Следующий код отслеживает одновременно события “mousedown” и “mouseup” элемента body :

Кроме того, вы можете передать один из поддерживаемых «типов событий», которые DevTools сами преобразуют в реальные имена событий. Например, тип события touch позволит отслеживать события touchstart, touchend, touchmove, и touchcancel.

Чтобы узнать, какие типы событий поддерживаются — ознакомьтесь с monitorEvents() из Console API.

Чтобы прекратить отслеживать событие вызовите unmonitorEvents() с объектом в качестве аргумента.

Контроль за CPU-профайлером

С помощью методов profile() и profileEnd() можно создавать JavaScript профили CPU. По желанию можно задать профилю имя.

Ниже вы видите пример создания нового профиля с именем назначенным по умолчанию:

Новый профиль появляется в панели Profiles с именем Profile 1:

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

Результат в панели Profiles:

Профили CPU могут быть вложенными, например:

Вызовы методов остановки и запуска профилирования не обязательно должны быть корректно вложены друг в друга. Например, этот пример будет работать так же, как и предыдущий:

Name already in use

chrome-developer-tools / rus.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

Использование консоли Google Chrome

Консоль предоставляет две функции для разработчиков для тестирования веб-страниц и приложений:

• в консоль можно выводить отладочную информацию, используя такие методы Console API, как console.log() и console.profile().
• оболочка для работы в консоли, в которой вы можете вводить команды, в частности используя автодополнение, и оперировать document и Chrome DevTools. Вы можете выполнять JavaScript-выражения прямо в консоли и использовать методы Command Line API, например, $() для создания выборки элементов, или profile() для запуска CPU-профайлера.

В статье мы рассмотрим наиболее распространённые способы использования Console API и Command Line API. Более подробно о них вы сможете узнать в документации.

Консоль в Chrome DevTools доступна в двух вариантах: вкладка Console и в виде разделённой версии, доступной из любой другой вкладки.

Для того, чтобы открыть вкладку Console вы можете:

• использовать хоткей Command — Option — J (Mac) или Control — Shift — J (Windows/Linux);
• выбрать пункт меню View > Developer > JavaScript Console.

Для того, чтобы вызвать или скрыть разделённую версию консоли в других вкладках, нажмите клавишу Esc или кликните на иконку Show/Hide Console в нижнем левом углу DevTools. Скриншот показывает разделённый вариант консоли во вкладке Elements.

Для очистки консоли:

• через контекстное меню вкладки консоли (клик правой кнопки мыши) выберите пункт Clear Console.
• Введите clear() — команду из Command Line API в консоли.
• Вызовите console.clear() (команду из Console API) из скрипта.
• Используйте хоткеи ⌘K или ⌃L (Mac) Control — L (Windows и Linux).

По умолчанию, история консоли очищается при переходе на другую страницу. Вы можете отменить очистку включив Preserve log upon navigation в разделе консоли в настройках DevTools (см. настройки Консоли).

Консоль имеет две главные опции, которые вы можете настраивать в главной вкладке настроек DevTools:

• Log XMLHTTPRequests — определяет, логировать ли XMLHTTPRequest в панели консоли.
• Preserve log upon navigation — определяет, сбрасываться ли истории консоли при переходе на новую страницу. По умолчанию обе из этих опций отключены.

Вы можете поменять эти настройки в контекстном меню консоли, кликнув правой кнопкой мыши.

Использование API консоли

Console API — набор методов, доступных из объекта console , объявленного из DevTools. Одно из главных назначений API — логировать информацию (значение свойства, целый объект или DOM-элемент) в консоль во время работы вашего приложения. Вы также можете группировать вывод, чтобы избавиться от визуального мусора.

Вывод в консоль

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

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

Ошибки и предупреждения

Метод console.error() выводит красную иконку рядом с сообщением красного цвета.

Метод console.warn() выводит жёлтую иконку рядом с текстом сообщения.

Метод console.assert() выводит сообщение об ошибке (это второй аргумент) только в том случае, если первый аргумент равен false . К примеру, в следующем примере сообщение об ошибке появится, только если количество дочерних элементов DOM-элемента list больше пятисот.

Фильтрация вывода в консоли

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

• All — без фильтрации.
• Errors — сообщения console.error() .
• Warnings — сообщения console.warn() .
• Logs — сообщения console.log() , console.info() и console.debug() .
• Debug — сообщения console.timeEnd() и остальных функций консольного вывода.

Вы можете визуально группировать вывод в консоли с помощью команд console.group() и groupEnd().

Также вы можете вкладывать группы логов друг в друга. В следующем примере группа логов создаётся для этапа аутентификации в процессе логина. Если пользователь аутентифицирован, то создаётся вложенная группа для этапа авторизации.

Для создания изначально свёрнутой группы используйте console.groupCollapsed() вместо console.group() :

Замена строк и их форматирование

Первый параметр, передаваемый в любой метод консоли (например, log() или error() ), может содержать модификаторы форматирования. Модификатор вывода состоит из символа % , сразу за которым следует буква, сообщающая о том, какое форматирование должно быть применено (например, %s — для строк). Модификатор форматирования определяет, куда подставить значение, переданное из следующих параметров функции.

В следующем примере используется строчный и числовой модификаторы %s (string) и %d (decimal) для замены значений в выводимой строке.

Результатом будет «Саша купил 100 бочонков мёда».

Приведённая таблица содержит поддерживаемые модификаторы форматирования и их значения:

В следующем примере модификатор форматирования %d заменяется на значение document.childNodes.length и форматируется как целое число; модификатор %f заменяется на значение, возвращаемое Date.now() и форматируется как число с плавающей точкой.

Представление DOM-элементов как JavaScript-объекты

По умолчанию, когда вы логируете DOM-элемент в консоль, он выводится в XML- формате, как в панели Elements:

Вы можете вывести DOM-элемент в JavaScript-представлении с помощью метода console.dir() :

Точно также вы можете использовать модификатор вывода %0 в методе console.log() :

Стилизация вывода консоли с помощью CSS

Можно использовать модификатор %c , чтобы применить СSS-правила, к любой строке, выводимой с помощью console.log() или похожих методов.

Измерение временных затрат

Методы console.time() и console.timeEnd() используются для измерения того, как много времени потребовалось для выполнения скрипта. console.time() вызывается для запуска таймера, а console.timeEnd() — для его остановки. Время, прошедшее между вызовами этих функций, будет выведено в консоль.

Внимание: необходимо использовать одинаковые строки в параметрах console.time() и timeEnd() для ожидаемой работы таймера — считайте эту строку его уникальным идентификатором.

Корреляция с панелью Timeline

Панель Timeline предоставляет подробный обзор того, куда было потрачено время работы вашего приложения. Метод console.timeStamp() создаёт отдельную отметку в момент своего исполнения. Это помогает легко и непринуждённо соотносить события в приложении с браузерными событиями reflow и repaint.

Внимание: метод console.timeStamp() выполняется только при записи событий в панели Timeline.

В следующем примере в панели Timeline появляется отметка «Adding result» в тот момент, когда поток выполнения программы доходит до console.timeStamp(«Adding result»)

Как проиллюстрировано в скриншоте, вызов timeStamp() отмечен в следующих местах:

• жёлтая вертикальная линия в панели Timeline.
• Запись добавлена в список записанных событий.

Создание точек останова

Вы можете начать отладку вашего кода, вызвав команду debugger. К примеру, в следующем коде отладка начинается сразу после вызова метода brightness() :

Использование Command Line API

Кроме того, что консоль — это место вывода логов вашего приложения, вы можете вводить в нее команды, определенные в Command Line API. Это API дает следующие возможности:

• удобные функции для выделения DOM-элементов.
• Методы управления CPU-профайлером.
• Псевдонимы для некоторых методов Console API.
• Отслеживание событий.
• Просмотр обработчиков событий объекта.

Консоль выполнит любой JavaScript-код, который вы в неё введёте, сразу после нажатия кнопки Return или Enter. В консоли действует автодополнение и дополнение по табу. По мере ввода выражений и свойств вам предлагают возможные варианты. Если существуют несколько одинаково начинающихся свойств, вы можете выбирать между ними с помощью кнопки Tab. Нажав стрелку вправо вы выберете текущую подсказку. Если подсказка одна, то нажатие Tab тоже приведет к ее выбору.

Для того, чтобы вводить многострочные JavaScript-выражения, используйте сочетание клавиш Shift+Enter для перевода строки.

Command Line API предоставляет набор методов для доступа к DOM-элементам в вашем приложении. К примеру, метод $() возвращает первый элемент, соответствующий объявленному CSS-селектору, идентично с document.querySelector(). Следующий код вернёт первый элемент с ID «loginBtn».

Метод $$() возвращает массив элементов, соответствующих указанному CSS- селектору, идентично document.querySelectorAll(). Чтобы получить все кнопки с классом loginBtn , нужно ввести:

И, наконец, метод x() принимает XPath-путь в качестве параметра и возвращает массив элементов, соответствующих этому пути. Например, этот код вернёт все элементы <script> , являющиеся дочерними по отношению к элементу <body> :

Инспектирование DOM-элементов и объектов

Метод inspect() принимает ссылку на DOM-элемент (или объект) в качестве параметра и отображает элемент или объект в соответствующей панели: DOM-элемент в панели Elements и JavaScript-объект в панели Profile.

К примеру, в следующем скриншоте функция $() использована, чтобы получить ссылку на элемент <li> . Затем последнее исполненное выражение ($_) передаётся в inspect() , чтобы открыть этот элемент в панели Elements.

Доступ к недавно вызванным DOM-элементам или объектам

Часто во время тестирования вы выбираете DOM-элементы либо непосредственно в панели Elements, либо используя соответствующий инструмент (иконка — увеличительное стекло), чтобы работать с этими элементами. Также вы можете выбрать снимок использования памяти в панели Profiles для дальнейшего изучения этого объекта.

Консоль запоминает последние пять элементов (или объектов), которые вы выбирали, и к ним можно обратиться используя свойства $0, $1, $2, $3 и $4. Последний выбранный элемент или объект доступен как $0 , второй — $1 и так далее.

Следующий скриншот показывает значения этих свойств после выбора трех различных элементов подряд из панели Elements:

Внимание: В любом случае вы можете кликнуть правой кнопкой мыши или кликнуть с зажатой клавишей Control в консоли и выбрать пункт «Reveal in Elements Panel»

Метод monitorEvents() позволяет отслеживать определенные события объекта. При возникновении события оно выводится в консоль. Вы определяете объект и отслеживаемые события. Например, следующий код позволяет отслеживать событие «resize» объекта окна.

Чтобы отслеживать несколько событий одновременно, можно передать в качестве второго аргумента массив имен событий. Следующий код отслеживает одновременно события «mousedown» и «mouseup» элемента body :

Кроме того, вы можете передать один из поддерживаемых «типов событий», которые DevTools сами преобразуют в реальные имена событий. Например, тип события touch позволит отслеживать события touchstart, touchend, touchmove, и touchcancel.

Чтобы узнать, какие типы событий поддерживаются — ознакомьтесь с monitorEvents() из Console API.

Чтобы прекратить отслеживать событие вызовите unmonitorEvents() с объектом в качестве аргумента.

Контроль за CPU-профайлером

С помощью методов profile() и profileEnd() можно создавать JavaScript профили CPU. По желанию можно задать профилю имя.

Ниже вы видите пример создания нового профиля с именем назначенным по умолчанию:

Новый профиль появляется в панели Profiles с именем Profile 1:

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

Результат в панели Profiles:

Профили CPU могут быть вложенными, например:

Вызовы методов остановки и запуска профилирования не обязательно должны быть корректно вложены друг в друга. Например, этот пример будет работать так же, как и предыдущий:

Консоль хрома как читать

Console features reference

Published on Thursday, April 18, 2019 • Updated on Thursday, September 22, 2022

Technically, I’m a writer

Technical Writer, Google Chrome

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.

# Open the Console

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

# Open the Console panel

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

Click Console Settings in the top-right corner of the Console.

Not to be confused with DevTools Settings above and next to the three-dot menu.

The links below explain each setting:

# Open the Console Sidebar

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

# View messages

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 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 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.

DevTools implements this «Async Stack Tagging» feature based on the console.createTask() API method.

DevTools encourages frameworks and abstractions to use this API. For example, Angular supports this feature.

# Show known third-party frames in stack traces

When source maps include the x_google_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.

# Hide network messages

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. 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. 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.

# Filter messages

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.

There are four 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 . Optionally, you can:
   • Click Match Case to make your query case-sensitive.
   • Click 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 expressions from 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.

# 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 Evaluate triggers user activation.

# 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.

# 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:

To inspect a JavaScripts ArrayBuffer that a view object refers to, click the button.

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:

: pending, fulfilled, or rejected : 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. have the following properties:
  • [[TargetFunction]] . The target of bind() .
  • [[BoundThis]] . The value of this .
  • [[BoundArgs]] . An array of function arguments.
  • [[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.

  Консоль разработчика Google Chrome: десять неочевидных полезностей

  Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.

  

  1. Выбор элементов DOM

  Если вы знакомы с jQuery, не мне вам рассказывать о важности конструкций вроде $(‘.class’) и $(‘id’). Для тех, кто не в курсе, поясню, что они позволяют выбирать элементы DOM, указывая назначенные им классы и идентификаторы. Консоль разработчика обладает похожей функциональностью. Здесь «$», однако, отношения к jQuery не имеет, хотя делает, в сущности, то же самое. Это – псевдоним для функции document.querySelector().

  Команды вида $(‘tagName’), $(‘.class’), $(‘#id’) и $(‘.class #id’) возвращают первый элемент DOM, совпадающий с селектором. При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет.

  Есть здесь и ещё одна конструкция: $$. Её использование выглядит как $$(‘tagName’) или $$(‘.class’). Она позволяет выбрать все элементы DOM, соответствующие селектору и поместить их в массив. Работа с ним ничем не отличается от других массивов. Для того, чтобы выбрать конкретный элемент, можно обратиться к нему по индексу.

  Например, команда $$(‘.className’) предоставит нам массив всех элементов страницы с указанным при её вызове именем класса. Команды $$(‘.className’)[0] и $$(‘.className’)[1] дадут доступ, соответственно, к первому и второму элементу полученного массива.

  
  Эксперименты с командами $ и $$

  2. Превращаем браузер в текстовый редактор

  Вам приходилось ловить себя на мысли о том, что хорошо было бы править текст отлаживаемой веб-страницы прямо в браузере? Если да – значит вам понравится команда, показанная ниже.

  После её исполнения в консоли, документ, открытый в браузере, можно редактировать без необходимости поисков нужного фрагмента в HTML-коде.

  3. Поиск обработчиков событий, привязанных к элементу

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

  В результате её выполнения будет выдан массив объектов, содержащий список событий, на которые может реагировать элемент.

  
  Обработчики событий

  Для того, чтобы найти обработчик для конкретного события, можно использовать такую конструкцию:

  Эта команда выведет код функции-обработчика события. Здесь eventName[0] – это массив, который содержит все события конкретного типа. Например, на практике это может выглядеть так:

  В результате мы получим код функции, связанной с событием click элемента с идентификатором firstName.

  4. Мониторинг событий

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

  Команда monitorEvents($(‘selector’)) позволяет организовать мониторинг всех событий, связанных с элементом, которому соответствует селектор. При возникновении события делается запись в консоли. Например, команда monitorEvents($(‘#firstName’)) позволит логировать все события, связанные с элементом, идентификатор которого – firstName.

  5. Измерение времени выполнения фрагмента кода

  В консоли Chrome доступна функция вида console.time(‘labelName’), которая принимает в качестве аргумента метку и запускает таймер. Ещё одна функция, console.timeEnd(‘labelName’), останавливает таймер, которому назначена переданная ей метка. Вот пример использования этих функций:

  Вышеприведённый пример позволяет узнать время между запуском и остановкой таймера. То же самое можно сделать внутри JavaScript-программы и найти время выполнения фрагмента кода.

  Cкажем, мне нужно выяснить длительность исполнения цикла. Сделать это можно так:

  6. Вывод значений переменных в виде таблиц

  Предположим, у нас имеется такой массив объектов:

  Если вывести его в консоли, получится иерархическая структура в виде, собственно, массива объектов. Это – полезная возможность, ветви структуры можно разворачивать, просматривая содержимое объектов. Однако, при таком подходе сложно понять, например, как соотносятся свойства похожих элементов. Для того, чтобы с подобными данными было удобнее работать, их можно преобразовать к табличному виду. Для этого служит такая команда:

  Она позволяет вывести переменную и все её свойства в виде таблицы. Вот, как это выглядит.

  Вывод массива объектов в виде таблицы

  7. Просмотр кода элемента

  Быстро перейти к коду элемента из консоли можно с помощью следующих команд:

  Команда inspect($(‘selector’)) позволяет открыть код элемента, соответствующего селектору, в панели Elements инструментов разработчика Google Chrome. Например, команда inspect($(‘#firstName’)) позволит просмотреть код элемента с идентификатором firstName. Команда inspect($$(‘a’)[3]) откроет код четвёртой ссылки, которая присутствует в DOM.

  8. Вывод списка свойств элемента

  Если надо просмотреть список свойств элемента, консоль поможет и в этом. Здесь используется такая команда:

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

  9. Вызов последнего полученного результата

  Консоль можно использовать как калькулятор, это, вероятно, знают все. Но вот то, что она имеет встроенные средства, позволяющие использовать в командах результаты предыдущих вычислений, известно немногим. С помощью конструкции $_ можно извлечь из памяти результат предыдущего выражения. Вот как это выглядит:

  10. Очистка консоли и памяти

  Если нужно очистить консоль и память, воспользуйтесь такой вот простой командой:

  После нажатия на Enter чистая консоль будет готова к новым экспериментам.
  Вот и всё.

  11, 12, 13, 14…

  Откровенно говоря, это – далеко не всё. Я показал лишь некоторые из неочевидных возможностей консоли Google Chrome. На самом деле, их намного больше. Уверен, вы сможете расширить мой список собственными находками.

  Надеюсь, мой рассказ помог вам узнать о консоли Chrome что-то полезное, экономящее время, достойное стать частью повседневного арсенала веб-программиста.

  А какие инструменты используете вы? Давайте-давайте, делитесь какими-нибудь приколюхами! 🙂

  Читать:

  Как посмотреть связи таблиц sql