- PVSM.RU - https://www.pvsm.ru -
Перевели статью Амита Соланки [1] по отладке JavaScript-кода при помощи консольных команд. По словам автора, эти команды помогут значительно повысить производительность труда программиста при поиске багов и сэкономят кучу времени.
Давайте рассмотрим команды, которые действительно способны упростить жизнь любому программисту.
Напоминаем: для всех читателей «Хабра» — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».
Skillbox рекомендует: Онлайн-курс «Профессия Frontend-разработчик» [2].
Консольные команды console.group(‘name’) и console.groupEnd(‘name’) обеспечивают группировку нескольких разрозненных логов в единое раскрывающееся дерево, которое дает быстрый доступ к любому из логов. Более того, эти команды позволяют формировать вложенные деревья для последующей группировки.
Всего здесь три метода. Первый, console.group('name'), отмечает начало группировки, второй, console.groupEnd('name'), отмечает окончание, а console.groupCollapsed() формирует группу в режиме свернутого дерева.
Если программисту необходим полный стек вызова функции, то стоит воспользоваться командой console.trace(). Пример работы с ней:
function foo() {
function bar() {
console.trace();
}
bar();
}
foo();
И результат.
Команда console.count() позволяет показать количество раз, которое ее вызывали. Стоит помнить: если изменить строку лога, которая отдается команде, то отсчет пойдет по новой. При желании можно сбросить счетчик командой console.countReset().
Здесь все просто. Обе команды управляют таймером, позволяя запустить или остановить его. Обычно они используются для проверки производительности. Кроме того, при желании можно создать специфический таймер — в этом случае необходимо передать строку любой из команд.
Для работы с логическими выражениями незаменима функция console.assert(). Она позволяет проверить, приняло ли какое-либо выражение значение false. Результат записывается в лог. В принципе, можно использовать if, но консоль более удобна. Пример работы с командой:
function greaterThan(a,b) {
console.assert(a > b, {"message":"a is not greater than b","a":a,"b":b});
}
greaterThan(2,1);
Результат
Команда console.profile() позволяет без проблем запустить профилирование. Работа руками в этом случае не нужна, поскольку команда все делает сама.
function thisNeedsToBeProfiled() {
console.profile("thisNeedsToBeProfiled()");
// позже, после выполнения нужных действий
console.profileEnd();
}
Еще одна полезная функция, console.timeStamp(), добавляет метку времени для определенных событий. Ее можно использовать для фиксации момента возвращения вызова API или записи времени завершения процесса обработки данных. Собственно, кейсов здесь много.
console.timeStamp('custom timestamp!');
Здесь все просто. Если хотите очистить консоль, используйте console.clear().
Позволяет отображать размер буфера. Использовать его стоит, если не слишком понятна статистика производительности, а знакомиться с графиками времени нет.
Функция console.table() позволяет выводить небольшую таблицу, с которой разработчик может взаимодействовать. В качестве аргумента здесь используется массив, его необходимо передать для вызова.
Собственно, на этом сегодня все. Если у вас собственные лайфхаки отладки, делитесь ими в комментариях, — мы будем вам благодарны.
Skillbox рекомендует:
- Онлайн-курс «Python-разработчик с нуля» [3].
- Практический годовой курс «PHP-разработчик с 0 до PRO» [4].
- Образовательный онлайн-курс «Профессия Java-разработчик» [5].
Автор: skillbox
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/308796
Ссылки в тексте:
[1] статью Амита Соланки: https://itnext.io/10-console-tricks-to-debug-like-a-pro-66ee2225ec57
[2] «Профессия Frontend-разработчик»: https://skillbox.ru/webdev/?utm_source=skillbox.media&utm_medium=habr.com&utm_campaign=WEBDEV&utm_content=articles&utm_term=10methods/
[3] «Python-разработчик с нуля»: https://skillbox.ru/python/?utm_source=skillbox.media&utm_medium=habr.com&utm_campaign=PTNDEV&utm_content=articles&utm_term=10methods
[4] «PHP-разработчик с 0 до PRO»: https://skillbox.ru/php/?utm_source=skillbox.media&utm_medium=habr.com&utm_campaign=PHPDEV&utm_content=articles&utm_term=10methods
[5] «Профессия Java-разработчик»: https://skillbox.ru/java/?utm_source=skillbox.media&utm_medium=habr.com&utm_campaign=JAVDEV&utm_content=articles&utm_term=10methods
[6] Источник: https://habr.com/ru/post/440300/?utm_campaign=440300
Нажмите здесь для печати.