Пример за 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')

След като добавихме етикет, ще видите „Counter 1, Counter 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)

В този пример първо ще получим нашите 2 секунди timeLog, след това нашите 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()в горната част на кода си и ще имате нова конзола всеки път, когато опреснявате. ?

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

Благодаря за четенето!

Ако искате да прегледате концепциите в тази статия чрез видео, можете да разгледате тази видео версия, която направих тук.

Jesse Hall (codeSTACKr)

Аз съм Джеси от Тексас. Вижте другото ми съдържание и ми кажете как мога да ви помогна по време на вашето пътуване до уеб разработчик.

  • Абонирайте се за моя YouTube
  • Кажи здравей! Instagram | Twitter
  • Регистрирайте се за моя бюлетин