Як отримати максимальну віддачу від консолі JavaScript

Одним з найпростіших інструментів налагодження в JavaScript є console.log(). consoleПоставляється з декількома іншими корисними методами , які можуть додати до налагодження інструментарію розробника.

Ви можете використовувати consoleдля виконання деяких з таких завдань:

  • Виведіть таймер, щоб допомогти з простим порівняльним аналізом
  • Виведіть таблицю для відображення масиву або об’єкта у зручному для читання форматі
  • Застосуйте кольори та інші варіанти стилів до виводу за допомогою CSS

Об’єкт консолі

consoleОб'єкт дає вам доступ до консолі браузера. Це дозволяє виводити рядки, масиви та об'єкти, які допомагають налагоджувати ваш код. Це consoleчастина windowоб'єкта і надається за допомогою браузерної об'єктної моделі (BOM).

Ми можемо отримати доступ до нього consoleодним із двох способів:

  1. window.console.log('This works')
  2. console.log('So does this')

Другий варіант - це в основному посилання на перший, тому ми будемо використовувати другий для збереження натискань клавіш.

Одне коротке зауваження щодо специфікації: вона не має встановленого стандарту, тому кожен браузер реалізує її дещо по-різному. Я протестував усі свої приклади як у Chrome, так і у Firefox, але ваші результати можуть виглядати по-різному, залежно від вашого браузера.

Виведення тексту

Найпоширенішим елементом consoleоб'єкта є console.log. Для більшості сценаріїв ви будете використовувати його для виконання роботи.

Існує чотири різні способи виведення повідомлення на консоль:

  1. log
  2. info
  3. warn
  4. error

Всі чотири працюють однаково. Все, що вам потрібно, - це передати один або кілька аргументів вибраному методу. Потім відображається інша піктограма, яка вказує рівень її реєстрації. У наведених нижче прикладах ви можете побачити різницю між журналом інформаційного рівня та журналом попередження / рівня помилок.

Можливо, ви помітили повідомлення журналу помилок - воно більш ефектне, ніж інші. Він відображає як червоний фон, так і трасування стека, де infoі warn ні. Хоча warnв Chrome є жовтий фон.

Ці візуальні відмінності допомагають, коли вам потрібно швидко виявити помилки чи попередження на консолі. Ви хотіли б переконатися, що їх видалено для готових до виробництва додатків, якщо вони не там, щоб попередити інших розробників, що вони роблять щось не так із вашим кодом.

Рідні заміни

Цей метод використовує заповнювач у рядку, який замінюється іншими аргументами, які ви передаєте методу. Наприклад:

Вхідні дані :console.log('string %s', 'substitutions')

Вихід :string substitutions

Це %sзаповнювач для другого аргументу, 'substitutions'який йде після коми. Будь-які рядки, цілі числа або масиви будуть перетворені в рядок і замінять %s. Якщо ви передасте об'єкт, він відобразиться [object Object].

Якщо ви хочете передати об'єкт, вам потрібно використовувати %oабо %Oзамість %s.

console.log('this is an object %o', { obj: { obj2: 'hello' }})

Числа

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

  • %iабо %dдля цілих чисел,
  • %f для плаваючих крапок.

Вхідні дані :console.log('int: %d, floating-point: %f', 1, 1.5)

Вихід :int: 1, floating-point: 1.500000

Поплавці можна відформатувати для відображення лише однієї цифри після коми після використання %.1f. Ви можете зробити %.nfдля відображення n кількості цифр після десяткової коми.

Якби ми відформатували наведений вище приклад для відображення однієї цифри після десяткової коми для числа з плаваючою комою, це виглядало б так:

Вхідні дані :console.log('int: %d, floating-point: %.1f', 1, 1.5)

Вихід :int: 1, floating-point: 1.5

Специфікатори форматування

  1. %s| замінює елемент на рядок
  2. %(d|i)| замінює елемент цілим числом
  3. %f | замінює елемент на поплавок
  4. %(o|O)| елемент відображається як об'єкт.
  5. %c| Застосовує наданий CSS

Рядкові шаблони

З появою ES6 літеральні шаблони є альтернативою замінам або конкатенації. Вони використовують зворотні позначки (``) замість лапок, а змінні входять всередину ${}:

const a = 'substitutions';
console.log(`bear: ${a}`);
// bear: substitutions

Об'єкти відображаються як [object Object]у літералах шаблонів, тому вам потрібно буде використовувати заміну %oабо, %Oщоб побачити деталі, або записати це окремо самостійно.

Using substitutions or templates creates code that’s easier to read compared to using string concatenation: console.log('hello' + str + '!');.

Pretty color interlude!

Now it is time for something a bit more fun and colorful!

It is time to make our console pop with different colors with string substitutions.

I will be using a mocked Ajax example that give us both a success (in green) and failure (in red) to display. Here’s the output and code:

const success = [ 'background: green', 'color: white', 'display: block', 'text-align: center'].join(';');
const failure = [ 'background: red', 'color: white', 'display: block', 'text-align: center'].join(';');
console.info('%c /dancing/bears was Successful!', success);console.log({data: { name: 'Bob', age: 'unknown'}}); // "mocked" data response
console.error('%c /dancing/bats failed!', failure);console.log('/dancing/bats Does not exist');

You apply CSS rules in the string substitution with the %c placeholder.

console.error('%c /dancing/bats failed!', failure);

Then place your CSS elements as a string argument and you can have CSS-styled logs. You can add more than one %c into the string as well.

console.log('%cred %cblue %cwhite','color:red;','color:blue;', 'color: white;')

This will output the words ‘red’, ‘blue’ and ‘white’ in their respected colors.

There are quite a few CSS properties supported by the console. I would recommend experimenting to see what works and what doesn’t. Again, your results may vary depending on your browser.

Other available methods

Here are a few other available console methods. Note that some items below have not had their APIs standardized, so there may be incompatibilities between the browsers. The examples were created with Firefox 51.0.1.

Assert()

Assert takes two arguments — if the first argument evaluates to a falsy value, then it displays the second argument.

let isTrue = false;
console.assert(isTrue, 'This will display');
isTrue = true;
console.assert(isTrue, 'This will not');

If the assertion is false, it outputs to the console. It’s displayed as an error-level log as mentioned above, giving you both a red error message and a stack trace.

Dir()

The dir method displays an interactive list of the object passed to it.

console.dir(document.body);

Ultimately, dir only saves one or two clicks. If you need to inspect an object from an API response, then displaying it in this structured way can save you some time.

Table()

The table method displays an array or object as a table.

console.table(['Javascript', 'PHP', 'Perl', 'C++']);

The array’s indices or object property names come under the left-hand index column. Then the values are displayed in the right-hand column.

const superhero = { firstname: 'Peter', lastname: 'Parker',}console.table(superhero);

Note for Chrome users: This was brought to my attention by a co-worker but the above examples of the table method don’t seem to work in Chrome. You can work around this issue by placing any items into an array of arrays or an array of objects:

console.table([['Javascript', 'PHP', 'Perl', 'C++']]);
const superhero = { firstname: 'Peter', lastname: 'Parker',}console.table([superhero]); 

Group()

console.group() is made up of at least a minimum of three console calls, and is probably the method that requires the most typing to use. But it’s also one of the most useful (especially for developers using Redux Logger).

A somewhat basic call looks like this:

console.group();console.log('I will output');console.group();console.log('more indents')console.groupEnd();console.log('ohh look a bear');console.groupEnd();

This will output multiple levels and will display differently depending on your browser.

Firefox shows an indented list:

Chrome shows them in the style of an object:

Each call to console.group() will start a new group, or create a new level if it’s called inside a group. Each time you call console.groupEnd() it will end the current group or level and move back up one level.

I find the Chrome output style is easier to read since it looks more like a collapsible object.

You can pass group a header argument that will be displayed over console.group:

console.group('Header');

You can display the group as collapsed from the outset if you call console.groupCollapsed(). Based on my experience, this seems to work only in Chrome.

Time()

The time method, like the group method above, comes in two parts.

A method to start the timer and a method to end it.

Once the timer has finished, it will output the total runtime in milliseconds.

To start the timer, you use console.time('id for timer') and to end the timer you use console.timeEnd('id for timer') . You can have up to 10,000 timers running simultaneously.

The output will look a bit like this timer: 0.57ms

It is very useful when you need to do a quick bit of benchmarking.

Conclusion

There we have it, a bit of a deeper look into the console object and some of the other methods that come with it. These methods are great tools to have available when you need to debug code.

There are a couple of methods that I have not talked about as their API is still changing. You can read more about them or the console in general on the MDN Web API page and its living spec page.