Перед вами перевод статьи из блога Better Programming на сайте Medium.com. Автор, Indrek Lasn, рассказывает об инструментах для отладки кода, которые предоставляет JavaScript.
Обычная отладка JavaScript-кода заключается в выводе результатов с помощью метода console.log
. Однако, хоть этот способ и работает, его трудно назвать оптимальным. Почему бы тогда не сделать отладку более удобной?
Объект console
обеспечивает доступ к консоли отладки браузера. Его можно использовать только в том случае, если JavaScript-код запускается в браузере (т. е. это код клиентской части, а не серверной). Реализация console
может отличаться от браузера к браузеру, но, как правило, какой-то базовый функционал есть всегда. Лучшее в отладочных операторах — их способность работать со всеми библиотеками и фреймворками (за счет того, что они вшиты в ядро языка).
Самый простой пример использования console.log
— вывод кода. Для примера возьмем следующий код:
function sayHello(name) {
console.log(name)
}
sayHello('Indrek')
sayHello
.sayHello
? Ничего сложного. Используем для этого console.count()
.count()
выводит количество вызовов с заданным параметром label
. Если label
не указан, то отображается количество вызовов с параметром по умолчанию.function sayHello(name) {
console.count()
console.log(name)
}
sayHello("Indrek")
sayHello("William")
sayHello("Kelly")
name
в метод count
.function sayHello(name) {
console.count(name)
}
sayHello("Indrek")
sayHello("William")
sayHello("Kelly")
sayHello("Indrek")
console.warn
всегда может показать, что что-то идет не так: пропущен аргумент, устарела версия API и пр.function sayHello(name) {
if(!name) {
console.warn("No name given")
}
}
sayHello()
name
. Если этого не произошло, в консоли выводится предупреждение.console.table
. Благодаря ему для каждого элемента в таблице отводится отдельная строка. console.table
, то увидим следующее: const fruits = ["kiwi", "banana", "strawberry"]
console.table(fruits)
const fruits = [
"Apple",
"Watermelon",
"Orange",
"Pear",
"Cherry",
"Strawberry",
"Nectarine",
"Grape",
"Mango",
"Blueberry",
"Pomegranate",
"Carambola",
"Plum",
"Banana",
"Raspberry",
"Mandarin",
"Jackfruit",
"Papaya",
"Kiwi",
"Pineapple",
"Lime",
"Lemon",
"Apricot",
"Grapefruit",
"Melon",
"Coconut",
"Avocado",
"Peach"
];
console.table(fruits);
console.table
, мы увидим следующую таблицу: const pets = {
name: "Simon",
type: "cat"
};
console.table(pets);
name
(имя) и type
(тип) питомца.const pets = {
name: "Simon",
type: "cat"
};
const person = {
firstName: "Indrek",
lastName: "Lasn"
}
console.table(pets, person);
const pets = {
name: "Simon",
type: "cat"
};
const person = {
firstName: "Indrek",
lastName: "Lasn"
}
console.table([pets, person]);
console.group()
.console.log("This is the first level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the first level");
console.groupCollapsed()
работает похожим образом, однако новый блок по умолчанию свернут. Чтобы прочесть его, нужно нажать на кнопку развертывания.К сожалению, не доступен сервер mySQL