Инструменты разработчика

Инструменты разработчика (Chrome Dev Tools) можно найти в Chrome через меню Дополнительные инструменты | Инструменты разработчика или вызвать через горячие клавиши Ctrl+Shift+I.

Console

Вкладка Console позволяет вести логи. Поместите в существующий сценарий команду console.xxx, чтобы увидеть результат на вкладке.

console.log()

Самый простой способ вывести текст в лог - это команда console.log():


console.log("Hello Kitty");

Можно подставлять переменные в строку, используя символ %s.


var cat = "Murzik";
console.log("Hello %s", cat);

Если использовать %c, то можно управлять стилями вывода сообщения.


console.log("%c Hello Kitty", 'font-size: 24px; background: teal');

console.warn()

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


console.warn("Последнее китайское предупреждение");

console.error()

Аналогично работает команда error() - выводится значок с крестиком. Цвет сообщения: розовый и красный.


console.error("Большая ошибка!");

console.info()

Для вывода информации используется команда info() с синим значком с буквой i.


console.info("Пора кормить кота");

console.assert()

Для проверки вычислений можно использовать команду assert():


console.assert(1 === 3, 'Чушь собачья!');

console.clear()

Чтобы не засорять вкладку, можно очистить её от предыдущих логов командой clear():


console.clear();

console.count()

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


console.count("cat");
console.count("cat");
console.count("dog");
console.count("cat");
console.count("dog");
console.count("cat");

console.time()

Также можно измерить длительность операций. Сделаем запрос на сайт и посмотрим, сколько времени это заняло.


console.time("fetch");
fetch('https://api.github.com/users/alexanderKlimov')
  .then(data => data.json())
  .then(data => {
      console.timeEnd("fetch")
      console.log(data);
  });

Нажмите, чтобы сделать текст синим

Реклама