Создание не просто, попросите бесплатный лайк, спасибо! ! !
Эта статья участвовала в третьем этапе тренировочного лагеря для создателей Nuggets. Подробнее см.:Dig Li Project | Идет третий этап тренировочного лагеря создателя, «написание» личного влияния.
предисловие
Почему вы вдруг подумали написать статью о консоли? Автор давно в контакте с JS.Помимо использования отладчика vscode,по сути,большую часть времени я использую метод console.log() для вывода каких-то или отладочных программ.Полагаю, что многие товарищи кто только начал контактировать с JS, тоже должен привыкнуть к его использованию console.log(). Однако возможности журнала ограничены и не могут удовлетворить все сценарии. Например, мы используем табличные объекты данных.
Картинка ниже — это то, о чем я подумал, когда увидел черную бурю! ! !
console.log()
Этот атрибут должен быть наиболее часто используемым всеми, но использовали ли вы этот метод для вывода объекта консоли.
console.log(console)
грамматика
console.log (общие данные JS)
console.log(123)
>> 123
console.log( %s %d %f %o и другие записи-заполнители (аналогично печати C))
console.log('我是 %s','前端picker')
>> 我是 前端picker
console.log(строка шаблона ES6)
const nickName = "前端picker"
console.log(`我是 ${nickName}``)
>> 我是 前端picker
Массив/объект будет отображаться в одной строке
console.log({object: 'object'}, {object: 'object'});
console.log(['array', 'array'], ['array', 'array']);
Стили CSS для украшения вывода
Выше мы представили заполнитель для вывода.На самом деле, есть также заполнитель %c, который можно использовать для получения стилей css.
console.log('我是红色 %c 文字', 'color: red;');
Каждый %c отвечает только за текст после него, пока не встретится следующий %c;
console.log('This is %cred text %c 我没颜色 %c 我是绿色.', 'color: red;', '', 'color: green;');
Конечно, вы также можете определить стиль как переменную.
let style="background: white;border: 3px solid red;color: red;font-size: 50px;margin: 40px;padding: 20px;"
undefined
console.log('%c我是log!', style);
console.clear()
Большинство браузеров имеют встроенный метод очистки панели управления в инструментах разработчика.
На самом деле, объект консоли также предоставляет метод очистки консоли.
Когда вы выполняете console.clear() после
cosole.debug()
Выводить сообщения уровня «отладка» и могут отображаться в браузере только в том случае, если вы настроили отладку. Например в Фаерфоксе:
Когда вы не отметите отладку: информация об отладке не может быть отображена.
Он будет отображаться только при проверке отладки.
error()
Выводит сообщение об ошибке на веб-консоль и может отображаться только в том случае, если браузер настроен с ошибками.
На картинке ниже показан эффект браузера Firefox.На следующем рисунке показан эффект в хроме.
Оба браузера добавят небольшой значок перед ошибкой.
info()
Выводит уведомление на веб-консоль и может отображаться только в том случае, если информация о конфигурации браузера видна.
На картинке ниже показан эффект браузера Firefox.На следующем рисунке показан эффект в хроме.
В браузере Firefox будет добавлена маленькая иконка впереди, а в Chrome нет.
warn()
Выводит предупреждающее сообщение на веб-консоль и может отображаться только в том случае, если отображается предупреждение о конфигурации браузера.
На картинке ниже показан эффект браузера Firefox.На следующем рисунке показан эффект в хроме.
Оба браузера будут иметь небольшой значок перед предупреждением.
console.count()
Выведите количество вызовов count(). Эта функция принимает необязательную метку параметра. Если параметр не задан, имя этого параметра по умолчанию — **"default"**.
для статистики
console.count('我是');
console.count('前端picker');
console.count('我是');
console.count('前端picker');
console.count('我是');
console.count('前端picker');
Как видно из рисунка ниже, count() накапливается отдельно для разных параметров.
console.countReset()
Используется для перезапуска счетчика.Также получает параметр метки,
Если указана метка аргумента, эта функция сбрасывает счетчик, связанный с меткой.
Если метка параметра опущена, эта функция сбрасывает счетчик по умолчанию по умолчанию.
console.dir()
Отображает свойства указанного объекта JavaScript в консоли и через интерактивный список в виде файлового дерева. То есть синтаксис такой:
console.dir(object)
const auther = {
name: '前端picker',
age: '18',
};
console.log(auther);
console.dir(auther);
В браузере chrome это свойство поддерживается.На следующем рисунке показана разница с логом.
Но в браузере Firefox вывод log и dir одинаков, разница в том, что Firefox по умолчанию расширяет результат dir.
Конечно, log и dir совершенно разные при выводе структуры DOM. Но это мы узнаем в методе dirxml.
console.dirxml()
Отображает дерево взаимодействия явного элемента XML/HTML, включая все дочерние элементы. Если его нельзя отобразить как элемент, вместо него используется объект JavaScript. Его вывод представляет собой унаследованный расширенный список узлов, который позволяет вам видеть содержимое дочерних узлов.
Также поддерживаются объекты.
В dir мы оставили DOM здесь. Создайте DOM-объект
var childNode = document.createElement('p');
childNode.innerHTML = '<span>这里是提示信息〜〜</span>';
Использовать вывод log/dir/dirxml
log
dir
dirxml
Видно, что эффект вывода log и dirxml одинаков, который выводится в виде DOM, а dir выводит значение атрибута.
group(), groupCollapsed() и groupEnd()
Объединяет различные выходные данные консоли, чтобы показать одну форму отношений между ними. Обычно используется в комбинации.
group получает параметр, указывающий название группы, если его не задать, то будет вести себя несогласованно в разных браузерах, по умолчанию браузер расширяет группу.
Разница между groupCollapsed() и group заключается в том, что groupCollapsed автоматически сворачивает группу.
groupEnd() указывает на конец группы.
group+groupEnd
console.group();
console.log('name:');
console.log('前端picker');
console.groupEnd();
console.group('参数');
console.log('age');
console.log('18');
console.groupEnd();
Ниже эффект хрома. Если имя группы не задано, по умолчанию используется console.group, и выходные данные группы будут иметь отступ.Ниже показано действие Firefox. Если имя группы не задано, по умолчанию используется .
groupCollapsed+grounEnd
console.groupCollapsed();
console.log('name:');
console.log('前端picker');
console.groupEnd();
console.group('参数');
console.log('age');
console.log('18');
console.groupEnd('参数');
вложенный
console.group('下面是作者信息');
console.log('第1项');
console.group('name');
console.log('前端picker');
console.groupEnd();
console.log('第2项');
console.group('age');
console.log('18');
console.groupEnd();
console.groupEnd();
Украшение в стиле CSS-%c
console.group('%c下面是作者信息','color:red;');
console.log('第1项');
console.group('name');
console.log('前端picker');
console.groupEnd();
console.log('第2项');
console.group('age');
console.log('18');
console.groupEnd();
console.groupEnd();
console.table()
Для этого метода требуется обязательный параметр, который должен быть массивом или объектом; также можно использовать необязательные столбцы параметров.
Он печатает параметры в табличной форме. Каждый элемент в массиве (или перечисляемое свойство в объекте) будет отображаться в таблице в виде строки.
Первый столбец таблицы индекс. Если данные данных представляют собой массив, то значение ячейки в этом столбце является индексом массива. Если данные являются объектом.
множество
let ary = [
'1',
'2',
'3'
];
console.table(ary);
объект
let obj = {
name: '前端picker',
age: '18',
};
console.table(obj);
массив объектов
let aryOfObjects = [
{
name: '张三',
age: '12',
},
{
name: '李四',
age: '18',
},
{
name: '王五',
age: '19',
}
];
console.table(aryOfObjects);
Как показано, table() дает нам красивое расположение объектов с повторяющимися ключами в качестве меток столбцов. , все ключи в каждом объекте будут представлены в виде столбца, независимо от того, есть ли соответствующие ключи и данные в других объектах. Если у объекта нет данных для ключевого столбца, он отображается пустым.
массив массив
let aryOfArray = [
[1,2,3],[3,4,5],[6,7,8]
];
console.table(aryOfArray);
Массивы массивов аналогичны массивам объектов. Он использует индекс внутреннего массива в качестве метки столбца, а не в качестве ключа для метки столбца. Поэтому, если в одном массиве элементов больше, чем в других массивах, для этих столбцов в таблице будут пустые элементы. Так же, как массив объектов.
массив объектов
let aryOfArraysWithObject = [
['1', '2', {
name: '张三',
age: '12',
},],
['3', '4', {
name: '李四',
age: '18',
},}],
['5', '6', {
name: '王五',
age: '19',
}]
];
console.table(aryOfArraysWithObject);
В Хроме посмотреть, что содержится в этих объектах в третьем столбце, нет возможности развернуть, то есть просмотреть. .
Однако в браузере Firefox он автоматически расширится, и вы сможете очистить результаты.
time(), timeLog() и timeEnd()
time()
Вы можете запустить таймер, чтобы отслеживать, сколько времени занимает операция. Каждый таймер должен иметь уникальное имя, а на странице может одновременно работать до 10 000 таймеров. При вызове console.timeEnd() с этим именем таймера в качестве аргумента браузер выводит прошедшее время для соответствующего таймера в миллисекундах.
console.time(计时器名称)
timeEnd()
Остановите таймер, запущенный console.time(), и напечатайте время окончания
console.timeEnd(计时器名称)
timeLog()
Выводит на консоль значение таймера, который должен быть запущен через console.time().
console.timeLog()(计时器名称)
использовать
console.time('this is a timer');
console.timeLog('this is a timer');
console.timeEnd('this is a timer');
время для расчета
console.time('this is a timer');
for(let i=0; i<10000000;i++){
}
console.timeLog('this is a timer');
console.timeEnd('this is a timer');
console.assert()
Команда console.assert() аналогична команде error, упомянутой ранее. Разница в том, что утверждения позволяют использовать логические условия, чтобы определить, следует ли выводить текст на консоль.
Например: вы хотите проверить значение переменной, и это значение не равно «выборщику интерфейса», Если переменная меньше этого числа и условие становится истинным, команда assert ничего не делает. Если условие становится ложным, отображается выходной текст. Таким образом, вам не нужно использовать console.error() для вывода после определения необходимости вывода.
let name = '张三';
console.assert(name === '前端picker', '不是是前端picker，无法输出');
let name1 = '前端picker';
console.assert(name1 === '前端picker', '不是前端picker------1，可以输出');
В Chrome также есть вывод, показывающий, откуда пришло утверждение.
let value = 2;
function chackValue() {
chackValue3();
}
function chackValue2() {
chackValue3();
}
function chackValue3() {
console.assert(value < 1, 'This was false.');
}
chackValue();
Для удобства мы используем vscode для обозначения количества строк.
Как вы можете видеть на изображении ниже, Chrome сообщает нам, что утверждение находится в строке 9.
console.trace
стек вызовов
Прежде чем изучать трассировку, давайте узнаем, что такое стек вызовов! ! !
Есть четыре функции: функция 1, вызов функции 2, функция 2, вызов функции 3, функция 3, вызов функции 4.
Глядя на эту картинку, эти функции показывают характеристики стека. Последняя вызванная функция появляется вверху. Так что назовите эту связь стеком вызовов.
Что может сделать трассировка
Используется для записи трассировки стека JavaScript, и мы также можем добавить параметры для представления текущего отслеживаемого списка Cinderella.
function f1(){
console.log('f1')
f2()
}
function f2(){
console.log('f2')
f3()
}
function f3(){
console.log('f3')
f4()
}
function f4(){
console.log('f4')
console.trace("f4的追踪记录");
}
На картинке видно, что последней функцией, вызываемой перед запуском console.trace, является f4. Таким образом, это будет вершина стека вызовов. то один раз это f3,f2,f1
постскриптум
Следующее предложение было замечено в скрытом месте на сайте Nuggets, вы можете догадаться в области комментариев! ! ! !