Как вы можете улучшить свой рабочий процесс с помощью консоли JavaScript

1656601227 kak vy mozhete uluchshit svoj rabochij proczess s pomoshhyu konsoli

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

3ykGPRhcB2YeIfHpS0nCCaaXx9GQLkgkKYV8

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

Когда мы думаем о консоли, первое, что приходит в голову и console.log, да? Но методов гораздо больше, чем мы себе представляем. Теперь мы увидим, как максимально использовать консоль, и я дам вам несколько советов, чтобы сделать эти методы более читабельными.

Что такое консоль?

Консоль JavaScript – это встроенная функция в современных браузерах, которая поставляется с готовыми инструментами разработки в интерфейсе, похожем на оболочку. Это позволяет разработчику:

  • Просмотр журнала ошибок и предупреждений на веб-странице.
  • Взаимодействие с веб-страницы с помощью JavaScript.
  • Настройте приложения и перейдите через DOM непосредственно в браузере.
  • Проверяйте и анализируйте сетевую активность

По сути это дает вам возможность писать, управлять и контролировать JavaScript прямо в вашем браузере.

Console.log, Console.error, Console.warn и Console.info

Это, пожалуй, наиболее используемые методы из всех. Для этих методов можно передать более одного параметра. Каждый параметр оценивается и объединяется в строку, разделенную пробелом, но в случае объектов или массивов можно перемещаться между их свойствами.

mb28MA52eZS1oW000KV2KHJfjW93hGAkaFln

Консоль.

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

HmjCThNsjXDndqMmnXsoJfhaDvJWSe9HthWY
Пример использования console.group

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

oaS8o7IqXG2FYALTwpMxjAoVaV94nCpjTDHw

Консоль.стол

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

zTSGqfZmTDJNuDtoUsC8UuRBB8PAZ5OMME87
Пример использования console.table

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

nLfvcHJ1b6LuD5CzcZxk36jl9YzlUF3I41h1

Console.count, Console.time и Console.timeEnd

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

2pxTmE0ZHBasKm2ZmZaj-ajMYHvhjhVDGhID
Пример использования console.time и console.count

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

Tt4dNjkK0yCpYzAHD6ZEFluIQ6IHl9cjv-nl

Console.trace и Console.assert

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

wXYN1gjig-dXgTSQPtf7rPPWR3uNvFrtsrGw

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

ZH4tfVHdbM-xG0R2TcTuQ58RuuozuPTGddug

Удалить все консоли?

Использование консолей часто заставляет нас устранить их. Или иногда мы забываем о производственной сборке (и замечаем их только через несколько дней по ошибке). Конечно, я никому не советую злоупотреблять консолями там, где они не нужны (консоль в дескрипторе ввода изменений можно удалить после того, как увидите, что она работает). Вы должны оставить журналы ошибок или журналы отслеживания в режиме разработки, чтобы помочь вам наладить. Я много использую 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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *