Как открыть файл в консоли хрома

Консоль разработчика

Код уязвим для ошибок. И вы, скорее всего, будете делать ошибки в коде… Впрочем, давайте будем откровенны: вы точно будете совершать ошибки в коде. В конце концов, вы человек, а не робот.

Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.

Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (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.

Введение в Chrome DevTools. Console, Sources, Network

В первой части цикла про инструменты разработчика мы разобрались со вкладкой Elements, а теперь продолжаем знакомить с другими важными частями DevTools — вкладками Console, Sources и Network.

Бонус — расскажем, как сделать скриншот всей страницы в Chrome без плагинов.

Вкладка Console

В консоли отображается информация об ошибках в коде, а ещё туда можно ввести команду, и она выполнится. Если на странице не подгрузились шрифты, картинки или стили, то сообщения об ошибках выводятся именно сюда. Справа в верхнем углу DevTools выведутся иконки-предупреждения, которые откроют окно консоли.

Вкладка Sources

Теперь заглянем во вкладку Sources. Она показывает все подключенные к странице ресурсы. Чаще всего эта вкладка используется при отладке кода.

Например, так выглядит минифицированный CSS-файл на вкладке Sources.

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

Вкладка Network

С её помощью можно выяснить, сколько времени заняла загрузка страницы, какие ресурсы подключились или не подключились к странице, и многое другое. При первом открытии вкладка может оказаться пустой — тогда просто перезагрузите страницу.

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

Обычно вкладку Network используют, чтобы узнать состояние ресурса, который не отображается на странице, но был к ней подключен. Смотрим в таблицу — если есть какая-то ошибка, ресурс будет гореть красным. Если ошибок нет, то статус каждого запроса — 200. Это значит, что всё хорошо.

Но если на сайте будет ошибка, сообщение о ней отобразится и на вкладке Console.

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

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

Проверка вёрстки на мобильных

Легко проверить, как выглядит вёрстка на мобильных. Заходим в режим эмуляции и всё — можем поменять ширину экрана, выбрать конкретный девайс (например, айфон), просмотреть все media-выражения, примененные к странице, или выбрать плотность пикселей, чтобы проверить ретиновую графику.

Это незаменимый инструмент в работе над адаптивной вёрсткой.

Скриншоты страниц

Другая возможность — скриншоты страницы. Заходим в режим эмуляции и в выпадающем меню выбираем «сделать скриншот» — изображение сразу сохраняется на компьютер.

Также есть возможность сделать скриншот всей страницы целиком — для этого выберите пункт Capture full size screenshot.

На этом всё — в следующих выпусках расскажем, как пользуются DevTools настоящие профессионалы.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Использование консоли 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"); 

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

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

  

  На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль 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. Превращаем браузер в текстовый редактор

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

  document.body.contentEditable=true

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

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

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

  getEventListeners($(‘selector’))

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

  

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

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

  getEventListeners($(‘selector’)).eventName[0].listener

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

  getEventListeners($(‘#firstName’)).click[0].listener

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

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

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

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

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

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

  console.time('myTime'); //Запускает таймер с меткой myTime console.timeEnd('myTime'); //Останавливает таймер с меткой myTime //Вывод: myTime:123.00 ms

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

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

  console.time('myTime'); // Запускает таймер с меткой myTime for(var i=0; i < 100000; i++)< 2+4+5; >console.timeEnd('mytime'); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

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

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

  var myArray=[,,,]

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

  console.table(variableName)

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

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

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

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

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

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

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

  dir($(‘selector’))

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

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

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

  2+3+4 9 //- Результат суммирования - 9 $_ 9 // Выводится последний полученный результат $_ * $_ 81 // Так как последний результат 9, получаем 81 Math.sqrt($_) 9 // Квадратный корень из последнего результата, который был равен 81 $_ 9 // Снова получаем 9 – результат предыдущего вычисления

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

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

  clear()

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

  11, 12, 13, 14…

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

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

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

  • JavaScript
  • HTML
  • разработка
  • Google Chrome
  • консоль разработчика
  • Блог компании RUVDS.com
  • Веб-разработка
  • JavaScript
  • Google Chrome
  • HTML
  Читать:

  Как снять задний бампер вольво s60