Автор оригинала: Flavio Copes.
Каждый браузер открывает консоль, которая позволяет вам взаимодействовать с Web Platform API И дает вам внутренний взгляд на код, печатая сообщения, которые генерируются вашим Javascript код работает на странице.
Обзор консоли
Панель панели консоли проста. Есть кнопка, чтобы очистить консольные сообщения, то, что вы также можете сделать, нажав CMD-K в MacOS (Mac) или Ctrl-K на Windows (Win).
Вторая кнопка активирует фильтрующую боковую панель, которая позволяет фильтровать по тексту или по типу сообщения. Вы можете отфильтровать по ошибке, предупреждению, информации, журналу или отладке сообщений.
Вы также можете скрыть сетевые сообщения и просто сосредоточиться на журналах JavaScript.
Консоль – это не просто место, где вы можете увидеть сообщения, но и лучший способ взаимодействовать с кодом JavaScript, и много раз DOM. Или просто получите информацию со страницы.
Давайте введем наше первое сообщение. Обратите внимание на & GT;
Давайте нажмем туда и введите:
console.log('test')Консоль действует как Реп , что означает Cread-Eval-Print Loop. Короче говоря, он интерпретирует наш код JavaScript и что-то печатает.
Используйте форматирование Console.log
Как вы видите, Console.log («Тест») Отпечатки Тест в консоли.
Использование console.log В вашем коде JavaScript может помочь вам отлаживать, например, печати статических строк. Но вы также можете передавать его переменной, которая может быть нативным типом JavaScript, например, целое число или объект.
Вы можете пройти несколько переменных в console.log :
console.log('test1', 'test2')Мы также можем отформатировать красивые фразы, проходя переменные и спецификатор формата:
console.log("My %s has %d years", 'cat', 2)% sФорматы переменной как строка% dили% яФорматы переменной как целое число% fФорматирует переменную как номер с плавающей запятой% оможет быть использован для печати элемента DOM% Оиспользуется для печати представления объекта
Например:
console.log("%o, %O", document.body, document.body)Еще один спецификатор полезного формата – % c , что позволяет нам пропускать CSS для форматирования строки:
console.log("%c My %s has %d years", "color: yellow; background:black; font-size: 16pt", "cat", 2)Очистить консоль
Есть три способа очистить консоль при работе над ним, с различными методами ввода.
Первый способ – нажать Очистить журнал консоли Кнопка на консольной панели инструментов.
Второй метод должен ввести Console.Clear () Внутри консоли или в вашем Функция JavaScript который работает в вашем приложении/сайте.
Вы также можете просто ввести Очистить () Отказ
Третий путь через сочетание клавиш. Это CMD-K (Mac) или Ctrl + L (Победить).
Подсчет элементов
Console.count () это удобный метод.
Возьми этот код:
const x = 1const y = 2const z = 3
console.count("The value of x is " + x + " and has been checked .. how many times?")console.count("The value of x is " + x + " and has been checked .. how many times?")console.count("The value of y is " + y + " and has been checked .. how many times?")Что происходит, в том, что Считать Подсчитается количество раз, когда напечатана строка, и распечатайте количество рядом с ним:
Вы можете просто посчитать яблоки и апельсины:
const oranges = ['orange', 'orange']const apples = ['just one apple']
oranges.forEach((fruit) => { console.count(fruit)})apples.forEach((fruit) => { console.count(fruit)})Журнал более сложных объектов
console.log довольно удивительно проверять переменные. Вы также можете пройти его объектом, и он сделает все возможное, чтобы печатать его для вас читабельным образом. В большинстве случаев это означает, что он печатает строковое представление объекта.
Давай попробуем:
console.log([1, 2])
Другой вариант для печати объектов – использовать Console.dir :
console.dir([1, 2])
Как видите, этот метод печатает переменную в JSON-подобном представлению, чтобы вы могли проверить все его свойства.
То же самое, что Console.dir Выходы достижимы, делая:
console.log("%O", [1,2])Какой использовать, зависит от того, что вам нужно для отладки, конечно. Вам придется решить, какой из двух из двух может сделать лучшую работу для вас.
Другая функция – Console.table () который печатает хороший стол.
Нам просто нужно пройти его массив элементов, и он будет распечатать каждый элемент массива в новой строке:
console.table([[1,2], ['x', 'y']])
Вы также можете установить имена столбцов, передавая объектный литерал вместо массива, поэтому он будет использовать свойство объекта в качестве имени столбца:
console.table([{x: 1, y: 2, z: 3}, {x: "First column", y: "Second column", z: null}])Console.table Также может быть более мощным. Если вы проходите его буквальный объект, который, в свою очередь, содержит объект, и вы передаете массив с именами столбцов, он будет распечатать таблицу с индексами строки, взятых из литерала объекта.
Например:
const shoppingCart = {}shoppingCart.firstItem = {'color': 'black', 'size': 'L'}shoppingCart.secondItem = {'color': 'red', 'size': 'L'}shoppingCart.thirdItem = {'color': 'white', 'size': 'M'}console.table(shoppingCart, ["color", "size"])
Регистрация разных уровней ошибок
Как мы видели, Console.log отлично подходит для печати сообщений в консоли.
Теперь мы обнаружим еще три удобных метода, которые помогут нам отлаживать, потому что они косвенно указывают на различные уровни ошибки.
Console.info () Как видите, немного «я» печатается рядом с ним, что делает его понятным сообщением, это просто информация.
Console.warn () Печатает желтую восклицательный знак.
Если вы активируете панель инструментов для фильтрации консоли, вы можете видеть, что консоль позволяет фильтровать сообщения на основе типа, поэтому это действительно удобно дифференцировать сообщения. Например, если мы сейчас нажимаем «предупреждения», все напечатанные сообщения, которые не предупреждают, будут скрыты.
Console.Error () Это немного отличается от других, потому что в дополнение к печати красного X, которое четко утверждает, что есть ошибка, у нас есть полный след стеки функции, которая создала ошибку. Итак, мы можем пойти и постараться исправить это.
Сообщения консоли очищаются на каждой навигации страницы, если вы не проверяете Сохранить журнал В настройках консоли:
Группировка консольных сообщений
Сообщения консоли могут расти по размеру, а шум, когда вы пытаетесь отладить ошибку, может быть подавляющим.
Чтобы ограничить эту проблему, консоль API предлагает удобную функцию: группировка консольных сообщений.
Давайте сделаем пример первой:
console.group("Testing the location") console.log("Location hash", location.hash) console.log("Location hostname", location.hostname) console.log("Location protocol", location.protocol) console.groupEnd()
Как видите, консоль создает группу, и у нас есть сообщения журнала.
Вы можете сделать то же самое, но выведите рухнутое сообщение, которое вы можете открыть по требованию, чтобы дополнительно ограничить шум:
console.groupCollapsed("Testing the location") console.log("Location hash", location.hash) console.log("Location hostname", location.hostname) console.log("Location protocol", location.protocol) console.groupEnd()
Приятно в том, что эти группы могут быть вложены, так что вы можете в конечном итоге делать:
console.group("Main")console.log("Test")console.group("1")console.log("1 text")console.group("1a")console.log("1a text")console.groupEnd()console.groupCollapsed("1b")console.log("1b text")console.groupEnd()console.groupEnd()Распечатать трассировку стека
Там могут быть случаи, когда полезно распечатать трассировку стека вызовов функции, возможно, чтобы ответить на вопрос: «Как вы достигли этой части кода?»
Вы можете сделать это, используя console.traace () :
const function2 = () => console.trace() const function1 = () => function2() function1()
Рассчитать время, проведенное
Вы можете легко рассчитать, сколько времени требуется функция для запуска, используя Время () и Thumeend () Отказ
const doSomething = () => console.log('test')const measureDoingSomething = () => { console.time('doSomething()') //do something, and measure the time it takes doSomething() console.timeEnd('doSomething()')}measureDoingSomething()Создать профиль CPU
Devtools позволяет проанализировать производительность профиля процессора любой функции.
Вы можете начать это вручную. Но самый точный способ сделать это – это обернуть то, что вы хотите отслеживать между Профиль () и Пронтэлмен () команды.
Они похожи на Время () и Thumeend () За исключением того, что они не просто измеряют время, но создают более подробный отчет:
const doSomething = () => console.log('test')const measureDoingSomething = () => { console.profile("doSomething()") //do something, and measure its performance doSomething() console.profileEnd()}measureDoingSomething()Оригинал: “https://www.freecodecamp.org/news/working-with-the-devtools-console-and-console-api-an-overview-13cff6dc3db4/”