Консоль веб-браузера дает нам больше возможностей, чем просто console.log ()

Иногда я использую ярлыки, используя встроенный в обозреватель метод console.log(), чтобы прояснить результат выполнения некоторого фрагмента кода. В основном я использую console.log() для устранения неполадок, проверяя, что аргументы функции получают правильные значения или что функция возвращает то, что я ожидаю от нее. В редких случаях вместо рендеринга компонента [ReactJs-] непосредственно в графический интерфейс пользователя (GUI) я могу распечатать компонент на консоли с помощью console.log(), чтобы проверить его свойства.

Я думаю, что есть много других разработчиков, которые используют веб-консоль таким же образом, как и я. Разработчики должны прекратить злоупотреблять console.log() и вместо этого извлекать выгоду из того, что мы можем делать с веб-консолью, чем просто чтение журналов.

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

Проблемы и вредные привычки

Как часто вы думаете о том, почему вы используете метод console.log() и в каком контексте? Мы используем его исключительно автоматически? Почему мы всегда должны вести все эти журналы, особенно с console.log()?

Во многих из этих ситуаций вместо чтения и понимания кода мы делаем предположения и пытаемся помочь себе, записывая данные в консоль. Все это время, которое мы потратили на ведение журнала, может занять очень много времени (иногда это может даже сбить нас с толку), и мы, вероятно, «учимся» медленнее.

Ненужное ведение журнала = меньшая уверенность

Излишнее количество журналов на консоли делает нас менее уверенными. Разработчики часто используют консоль во многих частях кода, особенно если функции имеют глубокую цепочку, чтобы «проверить» надежность нашего кода.

Использование консоли для «подтверждения»

В очень многих случаях мы также принимаем, что когда что-то записывается в консоль, мы получаем указание, что «все работает нормально». Мы можем предотвратить взлом агентов сборки или скриптов, если мы внимательно прочитаем и поймем код, вместо того, чтобы полагаться на «подтверждение», которое может дать нам консоль.

Мы также часто используем это «подтверждение», чтобы проверить, что что-то не так, чтобы проверить, не определен ли объект или имеет ли массив длину. Я бы сказал, что «подтверждение» нормально, если наш код взломан и у нас нет других вариантов.

Отладка занимает много времени

Отладка в консоли может занять много времени. Иногда мы можем сидеть в течение нескольких дней, записывая что-то в консоль, отвлекая внимание от понимания того, как код «на самом деле» работает, и других вариантов, которые мы могли бы попробовать, вместо того, чтобы просто вести журнал.

Бревна могут попасть в производство

Ведение журнала на консоли можно развернуть в производственной среде, что не всегда так хорошо, особенно если мы регистрируем важную информацию, которая не должна быть доступна «всем» в Интернете.

Как мы должны использовать веб-консоль

Важно знать, что консоль также является REPL. Это означает, что вы можете взаимодействовать с JavaScript на просматриваемой странице. REPL - отличный способ поиграть и изучить JavaScript.

Полезные консольные методы

console.log() - лишь один из многих методов, которые вы можете вызвать для объекта консоли. _8 _, _ 9_ и console.warn() могут быть лучше в тех случаях, когда вы разделяете разные состояния сообщений. А чтобы лучше представить наши данные в консоли, мы можем использовать такие методы, как console.group() и console.table().

console.error (): выводит на консоль сообщение об ошибке, при этом напечатанное содержимое будет иметь красный цвет. В большинстве браузеров рядом с сообщением консоли также отображается значок ошибки.

console.error(‘Something is wrong’)

console.warn (): выводит на консоль предупреждающее сообщение, при этом напечатанное содержимое будет иметь желтый цвет. В большинстве браузеров рядом с сообщением консоли также отображается значок предупреждения.

console.warn(‘Heads up! This is a warning’)

console.group (): выводит группу методов консоли, выполняемых в группе.

console.group(‘feature’)
  console.warn(‘Heads up! This is a warning’)
  console.error(‘Something is wrong’)
console.groupEnd(‘feature’)

console.table (): печатает табличное представление предоставленных данных. Метод принимает объекты и массивы.

console.table([{ a: 1, b: 2 }])

Нередко [новички и профессионалы в области JavaScript] просто выводят строки с надписью «работает», «готово» или что-то подобное, а затем используют их для «подтверждения» того, что наш код работает должным образом. Я также видел слишком много случаев использования console.log() во многих разных местах кодовой базы одновременно во время сеанса парного программирования.

Веб-консоль - мощный инструмент, и мы должны использовать его для наилучших целей; Тестирование методов или извлечений JavaScript, игра с DOM или объектами нашего кода. С помощью консоли мы можем делать гораздо больше, чем просто записывать в список простые строки, числа или длины.

Если мы сосредоточимся в основном на понимании базового кода и использовании консоли для его значимости, мы будем учиться быстрее, станем более уверенными и напишем лучший код.

Спасибо за прочтение

Код, черт возьми