Автор оригинала: FreeCodeCamp Community Member.
Riccardo Canella
Как веб-разработчик, вы очень хорошо знаете необходимость отладки вашего кода. Мы часто используем внешние библиотеки для журналов, а также для форматирования и/или отображения их в некоторых случаях, но консоль наших браузеров намного мощнее, чем мы думаем.
Когда мы думаем о консоли, первое, что приходит на ум и console.log , верно? Но есть еще много методов, чем мы представляем. Теперь мы увидим, как максимально использовать консоль, и я дам вам несколько советов, чтобы сделать их эти методы более читаемыми
Что такое консоль?
Консоль JavaScript представляет собой встроенную функцию в современных браузерах, которые поставляются с инструментами разработки вне коробки в оболочке интерфейса. Это позволяет разработчику:
- Просмотр журнала ошибок и предупреждений, происходящих на веб-странице.
- Взаимодействовать с веб-страницей, используя команды JavaScript.
- Отладка приложений и пересекайте DOM непосредственно в браузере.
- Проверять и анализировать сетевую активность
По сути, он дает вам возможность писать, управлять и контролировать JavaScript прямо в вашем браузере.
Console.log, Console.Error, Console.warn и Console.info
Это, вероятно, наиболее используемые методы всех. Вы можете пройти более одного параметра для этих методов. Каждый параметр оценивается и объединяется в строке, разграниченной пространством, но в случае объектов или массивов вы можете перемещаться между их свойствами.
Console.group
Этот метод позволяет группировать серию Console.logs (но и информация об ошибке и т. Д.) Под группой, которая может быть рухнута. Синтаксис действительно очень просто: просто введите все console.log Мы хотим группировать до Console.group () (или Console.groupCollapsed () Если мы хотим, чтобы он был закрыт по умолчанию). Затем добавьте Console.grupend () в конце, чтобы закрыть группу.
Результаты будут выглядеть так:
Console.table.table.
Так как я обнаружил Console.table Моя жизнь изменилась. Отображение JSON или очень больших массивов JSON внутри console.log это ужасный опыт. Console.table Позволяет нам визуализировать эти структуры внутри красивой таблицы, где мы можем назвать столбцы и передавать их в качестве параметров.
Результат прекрасен и очень полезен в отладке:
Console.count, Console.time и Console.imeend
Эти три метода являются швейцарским армейским ножом для каждого разработчика, которому нужно отлаживать. Console.count считает и выводит количество раз, когда count () был вызван на одной линии и с той же ярлыком. Консоль. Время Запускает таймер с именем, указанным в качестве входного параметра, и может работать до 10000 одновременных таймеров на данной странице. После инициировали, мы используем звонок Console.Timeend Чтобы остановить таймер и распечатать прошедшее время на консоль.
Выход будет выглядеть так:
Console.traace и Console.assert.
Эти методы просто печатают трассировку стека от точки, где его называли. Представьте себе, что вы создаете библиотеку JS и хотите сообщить пользователю, где была сгенерирована ошибка. В этом случае эти методы могут быть очень полезными. Console.assert это как console.traace Но будет печать только в том случае, если условие прошло не пройти.
Как видно, вывод является именно то, что реагирует (или любая другая библиотека) покажет нам, когда мы создаем исключение.
Удалить все консоли?
Использование консолей часто заставляет нас устранить их. Или иногда мы забываем о строительстве производства (и заметить их только по ошибкам дни и дни спустя). Конечно, я не советую никому злоупотреблению приставкам, где им не нужна (консоль в ручке ввода изменений может быть удалена после того, как вы увидите, что он работает). Вы должны оставить журналы ошибок или журналы Trace в режиме разработки, чтобы помочь вам отладить. Я использую 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 }, } })] : []}Конфигурация действительно тривиальная, и упрощает работу, так и весело с консолью (но не злоупотреблять!)