Консоль разработчика
Код уязвим для ошибок. И вы, скорее всего, будете делать ошибки в коде… Впрочем, давайте будем откровенны: вы точно будете совершать ошибки в коде. В конце концов, вы человек, а не робот.
Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.
Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).
Chrome и Firefox снискали любовь подавляющего большинства программистов во многом благодаря своим отменным инструментам разработчика. Остальные браузеры, хотя и оснащены подобными инструментами, но всё же зачастую находятся в роли догоняющих и по качеству, и по количеству свойств и особенностей. В общем, почти у всех программистов есть свой «любимый» браузер. Другие используются только для отлова и исправления специфичных «браузерозависимых» ошибок.
Для начала знакомства с этими мощными инструментами давайте выясним, как их открывать, смотреть ошибки и запускать команды JavaScript.
Google Chrome
В её JavaScript-коде закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.
Нажмите F12 или, если вы используете Mac, Cmd + Opt + J .
По умолчанию в инструментах разработчика откроется вкладка Console (консоль).
Она выглядит приблизительно следующим образом:
Точный внешний вид инструментов разработки зависит от используемой версии Chrome. Время от времени некоторые детали изменяются, но в целом внешний вид остаётся примерно похожим на предыдущие версии.
- В консоли мы можем увидеть сообщение об ошибке, отрисованное красным цветом. В нашем случае скрипт содержит неизвестную команду «lalala».
- Справа присутствует ссылка на исходный код bug.html:12 с номером строки кода, в которой эта ошибка и произошла.
Под сообщением об ошибке находится синий символ > . Он обозначает командную строку, в ней мы можем редактировать и запускать JavaScript-команды. Для их запуска нажмите Enter .
Многострочный ввод
Обычно при нажатии Enter введённая строка кода сразу выполняется.
Чтобы перенести строку, нажмите Shift + Enter . Так можно вводить более длинный JS-код.
Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе Отладка в браузере.
Firefox, Edge и другие
Инструменты разработчика в большинстве браузеров открываются при нажатии на F12 .
Их внешний вид и принципы работы мало чем отличаются. Разобравшись с инструментами в одном браузере, вы без труда сможете работать с ними и в другом.
Safari
Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).
Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:
Теперь консоль можно активировать нажатием клавиш Cmd + Opt + C . Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.
Итого
- Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.
- В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12 . В Chrome для Mac используйте комбинацию Cmd + Opt + J , Safari: Cmd + Opt + C (необходимо предварительное включение «Меню разработчика»).
Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.
Как запустить консоль (панель разработчика) в большинстве браузеров.
Консоль (панель разработчика) в браузере – это удобное средство, которое позволяет просматривать ошибки, которые возникли при загрузке страницы и взаимодействовать с этой страницей с помощью специальных команд.
Выглядит это примерно так:
Консоль очень помогает устранять ошибки при верстке сайтов, неполадки в работе скриптов на странице, выводит сводную информацию обо всем, что происходит на странице и может сэкономить вам кучу времени при веб-разработке.
Для тех, кто хочет посмотреть как эта панель помогает на практике, в веб-разработке, посмотрите этот курс «Консоль браузера. Эффективная работа.»
Первый шаг в том, чтобы начать использовать консоль в свое работе, нужно научиться ее запускать. В разных браузерах это может делаться по разному.
Чаще всего, в Windows — это будет комбинация клавиш:
Ctrl + Shift + I
Для компьютеров на Mac OS подобная комбинация выглядит следующим образом:
⌥ + ⌘ + I (или Shift + Cmd + I)
Эта комбинация клавиш должна работать и для браузера Opera
И в браузере Firefox
Единственное исключение из этого правила Internet Explorer, здесь консоль вызывается клавишей F12.
Нужно просто запомнить эти комбинации клавиш.
Если у вас какой-то особенный браузер и эта комбинация не помогает, посмотрите в главном меню, может быть получиться запустить эту панель от туда или можно посмотреть информацию в документации.
Для тех, кто хочет посмотреть как эта панель помогает на практике, в веб-разработке, посмотрите этот курс «Консоль браузера. Эффективная работа.»
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Как перейти в консоль браузера
Консоль разработчика — это инструмент в вашем браузере, который «содержит код страницы». Данная информация может помочь в решение некоторых проблем, с которыми Вы можете столкнуться. Если вас попросили предоставить информацию из окна консоли, вот как это сделать:
Для вызова консоли разработчика нажмите на клавиатуре кнопку F12.
Выберите вкладку «Console».
Открыв консоль, нажмите F5, чтобы обновить страницу, а затем отправьте нам следующую информацию:
— полный скриншот консоли, нажав кнопку Print Screen на клавиатуре.
— скопируйте текст в окне консоли и отправьте его по e-mail нам или в файле Блокнота, прикрепив его к электронному письму.
Пожалуйста, отправьте консольное сообщение и скриншот вместе с описанием проблемы, с которой вы столкнулись на электронный адрес: phitechsupport@pahc.com
Использование консоли Google Chrome
Консоль предоставляет две функции для разработчиков для тестирования веб-страниц и приложений:
- в консоль можно выводить отладочную информацию, используя такие методы Console API, как console.log() и console.profile().
- оболочка для работы в консоли, в которой вы можете вводить команды, в частности используя автодополнение, и оперировать document и Chrome DevTools. Вы можете выполнять JavaScript-выражения прямо в консоли и использовать методы Command Line API, например, $() для создания выборки элементов, или profile() для запуска CPU-профайлера.
В статье мы рассмотрим наиболее распространённые способы использования Console API и Command Line API. Более подробно о них вы сможете узнать в документации.
- Базовые операции
- Открытие консоли
- Очистка консоли
- Настройки консоли
- Вывод в консоль
- Ошибки и предупреждения
- Проверки
- Фильтрация вывода в консоли
- Группирование вывода
- Замена строк и их форматирование
- Представление DOM-элементов как JavaScript-объекты
- Стилизация вывода консоли с помощью CSS
- Измерение временных затрат
- Корреляция с панелью Timeline
- Создание точек останова
- Выполнение выражений
- Выделение элементов
- Инспектирование 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 + "
"); >Как проиллюстрировано в скриншоте, вызов 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».
$('#loginBtn');
Метод $$() возвращает массив элементов, соответствующих указанному CSS- селектору, идентично document.querySelectorAll(). Чтобы получить все кнопки с классом loginBtn , нужно ввести:
$$('button.loginBtn');
И, наконец, метод x() принимает XPath-путь в качестве параметра и возвращает массив элементов, соответствующих этому пути. Например, этот код вернёт все элементы , являющиеся дочерними по отношению к элементу :
$x('/html/body/script');Инспектирование DOM-элементов и объектов
Метод inspect() принимает ссылку на DOM-элемент (или объект) в качестве параметра и отображает элемент или объект в соответствующей панели: DOM-элемент в панели Elements и JavaScript-объект в панели Profile.
Доступ к недавно вызванным 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() с объектом в качестве аргумента.
unmonitorEvents(window);Контроль за 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");