Как открыть javascript console в google chrome

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

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

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

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

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

  Как открыть javascript console в google chrome

  Незаменимым инструментом при работе с JavaScript является консоль браузера, которая позволяет производить отладку программы. Во многих современных браузерах есть подобная консоль. Например, чтобы открыть консоль в Google Chrome, нам надо перейти в меню Дополнительные инструменты (More Tools) -> Инструменты разработчика (Developer tools) :

  

  После этого внизу браузера откроется консоль:

  

  Мы можем напрямую вводить в консоль браузера выражения JavaScript, и они будут выполняться. Например, введем в консоли следующий текст:

  alert("Привет мир");

  И что замечательно при работе с консолью, при вводе она предлагает всплывающую подсказку с названиями, которые мы хотим ввести, что упрощает ввод, снижает количество возможных ошибок:

  

  Функция alert() выводит в браузере окно с сообщением. В итоге после ввода этой команды и нажатия на клавишу Enter браузер выполнит эту функцию и отобразит нам окно с сообщением:

  

  Таким образом, для написания и выполнения кода JavaScript нам в принципе не нужен ни текстовый редактор, ни файл веб-страницы, который содержит код javascript, достаточно одной консоли браузера. Однако набирать большой и сложный код JavaScript в консоли может быть не очень удобно, поэтому в дальнейшем для всех примеров по прежнему будет использовать код JavaScript, который встраивается на html-страницу.

  Вывод на консоль и console.log

  Для вывода различного рода информации в консоли браузера используется специальная функция console.log() . Например, определим html-страницу со следующим кодом:

  В коде javascript с помощью ключевого слова const объявляется константа sum , которой присваивается сумма двух чисел 5 и 8:

  const sum = 5 + 8;

  Далее с помощью метода console.log() на консоль браузера выводится некоторое сообщение

  console.log("Результат операции");

  И в конце также с помощью метода console.log() на консоль браузера выводится значение константы sum.

  console.log(sum);

  И после запуска веб-страницы в браузере мы увидим в консоли результат выполнения кода:

  

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

  В дальнейшем мы часто будем обращаться к консоли и использовать функцию console.log.

  Причем подобный код мы могли бы ввести в самой консоли:

  

  Также последовательно вводим инструкции и после ввода каждой инструкции нажимаем на Enter. В данном случае я ввел две инструкции:

  const sum2 = 1 + 2 // определяем константу sum2, которая равна сумме 1 + 2 console.log(sum2) // выводим значение константы sum2 на консоль

  Если нам надо, чтобы код в консоли переносился на новую строку без выполнения, то в конце выражения javascript нажимаем на комбинацию клавиш Shift + Enter . После ввода последней инструкции для выполнения введенного кода javascript нажимаем на Enter.

  DevTools: как открыть инструменты разработчика в браузере и почему они делают работу эффективнее

  

  DevTools (инструменты разработчика) доступны во всех современных браузерах и полезны по нескольким причинам. Например, их можно использовать для отладки кода и тестирования изменений в HTML, CSS и JavaScript в режиме реального времени. В этой статье расскажем, как открывать DevTools в разных браузерах и на примере разберем, какие возможности они предоставляют.

  Вкладка Console в DevTools позволяет работать с JavaScript при просмотре любой страницы. Это может быть удобно в разных ситуациях:

  1. Просмотр ошибок. Например, позволяет увидеть, что какие-то ресурсы (CSS, изображения и так далее) на странице не загрузились.
  2. Обращение к HTML-элементам. Так можно сразу проверить правильность написания пути до элемента в JavaScript.
  3. Отладка кода на JavaScript. Речь идет о тестировании и устранении ошибок непосредственно в браузере. Для этого вкладка дает множество инструментов.

  Сначала разберемся, как открыть консоль в разных браузерах.

  Профессия «Инженер по тестированию»

  • Смените профессию за 4 месяца — короткий путь в IT
  • Познакомьтесь с этапами разработки и жизненным циклом ПО
  • Узнайте всё о техниках тест-дизайна
  • Разберитесь с системами управления тестированием и системами баг-трекинга
  • Научитесь работать с API и базами данных

  Google Chrome

  1. Нажмите значок с тремя точками в правом верхнем углу окна браузера.
  2. В появившемся меню наведите курсор мыши на «Дополнительные инструменты» и выберите «Инструменты разработчика» в расширенном меню.
  3. После этого в правой части экрана откроется раздел с DevTools.

  Еще один способ — использовать горячие клавиши. В Chrome это Ctrl+Shift+I (или Command+option+I на Mac).

  

  Microsoft Edge

  1. Нажмите на значок «Настройки и другое» в правом верхнем углу экрана.
  2. Затем кликните на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты разработчика».
  3. После этого в правой части экрана откроется раздел с DevTools.

  Как и в Chrome, открыть DevTools в Edge можно горячими клавишами Ctrl+Shift+ I (или Command+option+I на Mac).

  

  Mozilla

  1. Выберите меню-гамбургер в верхнем углу экрана.
  2. Затем нажмите на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты веб-разработчика».
  3. После этого в нижней части экрана откроется раздел с DevTools.

  Горячие клавиши в Mozilla — Ctrl+Shift+I (или Command+option+I на Mac).

  

  Opera

  1. Щелкните на значок Opera в верхнем левом углу окна браузера.
  2. Наведите курсор мыши на «Разработчик» в меню и выберите «Инструменты разработчика».
  3. После этого в правой части экрана откроется раздел с DevTools.

  В Opera DevTools можно открыть комбинацией клавиш Ctrl+Shift+I(или Command+option+I на Mac).

  

  Safari

  1. Выберите меню Safari в верхнем левом углу экрана.
  2. Затем нажмите «Настройки» и перейдите в меню «Разработка» в верхней части экрана.
  3. Выберите «Показать веб-инспектор» в раскрывающемся меню .
  4. После этого откроется новое окно с инструментами разработчика.

  Горячие клавиши для Safari — Command + option+ I.

  

  Яндекс.Браузер

  1. Нажмите на меню-гамбургер в верхнем правом углу окна браузера.
  2. Затем кликните по пункту «Дополнительно» и выберите меню «Дополнительные инструменты».
  3. После этого переходим к пункту «Инструменты разработчика» в следующем меню.

  Для запуска консоли также можно нажать Ctrl + Shift + I.

  

  Как использовать консоль

  Обычно для быстрого выполнения кода и оценки результата его работы используются сторонние сайты. Другой вариант — NodeJS, которая дает доступ к REPL (Read Eval Print Loop) — интерактивному интерпретатору кода. Вкладка Console, по сути, выполняет те же функции и обладает множеством других возможностей.

  Рассмотрим, как работает консоль, на примере Chrome DevTools. В ней можно проверять как простые инструкции вида 2 + 2 , так и большие функции.

  Откроем Chrome DevTools, перейдем во вкладку Console, и вставим выражение 2 + 2 DevTools сразу выдаст ответ 4 . Таким образом можно не только складывать числа, а использовать любые методы из стандартной библиотеки JavaScript, например:

  'hexlet'.toUpperCase() // => HEXLET [1, 2, 3, 4].map((number) => number ** 2) // => [1, 4, 9, 16] 

  

  Помимо простых выражений, которые никак не связаны с сайтом, можно использовать и DOM API для доступа к элементам страницы. Код, указанный ниже, посчитает и вернет количество ссылок на главной странице ru.hexlet.io. Вы также можете самостоятельно перейти на любую страницу и «посчитать» количество ссылок или любых других элементов на ней:

  document.querySelectorAll('a').length // => 73 

  

  Кроме того, DevTools позволяет создавать переменные. Пока страница существует, созданные переменные будут существовать и вы можете взаимодействовать с ними в будущем:

  const linksCount = document.querySelectorAll('a').length // => undefined 2 + 2 // => 4 linksCount // => 73 linksCount * 2 // => 146 

  

  Однострочные выражения и инструкции — это довольно просто. Что, если хочется создать функцию, а нажатие на Enter сразу выполняет код? Для многострочных выражений используется перенос с помощью Shift + Enter. Эта опция позволяет писать и использовать красивые функции, которые, как и переменные, могут быть использованы в текущей сессии:

  const getElementCount = (tag) =>  const elementCount = document.querySelectorAll(tag).length; return `Найдено $elementCount> элементов $tag>` > getElementCount('div') // => 'Найдено 105 элементов div' 

  

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

  Профессия «Инженер по тестированию»

  • Смените профессию за 4 месяца — короткий путь в IT
  • Познакомьтесь с этапами разработки и жизненным циклом ПО
  • Узнайте всё о техниках тест-дизайна
  • Разберитесь с системами управления тестированием и системами баг-трекинга
  • Научитесь работать с API и базами данных
  Похожие публикации:

  1. Где находятся файлы termux
  2. Как сделать из телефона второй монитор
  3. Ошибка ходовая часть в туарег что делать
  4. Подложка в эксель как сделать