Как да извлечете максимума от JavaScript конзолата

Един от най-основните инструменти за отстраняване на грешки в JavaScript е console.log (). Конзолата се предлага с няколко други полезни метода, които могат да добавят към инструментариума за отстраняване на грешки на програмист.

Можете да използвате конзолата за изпълнение на някои от следните задачи:

  • Изведете таймер, за да помогнете с обикновеното сравняване
  • Изведете таблица за показване на масив или обект в лесен за четене формат
  • Прилагайте цвят и други опции за стилизиране към изхода с CSS

Обектът на конзолата

Обектът на конзолата ви дава достъп до конзолата на браузъра. Той ви позволява да извеждате низове, масиви и обекти, които помагат за отстраняване на грешки в кода. Конзолата е част от обекта на прозореца и се доставя от браузърен обект модел (BOM).

Можем да получим достъп до конзолата по един от два начина:

  1. window.console.log („Това работи“)
  2. console.log („Така прави“)

Втората опция е основно препратка към първата, така че ще използваме последната, за да запишем натискания на клавишите.

Една бърза забележка за BOM: тя няма зададен стандарт, така че всеки браузър го прилага по малко различни начини. Тествах всички мои примери както в Chrome, така и в Firefox, но вашите резултати могат да се показват различно в зависимост от браузъра ви.

Извежда текст

Записване на текст към конзолата

Най-често срещаният елемент на конзолния обект е console.log. За повечето сценарии ще го използвате, за да свършите работата.

Има четири различни начина за извеждане на съобщение към конзолата:

  1. дънер
  2. инфо
  3. предупреждавам
  4. грешка

И четирите работят по един и същи начин. Всичко, което правите, е да предадете един или повече аргументи на избрания метод. След това той показва различна икона, за да укаже нивото си на регистрация. В примерите по-долу можете да видите разликата между дневник на ниво информация и дневник на ниво предупреждение / грешка.

Лесен и лесен за четене изходС много неща това може да стане трудно за четене

Може да сте забелязали съобщението за регистрация на грешки - то е по-ефектно от останалите. Той показва както червен фон, така и следа в стека, където информация и предупреждение не правят. Въпреки че предупреждават, има жълт фон в Chrome.

Тези визуални разлики помагат, когато трябва бързо да идентифицирате грешки или предупреждения в конзолата. Бихте искали да се уверите, че те са премахнати за приложения, готови за производство, освен ако не са там, за да предупредят други разработчици, че правят нещо нередно с вашия код.

Струнни замествания

Тази техника използва заместител в низ, който се замества от другия аргумент (и), който предавате на метода. Например:

Вход: console.log ('string% s', 'substitutions')

Изход: заместване на низове

% S е заместител на втория аргумент „замествания“, който идва след запетаята. Всички низове, цели числа или масиви ще бъдат преобразувани в низ и ще заменят% s. Ако предавате обект, той ще покаже [object Object].

Ако искате да предадете обект, трябва да използвате% o или% O вместо% s.

console.log ('това е обект% o', {obj: {obj2: 'здравей'}})

численост

Подмяната на струните може да се използва с цели числа и стойности с плаваща запетая, като се използва:

  • % i или% d за цели числа,
  • % f за плаващи точки.

Вход: console.log ('int:% d, плаваща запетая:% f', 1, 1.5)

Изход: int: 1, плаваща запетая: 1.500000

Поплавките могат да бъдат форматирани така, че да показват само една цифра след десетичната запетая, като използвате% .1f. Можете да направите% .nf, за да покажете n количество цифри след десетичната запетая.

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

Вход: console.log ('int:% d, плаваща запетая:% .1f', 1, 1.5)

Изход: int: 1, плаваща запетая: 1.5

Спецификатори за форматиране

  1. % s | замества елемент с низ
  2. % (Г | и) | замества елемент с цяло число
  3. % f | замества елемент с поплавък
  4. % (o | O) | елемент се показва като обект.
  5. % c | Прилага предоставения CSS

Шаблони за струни

С появата на ES6 шаблоните буквали са алтернатива на заместванията или конкатенацията. Те използват заден план (``) вместо кавички, а променливите влизат в $ {}:

const a = 'замествания ";
console.log (`bear: $ {a}`);
// мечка: замествания

Обектите се показват като [обект на обект] в литералите на шаблоните, така че ще трябва да използвате заместване с% o или% O, за да видите подробностите, или да го регистрирате отделно от себе си.

Използването на замествания или шаблони създава код, който е по-лесен за четене в сравнение с използването на стриктно конкатенация: console.log ('здравей' + str + '!');

Доста цветова интермедия!

Сега е време за нещо малко по-забавно и цветно!

Време е да направим нашата конзола поп с различни цветове със заместване на струни.

Ще използвам присмехулен пример на Ajax, който ни дава както успех (в зелено), така и неуспех (в червено) за показване. Ето изхода и кода:

Успешни мечки и пропаднали прилепи
const успех = [
 'фон: зелен',
 'цвят: бял',
 'дисплей: блок',
 „подравняване на текст: център“
].присъедините(';');
const fail = [
 'фон: червен',
 'цвят: бял',
 'дисплей: блок',
 „подравняване на текст: център“
].присъедините(';');
console.info ('% c / танци / мечки беше успешен!', успех);
console.log ({данни: {
 име: „Боб“,
 възраст: „неизвестно“
}}); // "подиграван" отговор на данни
console.error ('% c / dance / bats failed!', neuspeh);
console.log ('/ танци / прилепи не съществува');

Прилагате CSS правила в заместване на низове с% c заместител.

console.error ('% c / dance / bats failed!', neuspeh);

След това поставете вашите CSS елементи като аргумент на низ и можете да имате CSS-стилове. Можете да добавите и повече от един% c в низ.

console.log ('% kredita% cblue% cwhite', 'цвят: червен;', 'цвят: син;', 'цвят: бял;')

Това ще изведе думите „червено“, „синьо“ и „бяло“ в техните уважавани цветове.

Има доста CSS свойства, поддържани от конзолата. Бих препоръчал да експериментирате, за да видите какво работи и какво не. Отново вашите резултати могат да варират в зависимост от вашия браузър.

Други налични методи

Ето няколко други налични конзолни методи. Обърнете внимание, че някои елементи по-долу не са стандартизирали своите API, така че може да има несъвместимост между браузърите. Примерите са създадени с Firefox 51.0.1.

Твърдят ()

Assert взема два аргумента - ако първият аргумент се оценява на фалшива стойност, тогава той показва втория аргумент.

нека еTrue = невярно;
console.assert (isTrue, 'Това ще се покаже');
isTrue = вярно;
console.assert (isTrue, 'Това няма');

Ако твърдението е невярно, то се извежда на конзолата. Той се показва като дневник на ниво грешка, както е споменато по-горе, като ви дава както червено съобщение за грешка, така и следа в стека.

Dir ()

Методът dir показва интерактивен списък на обекта, предаден на него.

console.dir (document.body);
Chrome показва dir по различен начин

В крайна сметка, dir спестява само едно или две кликвания. Ако трябва да инспектирате обект от отговор на API, то показването му по този структуриран начин може да ви спести известно време.

Таблица ()

Методът на таблицата показва масив или обект като таблица.

console.table (['Javascript', 'PHP', 'Perl', 'C ++']);
Изход за масив

Индексите или имената на свойствата на масива се намират под колоната с индекс вляво. Тогава стойностите се показват в дясната колона.

const superhero = {
    име: „Петър“,
    фамилия: „Паркър“,
}
console.table (супергерой);
Изход за обект

Забележка за потребителите на Chrome: Това беше обърнато на вниманието ми от колега, но горните примери за метода на таблицата изглежда не работят в Chrome. Можете да заобиколите този проблем, като поставите елементи в масив от масиви или масив от обекти:

console.table ([['Javascript', 'PHP', 'Perl', 'C ++']]);
const superhero = {
    име: „Петър“,
    фамилия: „Паркър“,
}
console.table ([супергерой]);

Група ()

console.group () се състои от поне минимум три обаждания на конзолата и вероятно е методът, който изисква най-много пишене за използване. Но той е и един от най-полезните (особено за разработчиците, които използват Redux Logger).

Донякъде основното обаждане изглежда така:

console.group ();
console.log ('Ще издам');
console.group ();
console.log („повече отстъпи“)
console.groupEnd ();
console.log ('о, виж мечка');
console.groupEnd ();

Това ще изведе няколко нива и ще се покаже различно в зависимост от вашия браузър.

Firefox показва разрязан списък:

Chrome ги показва в стила на обект:

Всяко повикване към console.group () ще стартира нова група или ще създаде ново ниво, ако се нарича вътре в група. Всеки път, когато се обадите на console.groupEnd (), той прекратява текущата група или ниво и се придвижва обратно едно ниво.

Намирам, че изходният стил на Chrome е по-лесен за четене, тъй като прилича повече на сгъваем обект.

Можете да предадете на група аргумент заглавие, който ще се показва над console.group:

console.group ( "Header");

Можете да покажете групата като свита от самото начало, ако се обадите на console.groupCollapsed (). Въз основа на моя опит това изглежда работи само в Chrome.

Time ()

Методът на времето, подобно на груповия метод по-горе, се предлага в две части.

Метод за стартиране на таймера и метод за неговото приключване.

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

За да стартирате таймера, използвате console.time ('id за таймер') и за да прекратите таймера, който използвате console.timeEnd ('id за таймер'). Можете да имате до 10 000 таймера, работещи едновременно.

Изходът ще изглежда малко като този таймер: 0.57ms

Много е полезно, когато трябва да направите бърз анализ на бенчмаркинга.

заключение

Имаме го, малко по-задълбочен поглед към конзолния обект и някои от другите методи, които идват с него. Тези методи са чудесни инструменти, за да имате на разположение, когато трябва да отстраните грешката в кода.

Има няколко метода, за които не съм говорил, тъй като техният API все още се променя. Можете да прочетете повече за тях или като цяло за конзолата на страницата на Web API на MDN и нейната страница със специални данни.

https://developer.mozilla.org/en/docs/Web/API/console