Мы настолько привыкаем к написанию определенных команд в нашем коде, что перестаем о них думать. Одной из таких команд для меня является команда console.log() в JavaScript. Я всегда использовал эту команду вместе с ее близкими братьями и сестрами: console.debug() , console.info() , console.warn() и console.error() ; не задумываясь, что еще может предложить интерфейс console.
TL; DR
Просто прочитайте документацию интерфейса console, доступную здесь, и просмотрите список функций, доступных в интерфейсе.
Ведение журнала
Конечно, основное и более популярное использование интерфейса console — это ведение журнала. Для непосвященных существуют различные уровни журналов, которые можно использовать для отладки приложения JavaScript. Вот пример кода:
console.debug("Hello, Debug!");
console.log("Hello, World!");
console.info("Hello, Info!");
console.warn("Hello, Warning!");
console.error("Hello, Error!");
В NodeJS все, кроме warn и error, выводилось в STDOUT, а предупреждения и ошибки выводились в STDERR. Но у вас есть более точные элементы управления, если вы запускаете код JavaScript в веб-браузере.
Если вы импортируете этот скрипт (названный demo.js в этом конкретном примере) в пустой файл HTML, вот что вы увидите в «Консоли» браузера:
Почти в каждом популярном браузере вы увидите возможность изменить уровень журналов, которые вы видите. Я использую Microsoft Edge для скриншотов в этой статье. Вы можете увидеть вариант в месте, выделенном на изображении ниже.
Вы можете выбрать уровень ведения журнала, который вы хотите видеть, из этого раскрывающегося списка. Вот сопоставление уровня ведения журнала с используемой функцией console:
Подробно:
debug
Информация:info,log
Предупреждения:warn
Ошибки:errorи неудачныеassertс
Пожалуйста, смотрите следующие изображения для справки:
Утверждение
У них также есть специальная функция assert, чтобы избавить вас от записи блока if, когда вы просто хотите убедиться, что некоторые условия выполнены, и распечатать журнал ошибок, если они не выполняются.
console.assert(1==2, "Obvious Failed Assertion"); console.assert(1==1, "Obvious Passing Assertion");
Приведенный выше код создает следующий журнал в консоли:
Трассировки стека
Одной из самых полезных частей информации при отладке большого приложения является трассировка стека. Это помогает понять поток информации в приложении. Интерфейс console имеет функцию trace, которая печатает именно это! Обратите внимание, что функции warn и error в любом случае показывают свою трассировку в консоли браузера, но не в NodeJS.
function getObj() {
return {key: "value"};
}
const printObj = (obj) => {
console.trace("Printing this object: ", obj);
}
const main = () => {
var obj = getObj();
printObj(obj);
}
main();
Это производит следующий вывод в консоли браузера:
И этот вывод в консоли командной строки, если вы используете это в NodeJS:
Журналы группы
Во многих случаях это может помочь вам лучше просматривать ваши журналы, если они логически сгруппированы. Вы получаете этот результат, используя функции group() groupCollapsed()и groupEnd(). Вот пример, который демонстрирует, как вы можете сделать это через вызовы функций:
function getObj() {
console.log("[getObj] this goes inside the group");
var obj = {key: "value"};
console.groupCollapsed("getObj");
console.table(obj);
console.groupEnd();
return obj;
}
const printObj = (obj) => {
console.log("[printObj] this is also in the group itself");
console.warn("Printing this object: ", obj);
}
const main = () => {
console.group("obj");
console.log("[main] inside the obj group");
var obj = getObj();
printObj(obj);
console.groupEnd();
}
main();
А вот вывод вышеизложенного в командной строке (обратите внимание, что group и groupCollapsed работают точно так же в командной строке):
Вот вывод вышеуказанного в консоли браузера, как он выглядит по умолчанию:
Вы можете развернуть свернутые журналы в группе, которая изначально была свернута (группа getObj, экземпляр которой создается с использованием метода groupCollapsed()).
Кроме того, вы также можете свернуть расширенные группы и очистить журналы, которые вы не хотите видеть.
Читать объекты лучше
Это одна из особенностей console, о которой я не знал, и я понимаю, что это было бы супер полезно! Вот несколько функций, специально созданных для облегчения чтения объектов JavaScript:
console.dir()
Эта функция, на мой взгляд, бесполезна для браузеров, которые я использую (Google Chrome и Microsoft Edge), но я читал, что она полезна для Mozilla Firefox, потому что функция console.log() не создает древовидную структуру, когда объекты печатаются на ее консоль. Вот пример кода:
obj = {
first_name: "Leonel",
last_name: "Messi",
club: "PSG",
jersey_number: 30,
}
console.log(obj);
console.dir(obj);
console.log("Some string: ", obj);
console.dir("Some string: ", obj);
Наряду с выводом, который он производит в Microsoft Edge:
console.table()
Это может быть очень полезно, если вы работаете с объектом с большим количеством ключей. Вот как выглядит вывод для следующего кода:
obj = {
first_name: "Leonel",
last_name: "Messi",
clubs: "PSG",
jersey_number: 30,
}
console.log(obj);
console.dir(obj);
console.table(obj);
console.log("Some string: ", obj);
console.dir("Some string: ", obj);
console.table("Some string: ", obj);
Обратите внимание, что функция console.table() также печатает объект формата дерева вместе с таблицей. А при передаче с другим параметром ведет себя точно так же, как console.log() .
Но я думаю, что console.table() становится немного менее полезным для немелких объектов. Вот как он отображает объект, содержащий массивы и объекты:
Анализ кода и бенчмаркинг
console.count()
Чтобы понять поток кода, особенно для итерационных и рекурсивных функций, может быть полезно подсчитать, сколько раз код входит в конкретный блок. В таких случаях console предоставляет встроенную функцию ведения журнала, которая также подсчитывает количество вызовов.
Он имеет различные функции (метки и сброс), которые упрощают подсчет различных видов событий в коде. . Вот пример его использования в рекурсивной факториальной функции:
function getFactorial(num) {
if ((num % 1 != 0) || (num < 0)) {
console.count("invalid input");
console.error(num + " is not a valid input for `factorial` function");
return;
}
console.count("factorial recursions");
if (num == 0) {
return 1;
}
return num * getFactorial(num-1);
}
function factorial(num) {
getFactorial(num);
console.count();
console.countReset("factorial recursions");
}
factorial(2);
factorial(2.5);
factorial(-3);
factorial(4);
Это дает следующий результат:
консоль.время()
Необходимо измерять производительность каждой функции и модуля в вашем коде, когда вы пытаетесь оптимизировать производительность своего программного обеспечения. Это актуально как для внутреннего программного обеспечения, написанного на NodeJS, так и для кода пользовательского интерфейса, написанного на клиентском JavaScript (через любой из различных популярных фреймворков: ReactJS, VueJS, AngularJS и т. д.). Интерфейс console предоставляет различные методы, а именно time() timeEnd() и timeLog(), которые помогут вам измерить количество времени между любыми двумя контрольными точками в вашем коде.
Ниже приведен пример кода, который измеряет время обработки для одного журнала времени и время, затрачиваемое на действие пользователя в другом.
function getFactorial(num) {
if ((num % 1 != 0) || (num < 0)) {
console.error(num + " is not a valid input for `factorial` function");
return;
}
if (num == 0) {
return 1;
}
return num * getFactorial(num-1);
}
function factorial(num) {
console.time("factorial of " + num );
var factorialVal = getFactorial(num);
console.timeLog("factorial of " + num);
alert("Factorial of " + num + " = " + factorialVal);
console.timeEnd("factorial of " + num);
}
factorial(2);
factorial(2.5);
factorial(-3);
factorial(4000);
Это дает следующий результат:
Я надеюсь, что чтение этой статьи поможет вам лучше использовать эту нативную библиотеку в JavaScript. Чтобы в будущем вы писали меньше кода, более читаемого и легко отлаживаемого JavaScript.
