Запис повідомлень на консоль є дуже простим способом діагностики та усунення незначних проблем у коді.
Але, чи знали ви, що тут є console
не тільки log
? У цій статті я покажу вам, як надрукувати на консолі в JS, а також усі речі, про які ви не знали, що console
могли б зробити.
Багаторядкова консоль редактора Firefox
Якщо ви ніколи не використовували режим багаторядкового редактора у 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: '[email protected]' } } 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')
Ці варіації додають стилю до наших журналів у консолі. Наприклад, warn
воля буде забарвлена в жовтий колір, а error
воля буде пофарбована в червоний колір.
Примітка: Стилі відрізняються від браузера до браузера.
Необов’язкові журнали
Ми можемо друкувати повідомлення на консолі умовно за допомогою console.assert()
.
let isItWorking = false console.assert(isItWorking, "this is the reason why")
Якщо перший аргумент хибний, тоді повідомлення буде зареєстровано.
Якщо ми мали змінити isItWorking
на true
, тоді повідомлення не реєструватиметься.
Підрахунок
Чи знали ви, що можете рахувати за допомогою консолі?
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" тощо.
І для скидання цього лічильника нам потрібно передати ім’я countReset
. Таким чином, ви можете одночасно запускати кілька лічильників і скидати лише певні.
Час відстеження
Окрім підрахунку, ви також можете виміряти час на зразок секундоміра.
Для запуску таймера ми можемо використовувати console.time()
. Це нічого не зробить само по собі. Отже, у цьому прикладі ми будемо використовувати setTimeout()
для емуляції запущеного коду. Потім, в межах часу очікування, ми зупинимо використання нашого таймера console.timeEnd()
.
console.time() setTimeout(() => { console.timeEnd() }, 5000)
Як і слід було очікувати, через 5 секунд ми отримаємо журнал закінчення таймера 5 секунд.
Ми також можемо реєструвати поточний час нашого таймера під час його роботи, не зупиняючи його. Ми робимо це за допомогою console.timeLog()
.
console.time() setTimeout(() => { console.timeEnd() }, 5000) setTimeout(() => { console.timeLog() }, 2000)
У цьому прикладі ми отримаємо timeLog
перші 2 секунди , потім 5 секунд timeEnd
.
Подібно до лічильника, ми можемо мітити таймери та мати кілька запусків одночасно.
Групи
Інша справа, з якою ви можете зробити, log
це згрупувати їх. ?
Ми створюємо групу за допомогою console.group()
. І ми закінчуємо групу з console.groupEnd()
.
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()
.
Етикетки також можна передавати в, group()
щоб краще їх ідентифікувати.
Трасування стека
You can also do a stack trace with console
. Just add it into a function.
function one() { two() } function two() { three() } function three() { console.trace() } one()
In this example, we have very simple functions that just call each other. Then, in the last function, we call console.trace()
.

Tables
Here's one of the most mind-blowing uses for console: console.table()
.
So let's set up some data to log:
let devices = [ { name: 'iPhone', brand: 'Apple' }, { name: 'Galaxy', brand: 'Samsung' } ]
Now we'll log this data using console.table(devices)
.

But wait – it gets better!
If we only want the brands, just console.table(devices, ['brand'])
!

How about a more complex example? In this example, we'll use jsonplaceholder.
async function getUsers() { let response = await fetch('//jsonplaceholder.typicode.com/users') let data = await response.json() console.table(data, ['name', 'email']) } getUsers()
Here we are just printing the "name" and "email". If you console.log
all of the data, you will see that there are many more properties for each user.
Style ?
Did you know that you can use CSS properties to style your logs?
Для цього ми використовуємо, %c
щоб вказати, що у нас є стилі для додавання. Стилі передаються у другий аргумент log
.
console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")
Ви можете використовувати це, щоб ваші журнали виділялися.
Ясно
Якщо ви намагаєтеся вирішити проблему за допомогою журналів, можливо, ви багато оновлюєтесь, і ваша консоль може бути захаращена.
Просто додайте console.clear()
у верхню частину коду, і ви будете мати нову консоль кожного разу, коли ви оновлюєтесь. ?
Просто не додайте його в нижній частині коду, ха-ха.
Дякуємо за читання!
Якщо ви хочете переглянути концепції цієї статті через відео, ви можете переглянути цю відео-версію, яку я зробив тут.

Я Джессі з Техасу. Перевірте інший мій вміст і повідомте мені, як я можу допомогти вам у вашій подорожі до того, щоб стати веб-розробником.
- Підписатися на мій YouTube
- Привітайся! Instagram | Twitter
- Підпишіться на мою розсилку