Как разработчик JavaScript, я использовал метод console.log() больше раз, чем количество людей, убитых в« Игре престолов до 7-го сезона - ну, может быть, не так уж и много».
Дело в том, что как и многие другие (новички) JS-кодеры, я хорошо знал log() как единственный метод для объекта JavaScript console. Да, это объект. Вы можете проверить это, открыв консоль браузера и запустив typeof(console), и вы должны получить обратно объект. Теперь, когда мы доказали, что это объект, как и все другие объекты, в нем есть много других методов, помимо log().
Почему так важно знать эти другие методы?, вы можно спросить. Что ж, хотя вы могли бы просто продолжать использовать метод log для отладки кода, изучение и использование других методов помогает улучшить представление и упростить отладку. И привет !, почему бы не узнать больше, чтобы помочь нам бороться с нашим общим врагом - ошибками. Кроме того, вы не знаете, что будет у вашего следующего интервьюера под рукавами.
Приступим, ладно?
Надеюсь, ваша консоль браузера все еще работает, если не открыть их снова, и никогда не закрывать ее, пока мы не закончим с этим, так как мы будем к ним возвращаться чаще, чем нет.
Чтобы просмотреть другие методы на консоль, попробуйте запустить console.log(console) - ирония! Приведенные ниже данные должны быть возвращены нам:
console {debug: ƒ, error: ƒ, info: ƒ, log: ƒ, warn: ƒ, …}
assert: ƒ assert()
clear: ƒ clear()
context: ƒ context()
count: ƒ count()
countReset: ƒ countReset()
debug: ƒ debug()
dir: ƒ dir()
dirxml: ƒ dirxml()
error: ƒ error()
group: ƒ group()
groupCollapsed: ƒ groupCollapsed()
groupEnd: ƒ groupEnd()
info: ƒ info()
log: ƒ log()
memory: (...)
profile: ƒ profile()
profileEnd: ƒ profileEnd()
table: ƒ table()
time: ƒ time()
timeEnd: ƒ timeEnd()
timeLog: ƒ timeLog()
timeStamp: ƒ timeStamp()
trace: ƒ trace()
warn: ƒ warn()
Symbol(Symbol.toStringTag): "Object"
get memory: ƒ ()
set memory: ƒ ()
__proto__: Object
Это дает нам гораздо больше методов, чем мы когда-либо предполагали на консоли. И, как и любой другой многочисленный список, мы выберем самые важные из них.
console.assert ()
Самый простой случай использования метода theassert() - это когда мы хотим отобразить что-то только на консоли и только в том случае, если утверждение, переданное в метод, является ложным. Если каким-либо образом утверждение пройдет успешно, ничего не произойдет или вы получите undefined, если используете консоль браузера. Чтобы увидеть это в действии, откройте консоль, если она не открыта (PUYCINO - это не настоящая вещь), и запустите следующий код:
var x = 21; console.assert(x % 2 === 0, 'oops! x is not divisible by 2'); // or // var x = 21; var errMsg = 'oops! x is not divisible by 2'; console.assert(x % 2 === 0, errMsg);
Вы должны получить сообщение об ошибке утверждения с выводом сообщения об ошибке на консоль. Попробуйте изменить x на 20 или любое другое четное число и снова запустите код утверждения, на этот раз ничего не произойдет.
console.clear ()
Этот способ достаточно простой. Запуск console.clear() просто очищает консоль и отображает сообщение Console was cleared (как будто мы не видим, что оно было очищено). Запускайте этот код всякий раз, когда вы чувствуете, что ваша консоль забита и вам нужно место.
console.dir () и console.dirxml ()
Этот метод помогает нам вывести на консоль все свойства (методы) любого переданного в нее действительного объекта JavaScript. Помните, когда мы сказали - и доказали -, что console был объектом. Теперь давайте используем его как аргумент в методе console.dir(). PUYCINO и запустите код console.dir(console), и отобразится знакомый результат. Вы также можете попробовать console.dir(window) просмотреть свойства собственного объекта Window. И это когда-нибудь пригодится, вот увидите!
dirxml почти аналогичен dir с очень небольшими и незначительными отличиями.
console.error ()
Это отображает содержимое как ошибку - красное выделение, светло-красный фон и красный знак ошибки (x) сбоку. Все функции, чтобы вы знали, что то, что отображается, является ошибкой. Попробуйте запустить console.error('This is a typical error') и поймете, что я имею в виду.
Вариант использования для этого - когда вы ожидаете ошибки в своем коде. Например, во время блока .catch вызова API, который возвращает Promise.
console.group (), console.groupCollapsed () и console.groupEnd ()
Эти методы используются для группировки блоков кода или чего-то подобного того, что вы пытаетесь отобразить на консоли.
group() обозначает начало группы. Он принимает в качестве аргумента необязательный label. Метка служит меткой для группы. groupEnd() отмечает конец группы. groupCollapsed() работает так же, как group(), но хотя все элементы в group() автоматически отображаются, groupCollapsed() отображает их в свернутом виде, вам придется вручную щелкнуть «раскрывающийся» список рядом с ним, чтобы вывести их все.
Давайте посмотрим на это в действии. PUYCINO и вставьте следующее:
console.group('My fav tech tools')
// Here, 'my fav tech tools' is the label for my group
console.log('React')
console.log('Twitter Bootstrap')
console.log('Django')
console.log('Django REST')
console.log('Axios')
console.groupEnd() //ends the group
Группы также могут быть вложены в другую группу. Посмотрим, как это groupCollapsed() работает:
console.groupCollapsed('My fav languages and tools')
console.group('JavaScript') //nests in JavaScript group
console.log('React')
console.log('Redux')
console.log('Twitter Bootstrap')
console.groupEnd() //exits nested group for JavaScript
console.groupCollapsed('Python') //nests in a collapsed Python group
console.log('Django')
console.log('Django REST')
console.groupEnd() //exits nested group for Python
console.groupEnd() //exits all groups
Как видите, сначала отображаемые группы свернуты, и вам придется их развернуть вручную. Далее вы можете видеть, что мы разделились еще на две группы: JavaScript и Python..
Всегда не забывайте выходить из каждой вложенной группы с помощью
groupEnd(), как указано выше.
console.log ()
Думаю, всем это знакомо. Так что не нужно терять время. По сути, он просто выводит что-то на консоль без какого-либо предупреждения или опасности.
console.table ()
Это отображает данные в табличном формате. Он принимает обязательный data, который должен быть массивом или объектом - передача строки не работает - и необязательный columns в качестве параметра.
Давайте посмотрим на это в действии. Опять же, PUYCINO (эй, теперь нет необходимости включать это). Вставьте следующее:
var nations = ['Nigeria', 'USA', 'Canada', 'Algeria']; console.table(nations)
Это должно распечатать данные в табличной форме с (index) и value столбцами. При использовании массивов столбец (index) автоматически заполняется индексом экземпляра. Чтобы указать, что следует использовать в качестве индекса таблицы, вместо этого передайте объекты. Здесь столбец (index) будет заполнен keys объекта, а value будет заполнен значениями объекта. Попробуйте ниже:
var nationsCurrency = {USA: 'dollars', Nigeria: 'naira', France: 'franc'}
console.table(nationsCurrency)
console.time () и console.timeEnd ()
time() запускает таймер, который можно использовать для отслеживания продолжительности операции. Он принимает необязательный аргумент label. Вызов timeEnd() с тем же label завершает таймер и выводит время (в миллисекундах), прошедшее с момента вызова time() и выполнения кода между time() и timeEnd().
console.time('test')
let mult = (2000*4444);
mult * 222;
console.timeEnd('test')
Лучшим вариантом использования для этого является сравнение двух похожих функций или логики, которые работают быстрее. В приведенном ниже примере кода сравнивается скорость выполнения for и while циклов.
console.time("test for loop");
for (i = 0; i < 100000; i++) {
console.log(i)
}
console.timeEnd("test for loop");
console.time("test while loop");
while (i < 1000000) {
i++
}
console.timeEnd("test while loop");
Выполнив приведенный выше код, мы видим, что for loop быстрее, чем while..
console.warn ()
Выводит предупреждающее сообщение в веб-консоль. Данные отображаются на светло-желтом фоне со значком предупреждения сбоку. Попытайся:
console.warn("GOT is hugely graphical and full of violent. Watch at your own discretion.")Мы закончили с важными методами. Надеюсь, к настоящему времени у вас будет меньше console.log() строк во время сеансов отладки. Или, может быть, нет, в любом случае спасибо, что зашли так далеко.
Валар Моргулис!
