автор Риккардо Канелла

Как веб-разработчик, вы хорошо знаете, что вам нужно наладить свой код. Мы часто используем внешние библиотеки для журналов, а также для их форматирования и/или отображения в некоторых случаях, но консоль наших браузеров гораздо более мощная, чем мы думаем.

Когда мы думаем о консоли, первое, что приходит в голову и 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