Поверьте, вы будете удивлены тем, на что способна командная строка браузера (консоль для разработчика), когда необходима отладка для JavaScript.
Начнем с простого:
1. console.group('имя') и console.groupEnd('имя')
Эта команда может объединить несколько логов в одну группу, которую можно будет расширять. Можно даже создавать вложенные группы. console.group('имя группы') начинает группу, а console.groupEnd('имя группы') заканчивает ее. Есть и третья функция, console.groupCollapsed, которая создает группу в сжатом режиме.
2. console.trace()
Если вам нужно найти весь список вызовов функции, вам очень поможет console.trace. Обычно я использую ее для того, чтобы узнать, где была передана обратная связь. Эта команда выдаст весь стек вызовов. Рассмотрим на примере:
function foo() {
function bar() {
console.trace();
}
bar();
}
foo();
3. console.count('Счетчик: ')
Я очень часто пользуюсь этой командой, когда ведется в JavaScript отладка; в основном для того, чтобы узнать, сколько раз обрабатывался компонент в React. Как вы можете понять, эта команда запишет общее количество раз, когда выполнялась команда. Не забывайте, что при изменении строки, для которой был установлен счетчик, для нее счет начнется заново. Есть полезная функция, позволяющая сбросить счетчик: console.countReset('Счетчик'). Названия счетчиков должны совпадать.
4. console.time() и console.timeEnd()
console.time() запускает таймер. Его работа закончится при вызове console.timeEnd(). Чаще всего эти консольные команды применяются, когда нужно проверить качество работы. Функциям time и timeEnd можно передать строку, тогда для нее будет запущен другой таймер с соответствующим именем.
5. console.assert()
Допустим, вам нужно проверить, бывает ли выражение или значение неверным. Если оно неверно, то вам нужно записать этот случай. Обычно такую ситуацию рассматривают через if-else. Консольная команда console.assert сделает всю работу за вас. Вам нужно сначала передать условие, а вторым параметром послужит сообщение или объект. Проверим на следующем примере:
function greaterThan(a,b) {
console.assert(a > b, {"message":"a is not greater than b","a":a,"b":b});
}
greaterThan(2,1);
6. console.profile([метка])
Сколько раз вам хотелось, чтобы профилирование кода можно было начинать по надобности? Сейчас оно запускается с самого начала, а затем вам приходится вручную находить место, которое нуждается в профилировании. Теперь на помощь придет console.profile(). Когда профилирование будет закончено, вызовите console.profileEnd(). Вот пример:
function thisNeedsToBeProfiled() {
console.profile("thisNeedsToBeProfiled()");
// later, after doing some stuff
console.profileEnd();
}
Данные будут записаны в панели profiles.
7. console.timeStamp([метка])
Эта команда добавляет в Timeline событие во время записи. Я использую ее для того, чтобы отмечать, когда возвращается вызов API и когда обрабатываются данные. Можно применять эту команду и во многих других случаях.
console.timeStamp('custom timestamp!');
8. console.clear()
Эта команда очищает командную строку, ничего особенного.
9. console.memory
Это не функция, а свойство, которое сохраняет HeapSize в том случае, если программа сложная, а графики трудночитаемы. Если вы просто сохраните некоторые данные в память, то это может облегчить ситуацию.
10. console.table(массив)
Это моя любимая, лучшая хитрость, с которой в JavaScript отладка упрощается. Команда выдает таблицу, с которой можно взаимодействовать. Функции нужно передать массив или объект.
