Как правильно использовать консоль JavaScript!

JavaScript Консоль хорошо известна всем веб -разработчикам. Но, как только немногие знают, он скрывает много неизвестных функций. Эта статья приносит свет во тьму!

По умолчанию console.log () Функция используется. Эта функция позволяет нам выводить строки и целые числа, а также массивы и объекты. Консольный объект может предложить гораздо больше.

Не все функции доступны в каждом браузере. Здесь Вы можете найти список совместимости браузера.

Время остановки – консоль.time ()
Выходные предупреждения – console.warn ()
Clear Console – console.clear ()
Выходы группировки – console.group ()
Отметьте сообщения об ошибках – console.error ()
Выходные атрибуты – console.log () и console.info ()

Время остановки – консоль.time ()

Эта функция идеально подходит для сравнения двух или более алгоритмов. Это может измерить время исполнения. И вот как это выглядит с практическим примером:

console.time('example');
for (let i = 0; i < 1000000; i++) {
    document.getElementById('app').innerHTML = i;
}
console.timeEnd('example');

Здесь Console.Time (‘Пример’) Функция получает идентификатор, чтобы остановить таймер. В этом примере цикл проходит через 1.000.000x и записывает номер в HTML при каждом пробеге. После петли мы останавливаем время через console.timeend (‘Пример’) . Наша вывода в консоли будет выглядеть так:

Выходные предупреждения – console.warn ()

Особенно, когда мы пишем наши собственные библиотеки для JavaScript, очень важно информировать пользователя, когда возникают ошибки или предупреждения.

Однако, когда я написал эту статью, я узнал что эта функция не является стандартной и не подходит для публичных сайтов! По этой причине я не вхожу в точную функцию здесь, но обратитесь к Документация Mozilla , который содержит объяснение.

Clear Console – console.clear ()

Небольшая, но, тем не менее, очень полезная функция – это опустошить консоль. И это именно то, что console.clear () делает. Функция не ожидает каких -либо параметров:

console.clear();

Все предыдущие записи будут удалены из консоли, и это сообщение будет отображаться:

Выходы группировки – console.group ()

Эта функция полезна, если вы хотите структурировать разные значения. Например, вы можете сравнить его с папками с файлами. В действительности эта функция хорошо подходит для вывода файлов и путей файлов. В следующем примере функция Groupend () используется, чтобы подняться на один уровень. Функция GroupCollApsed () , как Group () , создает другой слой, с разницей, которая GroupCollApsed () разрушает содержимое.

Необязательно Group () и GroupCollApsed () Может быть предоставлен параметр с заголовком группы.

console.log('Level 0');

console.group('Group for Level 1');
console.log('Level 1');
console.log('Also Level 1');

console.group('Group for Level 2');
console.log('Level 2');
console.log('Yeah');
console.log('Oh, still you? :o');
console.groupEnd();

console.log('Back to Level 1');

console.groupCollapsed('Collapsed Level 2');
console.log('collapsed content');
console.groupEnd();

console.log('See you soon!');

И это то, на что выглядит проблема. Группа “обрушившийся уровень 2” может быть открыта одним щелчком:

Отметьте сообщения об ошибках – console.error ()

error () Функция работает аналогично log () , Warn () или info () функция Он может вывести любой атрибут, будь то строка, целое число, объект или массив. Особая вещь о error () Функция заключается в том, что он подчеркивается цветным фоном и x значок. Особенно для сообщений об ошибках с вашими собственными библиотеками, но также и с вашими собственными функциями, следует использовать эту функцию.

console.error('This is an fatal error!');

Приводит к следующему выходу:

Различные параметры вывода функции (нотация параметров) более подробно описаны в следующем элементе.

Выходные атрибуты – console.log () и console.info ()

Последнее, но не менее важное место самые популярные консольные функции. Эти функции отображают атрибуты в консоли. Следующие примеры также относятся к Warn () и error () Функции: Есть два разных синтаксиса для вызова этих функций:

console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);

С одной стороны, вы можете передавать разные объекты, которые просто выводятся один за другой:

const obj1 = {
    name: 'Peter Parker',
    username: 'i_am_a_spider'
};
const obj2 = {
    name: 'Tony Stark',
    username: 'jarvis'
};
const obj3 = Math.PI;
console.log(obj1, obj2, obj3);

Этот код создает этот вывод:

Во втором варианте вы можете использовать строки замещения (значения замены). %o и %O Станьте объектом, %d и %i целое число, %s Строка и %f Поплавок. На практике это выглядит так:

const obj1 = {
    name: 'Peter Parker',
    username: 'i_am_a_spider'
};
console.log('This is object is between to sentences. Here: %O. And I think that is really cool!', obj1);

console.log('This is a very, very big integer: %d', 42);

console.log('This is %s. And I am %s!', 'Me', 'a web developer');

console.log('This is a nice float: %f', Math.PI);

Расходы будут выглядеть так. В первом примере объект может быть расширен, и все атрибуты могут быть просмотрены.

Знаете ли вы эти функции или знаете других полезных? Затем напишите их в комментариях!:)

Источник: https://developer.mozilla.org/de/docs/web/api/console

Спасибо за прочтение этого поста! Если вам понравился вклад, я был бы счастлив, если вы посмотрите на дальнейшие вклады на мой блог и следуй за мной в Twitter !:)

Оригинал: “https://dev.to/webdeasy/how-to-use-the-javascript-console-correctly-1110”

Оглавление