Это первый день моего участия в ноябрьском испытании обновлений, подробности о мероприятии:Вызов последнего обновления 2021 г.
Как мы все знаем, инструменты разработчика браузера предоставляют нам мощную систему отладки, которую можно использовать для просмотра древовидной структуры DOM, отладки стилей CSS, отладки анимации, отладки точек останова кода JavaScript и т. д. Сегодня мы рассмотрим практические навыки отладки консольной отладки.
В настоящее время при разработке наших проектов обычно используются интерфейсные фреймворки, такие как React и Vue, и отладка внешнего интерфейса стала более сложной.Помимо использования плагинов, таких как React Dev Tools и Vue Dev Tools, мы используем console.log( ) Конечно, в большинстве случаев console.log() может удовлетворить наши потребности, но когда данные становятся более сложными, console.log() немного монотонна. На самом деле, консольный объект предоставляет нам множество методов печати, вот методы, содержащиеся в консольном объекте (здесь используется браузер Chrome, версия 95.0.4638.54 (официальная версия) (arm64)):
Объект console предоставляет интерфейс для отладки консоли браузера. Мы можем получить к нему доступ из любого глобального объекта. Если вы обычно просто используете console.log() для вывода некоторых переменных, возможно, вы не использовали мощные функции console. Давайте поиграем в причудливую отладку с консолью.
1. Базовая печать
1. console.log()
console.log() — самый простой и распространенный способ использования. Его можно использовать в любом месте кода JavaScript, и тогда вы сможете увидеть распечатанную информацию в консоли браузера. Его основное использование заключается в следующем:
let name = "CUGGZ";
let age = 18;
console.log(name) // CUGGZ
console.log(`my name is: ${name}`) // CUGGZ
console.log(name, age) // CUGGZ 18
console.log("message:", name, age) // message: CUGGZ 18
Кроме того, console.log() также поддерживает следующие методы вывода:
let name = "CUGGZ";
let age = 18;
let height = 180;
console.log('Name: %s, Age: %d', name, age) // Name: CUGGZ, Age: 18
console.log('Age: %d, Height: %d', age, height) // Age: 18, Height: 180
Здесь следующие переменные присваиваются позициям предыдущих заполнителей, и они находятся во взаимно однозначном соответствии. Такой способ записи может обеспечить разделение шаблонов и данных в сложном выводе, а также более четкую структуру. Но если это простой вывод, то и писать так не надо. В console.log поддерживаются следующие форматы заполнителей:
- Строка: %s
- Целое число: %d
- Число с плавающей запятой: %f
- Объект: %o или %O
- Стиль CSS: %c
Как видите, помимо самых основных типов, он также поддерживает определение стилей CSS:
let name = "CUGGZ";
console.log('My Name is %cCUGGZ', 'color: skyblue; font-size: 30px;')
Результат печати выглядит следующим образом (это не кажется полезным):
Где этот стиль печати может быть полезен, так это распечатать изображение, чтобы убедиться, что оно правильное:
console.log('%c ','background-image:url("http://iyeslogo.orbrand.com/150902Google/005.gif");background-size:120% 120%;background-repeat:no-repeat;background-position:center center;line-height:60px;padding:30px 120px;');
Результат печати следующий:
Строго говоря, console.log() не поддерживает печать изображений, но вы можете использовать фоновые изображения CSS для печати изображений, но вы не можете печатать их напрямую, потому что он не поддерживает настройку свойств ширины и высоты изображений, поэтому вам нужно используйте line-heigh And padding, чтобы растянуть изображение, чтобы оно могло отображаться нормально.
Мы можем использовать console.log() для печати рисунков персонажей, как Zhihu:
Вы можете использовать онлайн инструмент генерации символов, вставить сгенерированные символы в console.log () может быть. Онлайн-инструменты:mg2txt.我的头像生成效果如下，中间的就是生成的字符：
Кроме того, вы можете видеть, что когда заполнитель представляет объект, есть два способа написать его: %c или %C. В чем разница между ними? Когда указанный нами объект является обычным объектным объектом, между ними нет разницы. Если это узел DOM, разница есть. Давайте посмотрим на следующий пример:
Как видите, использование %o выводит содержимое узла DOM, включая его дочерние узлы. И %O печатает атрибуты объекта узла DOM, которые могут быть выборочно напечатаны в соответствии с требованиями.
2. console.warn()
Метод console.warn() используется для вывода информации о предупреждении на консоль. Его использование точно такое же, как у console.log, но стиль отображения отличается.Желтый треугольник добавляется перед информацией, чтобы указать на предупреждение:
const app = ["facebook", "google", "twitter"];
console.warn(app);
Стиль печати следующий:
3. console.error()
console.error() можно использовать для вывода сообщений об ошибках на консоль. Это то же самое, что и два вышеуказанных метода, но стиль отображения отличается:
const app = ["facebook", "google", "twitter"];
console.error(app);
Следует отметить, что console.exception() — это псевдоним для console.error(), и они работают одинаково.
Конечно, в console.error() также есть функция, которой нет в console.log(), а именно вывод стека вызовов функции:
function a() {
b();
}
function b() {
console.error("error");
}
function c() {
a();
}
c();
Результат печати следующий:
Как видите, здесь выводится информация о стеке вызовов функций: b→a→c.
Объект консоли предоставляет специальный метод для печати стека вызовов функции (console.trace()), который будет представлен ниже.
4. console.info()
console.info() может использоваться для вывода информации описания информационного класса, которая аналогична console.log(), и эффект вывода такой же:
2. Время печати
1. console.time() & console.timeEnd()
Если мы хотим получить время выполнения фрагмента кода, мы можем использовать методы console.time() и console.timeEnd() объекта консоли, см. следующий пример:
console.time();
setTimeout(() => {
console.timeEnd();
}, 1000);
// default: 1001.9140625 ms
Они могут пройти параметр, который является строкой, который уникально помеченный таймер. Если страница находится только один таймер, он не передает этот параметр, если есть несколько таймеров, вам необходимо использовать эту метку для отметок каждого таймера:
console.time("timer1");
console.time("timer2");
setTimeout(() => {
console.timeEnd("timer1");
}, 1000);
setTimeout(() => {
console.timeEnd("timer2");
}, 2000);
// timer1: 1004.666259765625 ms
// timer2: 2004.654052734375 ms
2. console.timeLog()
Здесь console.timeEnd() выше console.timeLog() похожа, но есть определенные отличия. Им обоим нужно использовать console.time() для запуска таймера. Затем console.timeLog() должен распечатать таймерТекущее время, а console.timeEnd() должен печатать таймер до времени окончания. Вот пример:
console.time("timer");
setTimeout(() => {
console.timeLog("timer")
setTimeout(() => {
console.timeLog("timer");
}, 2000);
}, 1000);
// timer: 1002.80224609375 ms
// timer: 3008.044189453125 ms
И при использовании console.timeEnd():
console.time("timer");
setTimeout(() => {
console.timeEnd("timer")
setTimeout(() => {
console.timeLog("timer");
}, 2000);
}, 1000);
Результат печати следующий:
Как видите, он остановит текущий таймер, поэтому встроенный timeLog не сможет найти счетчик таймера. Таким образом, разница между ними заключается в том, будет ли прекращено текущее время.
3. Групповая печать
1. console.group() & console.groupEnd()
Эти два метода используются для создания информационного пакета на консоли. Полный информационный пакет для запуска console.group(), конца console.groupEnd(). Рассмотрим следующий пример:
console.group();
console.log('First Group');
console.group();
console.log('Second Group')
console.groupEnd();
console.groupEnd();
Результат печати следующий:
Рассмотрим более сложный вариант:
console.group("Alphabet")
console.log("A");
console.log("B");
console.log("C");
console.group("Numbers");
console.log("One");
console.log("Two");
console.groupEnd("Numbers");
console.groupEnd("Alphabet");
Результат печати следующий:
Как видите, эти группы могут быть вложенными. В настоящее время нам нужно отлаживать большое количество отладочной информации, мы можем использовать сгруппированный вывод,
2. console.groupCollapsed()
Метод console.groupCollapsed() похож на console.group(), оба из которых требуют использования console.groupEnd() для завершения группировки. Разница в том, что информация, напечатанная этим методом, по умолчанию отображается свернутой, а group() по умолчанию развернута. Чтобы переписать приведенный выше пример:
console.groupCollapsed("Alphabet")
console.log("A");
console.log("B");
console.log("C");
console.groupCollapsed("Numbers");
console.log("One");
console.log("Two");
console.groupEnd("Numbers");
console.groupEnd("Alphabet");
Результат печати следующий:
Видно, что единственным отличием от вышеописанного метода является то, что распечатанный результат свернут и его нужно развернуть вручную.
4. Количество распечаток
1. console.count()
Вы можете использовать console.count(), чтобы получить текущее количество выполнений. Рассмотрим следующий пример:
for (i = 0; i < 5; i++) {
console.count();
}
// 输出结果如下
default: 1
default: 2
default: 3
default: 4
default: 5
Он также может передать параметр для отметки (если пусто, метка по умолчанию по умолчанию):
for (i = 0; i < 5; i++) {
console.count("hello");
}
// 输出结果如下
hello: 1
hello: 2
hello: 3
hello: 4
hello: 5
Этот метод в основном используется в некоторых более сложных сценариях.Иногда функция вызывается в нескольких местах, и этот метод можно использовать для определения того, вызывается ли метод реже или чаще.
2. console.countReset()
Как следует из названия, console.countReset() предназначена для сброса калькулятора, который нужно будет использовать в сочетании с описанным выше методом console.count(). Он имеет необязательную метку параметра:
- Если указана метка аргумента, эта функция сбрасывает счетчик, связанный с меткой, и сбрасывает счетчик на 0.
- Если метка параметра опущена, эта функция сбрасывает счетчик по умолчанию, который сбрасывает счетчик на 0.
console.count();
console.count("a");
console.count("b");
console.count("a");
console.count("a");
console.count();
console.count();
console.countReset();
console.countReset("a");
console.countReset("b");
console.count();
console.count("a");
console.count("b");
Результат печати следующий:
default:1
a:1
b:1
a:2
a:3
default:2
default:3
default:1
a:1
b:1
5. Другая печать
1. console.table()
Обычно мы часто используем console.log.На самом деле, у объекта консоли есть много свойств, которые можно использовать, например, console.table(), которая может легко распечатать свойства объекта массива, а результатом печати будет таблица. Метод console.table() имеет два параметра, первый параметр — это объект для печати, второй параметр — заголовок таблицы для печати, здесь — значение свойства объекта массива. Рассмотрим следующий пример:
const users = [
{
"first_name":"Harcourt",
"last_name":"Huckerbe",
"gender":"Male",
"city":"Linchen",
"birth_country":"China"
},
{
"first_name":"Allyn",
"last_name":"McEttigen",
"gender":"Male",
"city":"Ambelókipoi",
"birth_country":"Greece"
},
{
"first_name":"Sandor",
"last_name":"Degg",
"gender":"Male",
"city":"Mthatha",
"birth_country":"South Africa"
}
]
console.table(users, ['first_name', 'last_name', 'city']);
Результат печати следующий:
Таким образом, указанные свойства в объекте массива могут быть видны более четко.
Кроме того, вы также можете использовать console.table() для печати элементов массива:
const app = ["facebook", "google", "twitter"];
console.table(app);
Результат печати следующий:Таким образом, мы можем более четко видеть элементы в массиве.
Обратите внимание, что console.table() может обрабатывать не более 1000 строк, поэтому он может не подходить для всех наборов данных. Но его также можно применить к большинству сценариев.
2. console.clear()
console.clear() Как следует из названия, он очищает информацию с консоли. Когда консоль очищена, она напечатает предложение: «Консоль очищена»:
Конечно, мы можем использовать клавишу очистки консоли, чтобы очистить консоль:
3. console.assert()
Метод console.assert() используется для утверждения утверждения, когда утверждение ложно, сообщение об ошибке выводится на консоль. Его синтаксис следующий:
console.assert(expression, message)
Имеет два параметра:
- выражение: Условный оператор, оператор будет проанализирован как логическое значение, и если оно ложно, будет запущен вывод оператора сообщения;
- сообщение: оператор вывода, который может быть любого типа.
Этот метод будет печатать информацию о сообщении, когда условный оператор выражения является ложным. Метод console.assert() можно использовать, когда оператор выводится только при определенных обстоятельствах.
Например, когда количество дочерних узлов элемента списка больше или равно 100, выводится сообщение об ошибке:
console.assert(list.childNodes.length < 100, "Node count is > 100");
Результат показан на следующем рисунке:
4. console.trace()
Метод console.trace() можно использовать для печати пути вызова текущего исполняемого кода в стеке. У него та же функция, что и у console.error() выше, но стиль печати такой же, как у console.log(). Рассмотрим следующий пример:
function a() {
b();
}
function b() {
console.trace();
}
function c() {
a();
}
c();
Результат печати следующий:
Как видите, здесь выводится информация стека вызовов: b→a→c, и эта информация стека начинается с позиции вызова.
5. console.dir()
Метод console.dir() может отображать свойства указанного объекта JavaScript в консоли и отображать их через интерактивный список, подобный файловому дереву. Его синтаксис следующий:
console.dir(object);
Его параметр является объектом, и в итоге будут распечатаны все атрибуты и значения атрибутов объекта.
В большинстве случаев использование console.log() имеет тот же эффект. Но при печати структуры элемента есть большая разница: console.log() печатает DOM-структуру элемента, а console.dir() печатает атрибуты элемента:
6. console.dirxml()
Метод console.dirxml() используется для отображения дерева взаимодействия явного элемента XML/HTML, включая все элементы-потомки. Если его нельзя отобразить как элемент, вместо него используется объект JavaScript. Его вывод представляет собой унаследованный расширенный список узлов, который позволяет вам видеть содержимое дочерних узлов. Его синтаксис следующий:
console.dirxml(object);
Этот метод выводит элементы XML и их потомков.Вызовы console.log() и console.dirxml() эквивалентны для элементов XML и HTML.
7. console.memory
console.memory — это свойство объекта консоли, а не метод. Его можно использовать для просмотра текущего использования памяти.Если вы используете слишком много console.log(), это займет больше памяти и приведет к зависанию браузера.