
Содержание статьи
автор Риккардо Канелла

Как веб-разработчик, вы хорошо знаете, что вам нужно наладить свой код. Мы часто используем внешние библиотеки для журналов, а также для их форматирования и/или отображения в некоторых случаях, но консоль наших браузеров гораздо более мощная, чем мы думаем.
Когда мы думаем о консоли, первое, что приходит в голову и console.log
, да? Но методов гораздо больше, чем мы себе представляем. Теперь мы увидим, как максимально использовать консоль, и я дам вам несколько советов, чтобы сделать эти методы более читабельными.
Что такое консоль?
Консоль JavaScript – это встроенная функция в современных браузерах, которая поставляется с готовыми инструментами разработки в интерфейсе, похожем на оболочку. Это позволяет разработчику:
- Просмотр журнала ошибок и предупреждений на веб-странице.
- Взаимодействие с веб-страницы с помощью JavaScript.
- Настройте приложения и перейдите через DOM непосредственно в браузере.
- Проверяйте и анализируйте сетевую активность
По сути это дает вам возможность писать, управлять и контролировать JavaScript прямо в вашем браузере.
Console.log, Console.error, Console.warn и Console.info
Это, пожалуй, наиболее используемые методы из всех. Для этих методов можно передать более одного параметра. Каждый параметр оценивается и объединяется в строку, разделенную пробелом, но в случае объектов или массивов можно перемещаться между их свойствами.

Консоль.
Этот метод позволяет сгруппировать серию console.logs (но также информацию об ошибках и т.п.) в группу, которую можно свернуть. Синтаксис действительно очень прост: просто введите все console.log
мы хотим сгруппировать перед a console.group()
(или console.groupCollapsed()
если мы хотим, чтобы он был закрыт по умолчанию). Затем добавьте а console.groupEnd()
в конце, чтобы закрыть группу.

Результаты будут выглядеть так:

Консоль.стол
С тех пор как я обнаружил console.table
моя жизнь изменилась. Отображение JSON или очень больших массивов JSON внутри a console.log
это ужасный опыт. The console.table
позволяет представить эти структуры внутри красивой таблицы, где мы можем называть столбцы и передавать их как параметры.

Результат отличный и очень полезный при отладке:

Console.count, Console.time и Console.timeEnd
Эти три метода – швейцарский армейский нож для каждого разработчика, которому нужно наладить. The console.count
подсчитывает и выводит количество раз count()
было вызвано в той же строчке и с той же меткой. The console.time
запускает таймер с именем, указанным как входной параметр, и может запускать до 10 000 одновременных таймеров на определенной странице. После начала мы используем вызов к console.timeEnd
чтобы остановить таймер и напечатать на консоли прошедшее время.

Выход будет выглядеть так:

Console.trace и Console.assert
Эти методы просто печатают трассировку стека из точки, где она была вызвана. Представьте, что вы создаете библиотеку JS и хотите сообщить пользователю, где была сгенерирована ошибка. В этом случае эти методы могут быть очень полезны. The console.assert
похож на console.trace
но печатать, только если условие не выполнено.

Как мы видим, результат именно тем, что React (или любая другая библиотека) покажет нам, когда мы генерируем исключение.

Удалить все консоли?
Использование консолей часто заставляет нас устранить их. Или иногда мы забываем о производственной сборке (и замечаем их только через несколько дней по ошибке). Конечно, я никому не советую злоупотреблять консолями там, где они не нужны (консоль в дескрипторе ввода изменений можно удалить после того, как увидите, что она работает). Вы должны оставить журналы ошибок или журналы отслеживания в режиме разработки, чтобы помочь вам наладить. Я много использую Webpack как на работе, так и в своих собственных проектах. Этот инструмент позволяет удалить все консоли, которые вы не хотите оставлять (по типу) из производственной сборки с помощью uglifyjs-webpack-plugin?
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')var debug = process.env.NODE_ENV !== "production";.....optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // Compression specific options uglifyOptions: { // Eliminate comments comments: false, compress: { // remove warnings warnings: false, // Drop console statements drop_console: true }, } })] : []}
Конфигурация действительно тривиальна и упрощает работу, поэтому получайте удовольствие от консоли (но не злоупотребляйте!)
Если вам понравилась статья, пожалуйста, хлопайте и следите за мной.
Спасибо и следите за обновлениями?
Следите за моими последними новостями и советами в Facebook