Как работать с DevTools Console и Console API: обзор

1656627372 kak rabotat s devtools console i console api obzor

Интересно изучать JavaScript? Получите мою электронную книгу на jshandbook.com

Каждый браузер предоставляет консоль, которая позволяет взаимодействовать с API веб-платформы и позволяет взглянуть на код изнутри, печатая сообщения, генерируемые вашим кодом JavaScript, который работает на странице.

Обзор консоли

Панель инструментов консоли проста. Есть кнопка для очистки сообщений консоли, которую вы также можете сделать, нажав cmd-K в macOS (Mac), или ctrl-K Windows (Win).

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

Вы также можете скрыть сообщения, созданные сетью, и просто сосредоточиться на сообщениях JavaScript.

wDTPXRKp2UYA6T1fjeG8oRZREJ9gfnCQhGhN

Консоль – это не просто место, где вы можете видеть сообщения, но и лучший способ взаимодействия с кодом JavaScript, а также часто с DOM. Или просто извлечь информацию со страницы.

Давайте введем наше первое сообщение. Обратите внимание на >.

Давайте щелкните там и введите:

console.log('test')

Консоль действует как a REPL, что означает цикл read-eval-print. Короче говоря, он интерпретирует наш код JavaScript и что-то печатает.

Используйте форматирование console.log

Как видишь, console.log('test') отпечатки test в консоли.

Использование console.log в вашем коде JavaScript может помочь вам отладить, например, печатая статические строки. Но вы также можете передать ей переменную, которая может быть родного типа JavaScript, например, целое число или объект.

Вы можете передать несколько переменных console.log:

console.log('test1', 'test2')

Мы также можем форматировать красивые фразы, передавая переменные и спецификатор формата:

console.log("My %s has %d years", 'cat', 2)
  • %s форматирует переменную как строку
  • %d или %i форматирует переменную как целое число
  • %f форматирует переменную как число с плавающей запятой
  • %o можно использовать для печати элемента DOM
  • %O используется для печати представление объекта

Например:

console.log("%o, %O", document.body, document.body)
8ODzQol1-tDzsGRZUM8T9CX47e0cUJ87B-DZ

Еще один полезный спецификатор формата %cчто позволяет нам передать CSS для форматирования строки:

console.log("%c My %s has %d years", "color: yellow; background:black; font-size: 16pt", "cat", 2)
не найдено

Очистите консоль

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

Первый способ – нажать кнопку Очистить журнал консоли кнопку на панели инструментов консоли.

Второй способ – набрать console.clear() внутри консоли или в функции JavaScript, которая выполняется в вашем приложении/сайте.

Вы также можете просто ввести clear().

Третий способ – с помощью комбинации клавиш. Его 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?")

Что происходит, то это count подсчитает количество раз, когда строка печатается, и напечатает количество рядом с ней:

PFfiMSrS0rWwW1Kt-nlzkX4KJcUbZPo764VA

Вы можете просто посчитать яблоки и апельсины:

const oranges = ['orange', 'orange']const apples = ['just one apple']
oranges.forEach((fruit) => {  console.count(fruit)})
apples.forEach((fruit) => {  console.count(fruit)})
PZvOr2UA6q-SAU7ajARWSemhoQPjIzlrfPBD

Записывать более сложные объекты

console.log очень удивительно проверить переменные. Вы также можете передать ему объект, и он сделает все возможное, чтобы распечатать его вам в удобном для чтения виде. В большинстве случаев это означает, что он печатает строковое представление объекта.

Давайте попробуем:

console.log([1, 2])

Другой вариант печати объектов – использование console.dir:

console.dir([1, 2])

Как видите, этот метод печатает переменную в виде JSON-подобного представления и вы можете проверить все ее свойства.

То же, что console.dir результаты достигаются, если:

console.log("%O", [1,2])
IhPWlFqNWXxtw3C0KdpEJnKNTtj6KrbdZ1oS

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

Еще одна функция console.table() который печатает хорошую таблицу.

Нам просто нужно передать ему массив элементов, и он будет печатать каждый элемент массива в новой строке:

console.table([[1,2], ['x', 'y']])

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

console.table([{x: 1, y: 2, z: 3}, {x: "First column", y: "Second column", z: null}])
zw4xZy5O9hY2g4kkkmQSCgmCiIVOXKDX1R0b

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()
Как видите, рядом напечатано небольшое «i», что дает понять, что сообщение журнала – это только информация.

console.warn()
Печать желтый восклицательный знак.

При активации панели инструментов фильтрации консоли вы увидите, что консоль позволяет фильтровать сообщения по типу, поэтому очень удобно различать сообщения. Например, если мы нажмем «Предупреждение», все отпечатанные сообщения, которые не являются предупреждениями, будут скрыты.

console.error()
Это несколько отличается от других, потому что в дополнение к печати красного X, который четко указывает, что есть ошибка, мы имеем полную трассировку стека функции, которая генерировала ошибку. Тогда мы можем пойти и попытаться исправить это.

S8jw2S-p8xUE4qAwtPP3kPx0q-Ck1tSb1f3T

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

8GvRXSsX4Ov46TjaYqPsHxcBcBAClp5tVC5v

Группировка сообщений консоли

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

Чтобы ограничить эту проблему, консольный 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()
NhtoHr1zrCDGaHZwSLpxhNiHpGDpSqCqdZ-S

Приятно то, что эти группы могут быть вложены, поэтому вы можете сделать:

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()
ZQRjpr0JPl3EplgTZrshyZxr0q2WzStZyoxF

Возможны случаи, когда полезно напечатать трассировку стека вызовов функции, возможно, чтобы ответить на вопрос: «Как вы достигли этой части кода?»

Вы можете сделать это с помощью console.trace():

const function2 = () => console.trace() const function1 = () => function2() function1()
не найдено

Вычислите потраченное время

Вы можете легко вычислить, сколько времени нужно для выполнения функции, используя time() и timeEnd().

const doSomething = () => console.log('test')const measureDoingSomething = () => {  console.time('doSomething()')  //do something, and measure the time it takes  doSomething()  console.timeEnd('doSomething()')}measureDoingSomething()
не найдено

Создайте профиль ЦБ

DevTools позволяют анализировать производительность профиля ЦБ любой функции.

Вы можете запустить это вручную. Но самый точный способ сделать это – завернуть то, что вы хотите контролировать между файлами. profile() и profileEnd() команды.

Они похожи на time() и timeEnd()за исключением того, что они не просто измеряют время, но и создают более подробный отчет:

const doSomething = () => console.log('test')const measureDoingSomething = () => {  console.profile("doSomething()")  //do something, and measure its performance  doSomething()  console.profileEnd()}measureDoingSomething()
не найдено

Интересно изучать JavaScript? Получите мою электронную книгу на jshandbook.com

Добавить комментарий

Ваш адрес email не будет опубликован.