Приклад JavaScript Console.log () - Як надрукувати на консолі в JS

Запис повідомлень на консоль є дуже простим способом діагностики та усунення незначних проблем у коді.

Але, чи знали ви, що тут є 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
• Підпишіться на мою розсилку