Пример JavaScript Console.log (). Как печатать на консоль в JS

Автор оригинала: FreeCodeCamp Community Member.

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

Но, знаете ли вы, что есть больше для Консоль чем просто Журнал ? В этой статье я покажу вам, как печатать на консоль в JS, а также все вещи, которые вы не знали Консоль может сделать.

Carefox Multi-Line Editer Console

Если вы никогда не использовали многострочный редактор в Firefox, вы должны попробовать прямо сейчас!

Просто откройте консоль, Ctrl + Shift + K или F12 И в правом верхнем углу вы увидите кнопку «Переключиться на многострочный редактор». Кроме того, вы можете нажать Ctrl + B Отказ

Это дает вам многострочный редактор кода прямо внутри Firefox.

console.log

Начнем с очень базового примера журнала.

let x = 1
console.log(x)

Введите это в консоль Firefox и запустите код. Вы можете нажать кнопку «Запустить» или нажмите Ctrl + Enter Отказ

В этом примере мы должны увидеть «1» в консоли. Довольно простой, верно?

Несколько значений

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

let x = 1
console.log("x:", x)

Но что, если у нас есть несколько ценностей, которые мы хотим войти?

let x = 1
let y = 2
let z = 3

Вместо печатать console.log () Трижды мы можем включить их все. И мы можем добавить строку перед каждым из них, если мы тоже хотели.

let x = 1
let y = 2
let z = 3
console.log("x:", x, "y:", y, "z:", z)

Но это слишком много работы. Просто оберните их с фигурными брекетами! Теперь вы получаете объект с именованными значениями.

let x = 1
let y = 2
let z = 3
console.log( {x, y, z} )

Вы можете сделать то же самое с объектом.

let user = {
  name: 'Jesse',
  contact: {
    email: 'codestackr@gmail.com'
  }
}
console.log(user)
console.log({user})

Первый журнал будет распечатать свойства в пользовательском объекте. Второе будет идентифицировать объект как «пользователь» и распечатать свойства внутри него.

Если вы регистрируете много вещей в консоль, это может помочь вам определить каждый журнал.

Переменные в журнале

Знаете ли вы, что вы можете использовать порции вашего журнала в качестве переменных?

console.log("%s is %d years old.", "John", 29)

В этом примере % s Относится к параметру строки, включенной после начального значения. Это будет относиться к «Джону».

% d Относится к варианту цифры, включенного после начального значения. Это будет относиться к 29.

Выход этого утверждения будет: «Джон 29 лет».

Вариации журналов

Есть несколько вариаций журналов. Есть самые широко используемые console.log () Отказ Но есть также:

console.log('Console Log')
console.info('Console Info')
console.debug('Console Debug')
console.warn('Console Warn')
console.error('Console Error')

Эти вариации добавляют стиль к нашим журналам в консоли. Например, предупреждать будет окрашен желтый, а Ошибка . будет окрашен красным.

Примечание. Стили варьируются от браузера до браузера.

Дополнительные журналы

Мы можем печатать сообщения на консоль условно с Console.assert () Отказ

let isItWorking = false
console.assert(isItWorking, "this is the reason why")

Если первый аргумент ложно, то сообщение будет зарегистрировано.

Если бы мы меня изменились IsitWorking к правда Затем сообщение не будет зарегистрировано.

Подсчет

Вы знали, что вы можете рассчитывать с консолью?

for(i=0; i<10; i++){
  console.count()
}

Каждая итерация этой петли будет распечатать количество для консоли. Вы увидите «По умолчанию: 1, по умолчанию: 2», и так далее, пока он не достигнет 10.

Если вы снова запустите эту же петлю, вы увидите, что счет поднимается, где он остановился; 11 – 20.

Для сброса счетчика мы можем использовать Console.Countreset () Отказ

И, если вы хотите назвать счетчик чего-то, кроме «по умолчанию», вы можете!

for(i=0; i<10; i++){
  console.count('Counter 1')
}
console.countReset('Counter 1')

Теперь, когда мы добавили метку, вы увидите «счетчик 1, счетчик 2», и так далее.

И сбросить этот счетчик, мы должны передать имя в Соревнование Отказ Таким образом, у вас может быть несколько счетчиков одновременно и только сбрасывают конкретные.

Время отслеживания

Помимо подсчета, вы также можете провести время что-то вроде секундомера.

Чтобы начать таймер, мы можем использовать Консоль. Время () Отказ Это не сделает ничего сама. Итак, в этом примере мы будем использовать Setimeout () Для подражания кода работает. Затем в тайм-ауте мы остановим наш таймер, используя Console.Timeend () Отказ

console.time()
setTimeout(() => {
  console.timeEnd()
}, 5000)

Как вы ожидаете, через 5 секунд у нас будет 10 секунд.

Мы также можем регистрировать текущее время нашего таймера, пока он работает, не останавливая его. Мы делаем это с помощью Console.timelog () Отказ

console.time()

setTimeout(() => {
  console.timeEnd()
}, 5000)

setTimeout(() => {
  console.timeLog()
}, 2000)

В этом примере мы получим наши 2 секунды TimeLog Во-первых, то наши 5 секунд Вопрос Отказ

Точно так же, как счетчик, мы можем метить таймерам и иметь несколько запуск одновременно.

Группы

Другое, что вы можете сделать с Журнал это группа их. ?

Мы начинаем группу, используя Console.group () Отказ И мы закончим группу с Console.grupend () Отказ

console.log('I am not in a group')

console.group()
console.log('I am in a group')
console.log('I am also in a group')
console.groupEnd()

console.log('I am not in a group')

Эта группа журналов будет складной. Это позволяет легко идентифицировать наборы журналов.

По умолчанию группа не рухнута. Вы можете установить его рухнуть, используя Console.groupCollapsed () вместо Console.group () Отказ

Этикетки также могут быть переданы в Группа () лучше идентифицировать их.

Трассировки стека

Вы также можете сделать трассировку стека с Консоль Отказ Просто добавьте его в функцию.

function one() {
  two()
}
function two() {
  three()
}
function three() {
  console.trace()
}
one()

В этом примере у нас очень простые функции, которые просто называют друг друга. Затем, в последней функции, мы называем console.traace () Отказ

Столы

Вот один из самых разума для размывания для консоли: Console.table () Отказ

Итак, давайте настроим некоторые данные для журнала:

let devices = [
  {
    name: 'iPhone',
    brand: 'Apple'
  },
  {
    name: 'Galaxy',
    brand: 'Samsung'
  }
]

Теперь мы будем войти в систему этих данных, используя Console.table (Устройства) Отказ

Но подожди – становится лучше!

Если мы только хотят только бренды, просто Console.table (устройства, ['бренд']) !

Как насчет более сложного примера? В этом примере мы будем использовать jsonplacholder.

async function getUsers() {
  let response = await fetch('https://jsonplaceholder.typicode.com/users')
  let data = await response.json()
 
  console.table(data, ['name', 'email'])
}

getUsers()

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

Стиль ?

Знаете ли вы, что вы можете использовать свойства CSS для стиля ваших журналов?

Для этого мы используем % c Указывать, что у нас есть стили, чтобы добавить. Стили проходят во второй аргумент Журнал Отказ

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

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

ясно

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

Просто добавьте Console.Clear () В верхнюю часть вашего кода, и у вас будет свежая консоль каждый раз, когда вы обновляете. ?

Просто не добавляйте его в нижнюю часть вашего кода, лол.

Спасибо за прочтение!

Если вы хотите пересмотреть концепции в этой статье через видео, вы можете проверить это Видео-версия, которую я сделал здесь Отказ

Я Джесси из Техаса. Проверьте мой другой контент и дайте мне знать, как я могу помочь вам в вашем путешествии, чтобы стать веб-разработчиком.