Выровняйте свои журналы браузера javascript с помощью советов console.log()
Фундаментальное правило разработки программного обеспечения заключается в том, что программное обеспечение может дать сбой. Что отличает новых разработчиков от опытных, так это то, как они планируют эти сбои. Надежное и эффективное ведение журнала является важной частью планирования сбоев и возможных мер по их устранению. Как и в случае с бэкэнд-разработкой, ведение журнала может быть полезным для разработки программного обеспечения для внешнего интерфейса, но оно идет гораздо дальше, чем просто устранение неполадок и отладка. Эффективное ведение журнала внешнего интерфейса также может сделать процесс разработки продуктивным, быстрым и увлекательным.
Хотя я большой сторонник и усердный практик разработки через тестирование, мне нравится гибкость, богатство информации и уверенность в коде, которые браузеры обеспечивают разработчикам интерфейсов, которые эффективно используют console.log(). Я решил поделиться некоторыми советами и приемами ведения журнала внешнего интерфейса, которые я изучил и включил в свой рабочий процесс с течением времени при создании Firecode.io - в надежде, что некоторые из них помогут вам сделать ваш рабочий процесс разработки немного более продуктивным и веселье!
Мне нравится делить эти советы на две широкие категории — быстрое и грязное ведение журнала, когда вы активно создаете и отлаживаете свое приложение, и надежное ведение журнала в рабочей среде — чтобы знать, когда ваше приложение работает должным образом, а когда нет.
Не используйте console.log().
Да это правильно. Я не использую console.log(). Что ж, ладно, я пишу обертки, которые используют console.log() (подробнее об этом в разделе производственного логирования), но если вы хотите что-то логировать в своем приложении, чтобы увидеть, что происходит, используйте вместо этого console.trace(). Помимо предоставления вам всего, что делает console.log(), он также выводит всю трассировку стека, чтобы вы знали, откуда именно отправляется сообщение.
Используйте вычисляемые имена свойств ES6 для идентификации ваших объектов и избегайте путаницы в именах переменных.
Это просто — используйте синтаксис вычисляемых свойств ES6 и заключайте объекты, которые вы хотите регистрировать, в фигурные скобки внутри console.log() — т. е. используйте console.log({user}) вместо console.log(user). Вы обнаружите, что они аккуратно зарегистрированы с именем переменной, установленным в качестве ключа, и значением в качестве самого объекта. Это особенно полезно, когда вы спешите и хотите зарегистрировать несколько объектов в одной команде console.log().
Используйте многоуровневые уровни ведения журнала — ошибка, предупреждение, информация
console.log(param) по умолчанию ведет журнал на уровне INFO — однако в вашем распоряжении также есть 3 других уровня ведения журнала, которые вы должны использовать — console.debug(), console.warn() и console.error(). Помимо различий в форматировании (обратите внимание на разные цвета?), консоль разработчика браузера также позволяет легко фильтровать журналы на разных уровнях с помощью удобного раскрывающегося списка, чтобы навести порядок в журналах.
При регистрации списков элементов используйте console.table()
Это не требует пояснений и является одной из моих любимых консольных функций — если вам когда-нибудь понадобится зарегистрировать список объектов, попробуйте console.table().
Детальное профилирование производительности с помощью console.profile() и console.time()
Хотите профилировать точный поток пользователей в своем приложении, чтобы найти горячие точки? Запустите console.profile(profileName) в начале действия и console.profileEnd(profileName) в конце, чтобы проверить профиль ЦП для потока.
Подсчет помеченных казней с помощью console.count()
Это одна из тех консольных функций, которые я лично не нашел особого применения, но она есть, если вам это нужно. console.count(label) может помочь вам точно узнать, сколько раз выполняется фрагмент кода, что может быть полезно для поиска и устранения условий гонки и других сценариев.
Резюме
Я очень надеюсь, что эти советы сделают ваш опыт фронтенд-разработки более продуктивным и увлекательным! Очевидно, в этом посте я коснулся только поверхности логирования ниндзюцу, спасибо!
