Как фронтенд-разработчик, вы должны использоватьconsole.logразрабатывать и отлаживать, конечно хорошо, но вы наверное не знаете, кромеconsole.log, объект Console браузера также содержит много других очень полезных методов, давайте посмотрим.
console.log
представлять
console.logМетод, который мы используем чаще всего, используется для вывода информации на консоль. Его функция по-прежнему очень мощная, различные типы данных, такие как число, строка, массив, объект, функция и т. д., могут быть напечатаны, а местоположение ошибки будет отображаться позже.
Пример
let num = 123
let str = '123'
let arr = [1, 2, 3]
let obj = {
a: 1,
b: 2,
c: 3,
}
function func() {
// 我是全掘金最帅的
}
console.log(num)
console.log(str)
console.log(arr)
console.log(obj)
console.log(func)
Эффект консоли Chrome выглядит следующим образом:
console.info
представлять
console.infoа такжеconsole.logФункция почти точно такая же, и она также выводит информацию в консоль, за исключением того, что стиль печати может быть таким же, какconsole.logнемного отличается.
Здесь нужно пояснить, что объект Console — это не встроенный объект javascript, а встроенный объект браузера, поэтому стиль вывода в консоли связан с каждым браузером.
Пример
console.log('this is console.log')
console.info('this is console.info')
Эффект в консоли браузера Chrome выглядит следующим образом, и между ними нет никакой разницы:Консольный эффект браузера Firefox выглядит следующим образом:
console.infoПеред печатным содержимым есть дополнительный символ !:
console.error
представлять
console.errorФункция почти такая же, как у console.log, но распечатываемое содержимое будет помечено заметным красным цветом, а перед ним стоит символ × 。.
Как показано ниже, когда вы проходитеconsole.logСуществует много печатного контента, но если вы хотите быстро найти определенную печатную информацию,console.errorТакой эффект «красненького в черном кусте» найти несложно.
Пример
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.error('牛牛牛牛牛牛牛牛牛午牛牛牛牛牛牛') // 这里面有个 '午' 字
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
намекать
Конечно, когда логика выполнения нашей программы идет не так, сообщение об ошибке в консоли также передается черезconsole.errorдля печати, поэтому, если вы действительно используетеconsole.errorПри отладке не путайте печатное содержимое с ошибкой в логике кода.
console.warn
представлять
console.warnПричина та же, что и выше, а напечатанная информация будет выделена желтым восклицательным знаком.
Пример
console.log('this is console.log')
console.warn('this is console.warn')
Вывод консоли выглядит следующим образом:
console.time и console.timeEnd
представлять
console.timeа такжеconsole.timeEndЭти два метода используются вместе, они принимают один и тот же параметр и выводят время выполнения кода между двумя выражениями.
Пример
console.time('计时器1');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器1');
Информация о печати консоли chrome выглядит следующим образом:
намекать
-
console.timeа такжеconsole.timeEndПолученный параметр может быть не только строкой, но и любым типом, или переменной, и даже могут быть переданы два ссылочных типа, которые «выглядят одинаково». Он выполнит метод toString() для переданного объекта в качестве окончательного имени печати, например, у вас естьconsole.timeа такжеconsole.timeEndпередавать значения[1, 2, 3], хотя оба[1, 2, 3]Адреса разные, но после выполнения метода toString они оба становятся1, 2, 3, что также соответствует правилам. - Несколько групп могут быть определены одновременно
console.timeа такжеconsole.timeEnd, и они могут использоваться взаимозаменяемо, если параметры, полученные каждой группой, остаются одинаковыми.Также возможны следующие методы:
console.time('计时器1');
console.time('计时器2');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器1');
for (var i = 0; i < 10000; i++) {
for (var j = 0; j < 10000; j++) {}
}
console.timeEnd('计时器2');
Результат выполнения следующий:
заявление
console.timeа такжеconsole.timeEndЭто позволяет легко отлаживать время выполнения каждой части логики в процессе разработки и сравнивать время, затрачиваемое разными методами. Прежде чем понять эти два метода, я обычно пропускаю дваDate.now()Вычитание времени выполнения вычисления определенной части логики делает отладку более удобной с помощью этого набора методов.
console.count
представлять
console.countПечатается текущее содержимое печати, а затем количество распечаток содержимого.
Пример
console.count('content1');
console.count('content1');
console.count('content1');
console.count('content2');
console.count('content2');
for (let i = 0; i < 5; i++) {
console.count('content3')
}
Вывод консоли выглядит следующим образом:
console.table
представлять
console.tableСоставные типы данных (объекты, массивы и т.д.) будут выведены в табличном виде в консоли, а массивы объектов можно вкладывать или комбинировать, и он сможет разобрать их в табличный вид.
Пример
let obj= {
a: 1,
b: 2,
c: 3
};
console.table(obj);
let arr = [1, 2, 3]
console.table(arr);
let data1 = [
{ num: 1 },
{ num: 2 },
{ num: 3 },
]
console.table(data1);
let data = [
{ a: 1 },
{ b: 2 },
{ c: 3 },
]
console.table(data);
Вывод консоли выглядит следующим образом:
console.group/console.groupCollapsed и console.groupEnd
представлять
console.groupа такжеconsole.groupEndИспользуемые в комбинации, они используются для группировки печатной информации, позволяя сворачивать и разворачивать информацию.
Пример
console.group('第一层');
console.group('第二层');
console.log('error');
console.error('error');
console.warn('error');
console.groupEnd();
console.groupEnd();
Браузер Chrome выводит результат следующим образом:
console.groupCollapsedа такжеconsole.groupEndКомбинированное использование такое же, как и выше, с той лишь разницей, чтоconsole.groupПервый дисплей печатного контента расширен,console.groupCollapsedСобран первый дисплей печатного контента.
console.trace
представлять
console.traceЭто очень полезный метод в процессе отладки, он может отслеживать процесс выполнения вашей логики.
Пример
function d(a) {
console.trace();
return a;
}
function b(a) {
return c(a);
}
function c(a) {
return d(a);
}
let a = b('123');
Выход контроллера следующий:Когда логика выполняется для
let a = b('123')Когда оператор сделан, функция b вызовет функцию c, функция c вызовет функцию d, а функция d вызоветconsole.trace(), тогдаconsole.trace()Весь процесс выполнения будет распечатан снизу вверх.
console.assert
представлять
console.assertМетод принимает два параметра, первый параметр — это выражение, а второй параметр — строка. Только если первый параметр имеет значение false, будет выведен второй параметр (и выведен в виде подсказки об ошибке).
Пример
console.assert(true === false, "输出内容1")
console.assert(true === true, "输出内容2")
Результаты консоли следующие:Первый
console.assertПараметр 1 имеет значение false, поэтому он печатает первоеconsole.assertправда, так не печатается.
console.clear
представлять
console.clearМетод очистит все напечатанное содержимое консоли и вернет курсор на первую строку, поэтому больше говорить не буду.
Установить стиль для содержимого консоли
在你逛各个网站时，如果你去看他们的控制台打印信息，那么你可能会发现一些有趣的内容。 Например?Торговый центрприставка:
представлять
Мы также можем добавить стили к сообщениям журнала консоли. Метод очень простой, нам нужно только передать стиль css вторым параметром вconsole.logВ печатном содержании заодно добавить первый параметр%c, содержимое второго параметра заменит %c.
Пример
const style = 'color: red; background: skyblue; font-size: 24px; padding: 10px; font-weight: bold;'
console.log('%c都看到这里了，还不点个赞？', style)
Информация о печати консоли выглядит следующим образом:
Суммировать
Объект Console имеет много методов и мощных функций. Изучение различных методов консоли может помочь нам делать больше с меньшими затратами на разработку и отладку. Приходите и испытайте различные интересные консоли!