Thread by @jsunderhood

🐞Debugging🐞

Начну с консоли:

Есть мнение, дебажить с помощью консоли/console.log - "не круто", т.к. есть дебаггер.
На самом деле, это очень полезный инструмент, решающий многие задачи не хуже дебаггера.

Хорошее понимание консоли в сочетании с дебаггером - ключ к успеху

Вот примеры ситуаций где консоль очень полезна:
🦋 Простая ошибка - все понятно, надо быстро подтвердить
🦋 Ошибка в функции которая вызывается много раз, а ломается только один
🦋 Race conditions
🦋 Много рекурсий
🦋 Нужно одновременно следить за большим количеством частей кода

Посмотрим что умеет консоль. На странице в браузере нажимаем F12.

Про Console.log много писать не буду

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

console.log({a});

При дебаге массивов с большим количеством объектов:

сonsole.log(list) показывает массив в свернутом виде.

console.log(…list) отобразит все элементы, но при большом количестве будет очень тормозить.

Чаще всего лучший вариант - console.table()

Еще console.log не умеет показывать, какие свойства есть у функции. зато есть console.dir

function Camille(){ // code }
Camille.name = ‘Saint-Saëns’;
console.log(Camille); // ƒ Camille(){ // code }
console.dir(Camille); //

В некоторых проектах консоль - как мусорка

В консоли гибкая система фильтров:

⛔️ Hide Network - прячет сетевые ошибки
⛔️ Selected context only - прячет ошибки из расширений и других фреймов
⛔️ Нажав правой кнопкой на лог можно спрятать все логи файла (Hide message from...)

Чтобы отследить откуда именно была вызвана функция с определенными параметрами, можно использовать console.trace().

Из-за размеров стека современных приложений полезно совместить с console.groupCollapsed()

console.groupCollapsed();
console.trace('lol');
console.groupEnd();

В случае когда функция запускается много-много раз, а ломается только один, можно использовать:

console.assert(a, b);

Фактически это более короткий аналог
if(a){
console.error(b)
}

console.log поддерживает оформление вывода с помощью CSS:

console.log(‘%c Hi’, ‘color: red’); // Выведет Hi красным цветом

voidcanvas.com/make-console-l…

Интересно, как они ограничили доступные стили, интересные темы вроде position: fixed не работают.


Про консоль хватит, хотя там есть еще очень много крутого.

Домашнее задание: console.log(console) и посмотреть что еще там есть :)

Или developers.google.com/web/tools/chro…

Присылайте так же свои способы дебага (но только то, что можно вывести написав в коде, всякие $0 и $$ будут отдельно)