Консоль ошибок браузера хром

This interactive tutorial shows you how to log and filter messages in the Chrome DevTools Console.

This tutorial is intended to be completed in order. It assumes that you understand the fundamentals of web development, such as how to use JavaScript to add interactivity to a page.

Set up the demo and DevTools

This tutorial is designed so that you can open up the demo and try all the workflows yourself. When you physically follow along, you’re more likely to remember the workflows later.

1. Open the demo.

2. Optional: Move the demo to a separate window. In this example, the tutorial is on the left, and the demo is on the right.

   

3. Focus the demo and then press Control+Shift+J or Command+Option+J (Mac) to open DevTools. By default DevTools opens to the right of the demo.

   

4. Optional: Dock DevTools to the bottom of the window or undock it into a separate window.

   DevTools docked to the bottom of the demo:

   DevTools undocked in a separate window:

View messages logged from JavaScript

Most messages that you see in the Console come from the web developers who wrote the page’s JavaScript. The goal of this section is to introduce you to the different message types that you’re likely to see in the Console, and explain how you can log each message type yourself from your own JavaScript.

1. Click the Log Info button in the demo. Hello, Console! gets logged to the Console.

   

2. Next to the Hello, Console! message in the Console, click log.js:2. The Sources panel opens and highlights the line of code that caused the message to get logged to the Console.

   

   The message was logged when the page’s JavaScript called console.log('Hello, Console!').

3. Navigate back to the Console using any of the following workflows:

   • Click the Console tab.
   • Press Control+[ or Command+[ (Mac) until the Console is in focus.
   • Open the Command Menu, start typing Console, select the Show Console Panel command, and then press Enter.

4. Click the Log Warning button in the demo. Abandon Hope All Ye Who Enter gets logged to the Console.

   

   Messages formatted like this are warnings.

5. Optional: Click log.js:12 to view the code that caused the message to get formatted like this, and then navigate back to Console when you’re finished. Do this whenever you want to see the code that caused a message to get logged a certain way.

6. Click the Expand icon in front of Abandon Hope All Ye Who Enter. DevTools shows the stack trace leading up to the call.

   

   The stack trace is telling you that a function named logWarning was called, which in turn called a function named quoteDante. In other words, the call that happened first is at the bottom of the stack trace. You can log stack traces at any time by calling console.trace().

7. Click Log Error. The following error message gets logged: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Click Log Table. A table about famous artists gets logged to the Console.

   

   Note how the birthday column is only populated for one row. Check the code to figure out why that is.

9. Click Log Group. The names of 4 famous, crime-fighting turtles are grouped under the Adolescent Irradiated Espionage Tortoises label.

   

10. Click Log Custom. A message with a red border and blue background gets logged to the Console.

    

The main idea here is that when you want to log messages to the Console from your JavaScript, you use one of the console methods. Each method formats messages differently.

There are even more methods than what has been demonstrated in this section. At the end of the tutorial you’ll learn how to explore the rest of the methods.

View messages logged by the browser

The browser logs messages to the Console, too. This usually happens when there’s a problem with the page.

1. Click Cause 404. The browser logs a 404 network error because the page’s JavaScript tried to fetch a file that doesn’t exist.

   

2. Click Cause Error. The browser logs an uncaught TypeError because the JavaScript is trying to update a DOM node that doesn’t exist.

   

3. Click the Log Levels drop-down and enable the Verbose option if it’s disabled. You’ll learn more about filtering in the next section. You need to do this to make sure that the next message you log is visible. Note: If the Default Levels drop-down is disabled, you may need to close the Console Sidebar. Filter by Message Source below for more information about the Console Sidebar.

   

4. Click Cause Violation. The page becomes unresponsive for a few seconds and then the browser logs the message [Violation] 'click' handler took 3000ms to the Console. The exact duration may vary.

   

Filter messages

On some pages you’ll see the Console get flooded with messages. DevTools provides many different ways to filter out messages that aren’t relevant to the task at hand.

Filter by log level

Each console.* method is assigned a severity level: Verbose, Info, Warning, or Error. For example, console.log() is an Info-level message, whereas console.error() is an Error-level message.

Note: For a full list of console.* methods and their severity levels, see the Console API reference.

To filter by log level:

1. Click the Log Levels drop-down and disable Errors. A level is disabled when there is no longer a checkmark next to it. The Error-level messages disappear.

   

2. Click the Log Levels drop-down again and re-enable Errors. The Error-level messages reappear.

Filter by text

When you want to only view messages that include an exact string, type that string into the Filter text box.

1. Type Dave into the Filter text box. All messages that do not include the string Dave are hidden. You might also see the Adolescent Irradiated Espionage Tortoises label. That’s a bug.

   

2. Delete Dave from the Filter text box. All the messages reappear.

Filter by regular expression

When you want to show all messages that include a pattern of text, rather than a specific string, use a regular expression.

1. Type /^[AH]/ into the Filter text box. Type this pattern into RegExr for an explanation of what it’s doing.

   

2. Delete /^[AH]/ from the Filter text box. All messages are visible again.

Filter by message source

When you want to only view the messages that came from a certain URL, use the Sidebar.

1. Click Show Console Sidebar .

   

2. Click the Expand icon next to 12 Messages. The Sidebar shows a list of URLs that caused messages to be logged. For example, log.js caused 11 messages.

   

Filter by user messages

Earlier, when you clicked Log Info, a script called console.log('Hello, Console!') in order to log the message to the Console. Messages logged from JavaScript like this are called user messages. In contrast, when you clicked Cause 404, the browser logged an Error-level message stating that the requested resource could not be found. Messages like that are considered browser messages. You can use the Sidebar to filter out browser messages and only show user messages.

1. Click 9 User Messages. The browser messages are hidden.

   

2. Click 12 Messages to show all messages again.

Use the Console alongside any other panel

What if you’re editing styles, but you need to quickly check the Console log for something? Use the Drawer.

1. Click the Elements tab.

2. Press Escape. The Console tab of the Drawer opens. It has all of the features of the Console that you’ve been using throughout this tutorial.

   

Next steps

Congratulations, you have completed the tutorial. Click Dispense Trophy to receive your trophy.

• See Console Reference to explore more features and workflows related to the Console UI.
• See Console API Reference to learn more about all of the console methods that were demonstrated in View messages logged from JavaScript and explore the other console methods that weren’t covered in this tutorial.
• See Get Started to explore what else you can do with DevTools.
• See Format and style messages in the Console to learn more about all of the console format and styling methods.

Published on Thursday, April 18, 2019

This page explains how the Chrome DevTools Console makes it easier to develop web pages. The Console has 2 main uses: viewing logged messages and running JavaScript.

Viewing logged messages

Web developers often log messages to the Console to make sure that their JavaScript is working as expected. To log a message, you insert an expression like console.log('Hello, Console!') into your JavaScript. When the browser executes your JavaScript and sees an expression like that, it knows that it’s supposed to log the message to the Console. For example, suppose that you’re in the process of writing the HTML and JavaScript for a page:

<!doctype html>
<html>
  <head>
    <title>Console Demo</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script>
      console.log('Loading!');
      const h1 = document.querySelector('h1');
      console.log(h1.textContent);
      console.assert(document.querySelector('h2'), 'h2 not found!');
      const artists = [
        {
          first: 'René',
          last: 'Magritte'
        },
        {
          first: 'Chaim',
          last: 'Soutine'
        },
        {
          first: 'Henri',
          last: 'Matisse'
        }
      ];
      console.table(artists);
      setTimeout(() => {
        h1.textContent = 'Hello, Console!';
        console.log(h1.textContent);
      }, 3000);
    </script>
  </body>
</html>

Figure 1 shows what the Console looks like after loading the page and waiting 3 seconds. Try to figure out which lines of code caused the browser to log the messages.

Figure 1. The Console panel.

Web developers log messages for 2 general reasons:

• Making sure that code is executing in the right order.
• Inspecting the values of variables at a certain moment in time.

See Get Started With Logging Messages to get hands-on experience with logging. See the Console API Reference to browse the full list of console methods. The main difference between the methods is how they display the data that you’re logging.

Running JavaScript

The Console is also a REPL. You can run JavaScript in the Console to interact with the page that you’re inspecting. For example, Figure 2 shows the Console next to the DevTools homepage, and Figure 3 shows that same page after using the Console to change the page’s title.

Figure 2. The Console panel next to the DevTools homepage.

Figure 3. Using the Console to change the page’s title.

Modifying the page from the Console is possible because the Console has full access to the page’s window. DevTools has a few convenience functions that make it easier to inspect a page. For example, suppose that your JavaScript contains a function called hideModal. Running debug(hideModal) pauses your code on the first line of hideModal the next time that it’s called. See Console Utilities API Reference to see the full list of utility functions.

When you run JavaScript you don’t have to interact with the page. You can use the Console to try out new code that’s not related to the page. For example, suppose you just learned about the built-in JavaScript Array method map(), and you want to experiment with it. The Console is a good place to try out the function.

See Get Started With Running JavaScript to get hands-on experience with running JavaScript in the Console.

Published on Thursday, April 18, 2019 • Improve article

Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка Elements содержит всю информацию об инспектируемом HTML-файле: теги, таблицы стилей и т.д. Но в консоли есть и другие разделы, такие как Console, Sources, Network и прочие.

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

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

Алгоритм запуска консоли (инспектора) во всех браузерах идентичен. Есть два пути: первый – запуск через специальную клавишу на клавиатуре, второй – через функцию «Посмотреть код страницы/элемента». 

Например, если воспользоваться в Chrome клавишей F12, то откроется дополнительное окно с консолью.

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

В результате перед нами снова отобразится окно, в котором будет открыта главная вкладка с кодом страницы. Подробнее о ней мы еще поговорим, а пока давайте посмотрим, как выполняется запуск консоли в браузере Safari на устройствах Mac.

Первым делом нам потребуется включить меню разработчика – для этого переходим в раздел «Настройки» и открываем подраздел «Продвинутые». Находим пункт «Показать меню «Разработка в строке меню» и отмечаем его галочкой.

Теперь можно запустить консольное окно – достаточно воспользоваться комбинацией клавиш «Cmd+Opt+C».

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

Какие вкладки есть в консоли и за что они отвечают

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

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

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

Если выбрать опцию «Responsive», то слева от страницы отобразится дополнительная линия, которую мы можем тянуть влево или вправо – с помощью нее можно подобрать необходимое разрешение страницы. Также настроить разрешение мы можем и в верхней части окна.

И еще одна опция, которая может быть полезна – изменение расположения консольной панели. Чтобы ей воспользоваться, необходимо в верхней правой части нажать на кнопку в виде троеточия и в строке «Dock side» изменить ориентацию. Доступные положения: справа, слева, снизу, в отдельном окне.

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

Elements

Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.

Console

Еще одна важнейшая вкладка для верстальщиков – это Console. В ней мы можем узнать информацию о текущих ошибках на сайте, посмотреть исполняемый JavaScript-код, если он выведен в консоль с помощью метода console.log, и многое другое. 

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

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

Sources

Данный раздел открывает доступ ко всей иерархии сайта: здесь мы можем посмотреть, какие используются картинки, CSS-файлы, шрифты и прочее.

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

Network

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

Performance

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

Memory

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

Application

Данный раздел позволяет инспектировать и очищать все загруженные ресурсы. Мы можем взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и другими элементами.

Основная особенность опции – чистка куки. Если вам необходимо выполнить эту процедуру, то просто откройте в левой части раздел «Cookies» и нажмите справа на значок запрета. Куки для выбранной ссылки будут очищены.

Security

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

• проверке сертификата – подтвердил ли сайт свою подлинность TLS;
• tls-соединении – использует ли сайт современные безопасные протоколы;
• безопасности второстепенных источников.

Lighthouse

Последний раздел представляет собой инструмент аудита с открытым исходным кодом. Благодаря ему разработчики могут повысить производительность и доступность своих веб-сайтов.

Выявление основных ошибок

При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:

1. Uncaught TypeError: Cannot read property. Ошибка возникает в Хроме при вызове метода или чтении свойства для неопределенного объекта.
2. TypeError: ‘undefined’ is not an object (evaluating). Аналогична предыдущей ошибке, но только в Safari.
3. TypeError: null is not an object (evaluating). Возникает в Сафари при вызове метода или чтении свойства для нулевого объекта.
4. (unknown): Script error. Обозначает ошибку скрипта.
5. TypeError: Object doesn’t support property. Встречается в Internet Explorer – возникает при вызове определенного метода.
6. TypeError: ‘undefined’ is not a function. Указывает на неопределенную функцию (в Chrome).
7. Uncaught RangeError: Maximum call stack. Ошибка в Chrome, означающая превышение максимального размера стека.
8. TypeError: Cannot read property ‘length’. Невозможно прочитать свойство.
9. Uncaught TypeError: Cannot set property. Возникает, когда скрипт не может получить доступ к неопределенной переменной.
10. ReferenceError: event is not defined. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.

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

Заключение

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

Изучайте и находите свои применения этому инструменту – он может многое. Удачи!

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

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

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

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

• Базовые операции
  • Открытие консоли
  • Очистка консоли
  • Настройки консоли
• Использование API консоли
  • Вывод в консоль
  • Ошибки и предупреждения
  • Проверки
  • Фильтрация вывода в консоли
  • Группирование вывода
  • Замена строк и их форматирование
  • Представление DOM-элементов как JavaScript-объекты
  • Стилизация вывода консоли с помощью CSS
  • Измерение временных затрат
  • Корреляция с панелью Timeline
  • Создание точек останова
• Использование the Command Line API
  • Выполнение выражений
  • Выделение элементов
  • Инспектирование DOM-элементов и JavaScript объектов
  • Доступ к недавним элементам или объектам
  • Отслеживание событий
  • Контроль за CPU-профайлером

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

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

Консоль в 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() принимает один и более параметров и выводит их текущие
значения на консоль. Например:

var a = document.createElement('p');
a.appendChild(document.createTextNode('foo'));
a.appendChild(document.createTextNode('bar'));
console.log("Количество дочерних элементов: " + a.childNodes.length);

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

console.log("Количество дочерних элементов: ", a.childNodes.length,  "; текущее время: ", Date.now() );

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

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

function connectToServer() {
	console.error("Ошибка: %s (%i)", "Сервер не отвечает",500);
}
connectToServer();

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

if(a.childNodes.length < 3 ) {
    console.warn('Внимание! Слишком мало дочерних элементов (%d)', a.childNodes.length);
}

Проверки

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

console.assert(list.childNodes.length < 500, "Количество дочерних элементов > 500");

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

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

Возможные фильтры:

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

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

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

var user = "Вася Пупкин", authenticated = false;
console.group("Этап аутентификации");
console.log("Аутентификация пользователя '%s'", user);
// Код авторизации…
if (!authenticated) {
    console.log("Пользователь '%s' не был аутентифицирован.", user)
}
console.groupEnd();

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

var user = "Вася Пупкин", authenticated = true, authorized = true;
// Внешняя группа
console.group("Аутентификация пользователя '%s'", user);
if (authenticated) {
    console.log("Пользователь '%s' был аутентифицирован.", user)
    // Начало вложенной группы
    console.group("Авторизация пользователя '%s'", user);
    if (authorized) {
        console.log("Пользователь '%s' был авторизован.", user)
    }
    // Конец вложенной группы
    console.groupEnd();
}
// Конец внешней группы
console.groupEnd();
console.log("Обычный вывод без групп.");

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

console.groupCollapsed("Аутентификация пользователя '%s'", user);
if (authenticated) {
	//…
}

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

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

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

console.log("%s купил %d бочонков мёда", "Саша", "100");

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

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

Модификатор форматирования	Описание
%s	Форматирует значение как строку.
%d или %i	Форматирует значение как целое число (decimal и integer).
%f	Форматирует объект как число с плавающей точкой.
%o	Форматирует значение как DOM-элемент (также как в панели Elements).
%O	Форматирует значение как JavaScript-объект.
%c	Применяет переданные в качестве второго аргумента CSS-стили к выводимой строке.

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

console.log("Количество дочерних элементов: %d; текущее время: %f", a.childNodes.length, Date.now() );

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

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

console.log(document.body.firstElementChild);

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

console.dir(document.body.firstElementChild);

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

console.log("%O", document.body.firstElementChild);

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

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

console.log("%cЭта надпись будет отформатирована крупным голубым текстом", "color: blue; font-size: x-large");

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

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

console.time("Инициализация массива");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Инициализация массива");

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

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

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

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

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

function AddResult(name, result) {
	console.timeStamp("Добавление результатов");
	var text = name + ': ' + result;
	var results = document.getElementById("results");
	results.innerHTML += (text + "<br>");
}

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

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

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

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

function brightness() {
    debugger;
    var r = Math.floor(this.red*255);
    var g = Math.floor(this.green*255);
    var b = Math.floor(this.blue*255);
    return (r * 77 + g * 150 + b * 29) >> 8;
}

Использование 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» объекта окна.

monitorEvents(window, "resize");

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

monitorEvents(document.body, ["mousedown", "mouseup"]);

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

monitorEvents($('#scrollBar'), "touch");

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

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

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

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

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

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

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

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

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

profile("A");profile("B");profileEnd("B")profileEnd("A")

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

profile("A");profile("B"); profileEnd("A");profileEnd("B");