В нашей повседневной фронтенд-разработке наиболее часто используется использованиеconsole.logВывести информацию, необходимую для отладки, в консоль браузера, но большинство людей могут быть такими же, как я раньше, не понимая, чтоconsoleКромеlogВ дополнение к методу есть много практических методов, которые могут сделать наш процесс отладки более простым, интуитивно понятным и красочным.Давайте взглянем на некоторые практические методы!
1. консоль.лог()
мы часто используемconsole.logЧтобы распечатать значение переменной или объекта сущности, вы также можете передать несколько переменных параметров, и они будут напечатаны в том порядке, в котором они были переданы:
1. 传入一个变量
const a = 1;
console.log(a); // -> 1
2. 传入一个对象
const foo = {a: 1};
console.log(foo); // -> {a: 1}
3. 传入多个变量
console.log(a, foo); // -> 1 {a: 1}
В дополнение к этому, он также поддерживаетформатированная печатьфункция, переходящая в определеннуюЗаполнительДля форматирования параметров используются следующие общие заполнители:
-
%s: заполнитель строки -
%d: целочисленный заполнитель -
%f: заполнитель числа с плавающей запятой -
%o: заполнитель объекта (обратите внимание на буквуo, а не число0) -
%c: CSS Style Plactholder
const string = 'Glory of Kings';
const number = 100;
const float = 9.5;
const obj = {name: 'daji'};
1、%s 字符串占位符
console.log('I do like %s', string); // -> I do like Golry of Kings.
2、%d 整数占位符
console.log('I won %d times', number); // -> I won 100 times.
3、%f 浮点数占位符
console.log('My highest score is %f', float); // -> My highest score is 9.5
4、%o 对象占位符
console.log('My favorite hero is %o', obj); // -> My favorite hero is {name: 'daji'}.
5、%c CSS样式占位符
console.log('I do like %c%s', 'padding: 2px 4px;background: orange;color: white;border-radius: 2px;', string);
Эффект заполнителя стиля CSS выглядит следующим образом:
2. консоль.предупреждать()
Вы можете полностью использоватьconsole.warnзаменитьconsole.logметод, но предпосылка заключается в том, что информация для печати относится к уровню предупреждения, а не к нормальному уровню информации, поэтому браузер будет обрабатывать ее по-разному при обнаружении сообщения уровня предупреждения.Наиболее очевидным является то, что слева будет значок предупреждения сторона его, и цвет фона И цвет текста также будет другим.
warningПанель, а неinfoНа панели это также помогает нам быстро отфильтровать предупреждающую информацию в наборе информации для печати для удобного просмотра.
3. console.dir()
В большинстве случаевconsole.dirметод иconsole.logЭффект похож, но есть небольшая разница.
console.logДетали метода распечатают результаты полного отображения, ноconsole.dirМетод просто распечатывает, не будет запускать подробную информацию, конечно, хотелось бы увидеть следующую информацию и нажать на прежнюю.
Единственная разница заключается в относительно большом месте, когда мы печатаем узел документа HTML, будет совершенно другая форма выражения. Например, мы используемconsole.logпечататьbodyЭтикетка:console.dirспособ попробовать:4. консоль.таблица()
При разработке нашего проекта мы часто сталкиваемся с данными списка в виде массивов объектов, в процессе отладки мы можем использоватьconsole.logЭтот метод распечатывает эти данные для просмотра, но по сравнению с первым, его также можно распечатать относительно наглядным образом. Например, здесь подготовлены некоторые данные списка:
const response = [
{
id: 1,
name: 'Marry',
age: 18,
sex: 0
},
{
id: 2,
name: 'John',
age: 20,
sex: 1
}
];
Затем мы используемconsole.logпечатать:
console.tableпечатать:console.tableВторой необязательный параметр предназначен для фильтрации столбцов, отображаемых в таблице.По умолчанию отображаются все столбцы.5. console.assert()
assertТо есть утверждается, что метод получает несколько параметров, первый из которых является входным выражением, только если значение выражения равноfalse, остальные параметры будут выведены в консоль.
arr.length > 5значениеfalse, поэтому печатается следующая информация. Если в некоторых сценариях вам нужно оценить, соответствуют ли текущие данные определенному условию, вы также можете использоватьconsole.assert()метод для просмотра информации об утверждении в консоли.
6. Console.traace ()
Этот метод используется для отображения пути вызова текущего кода в стеке в консоли.По этому пути вызова мы можем легко найти исходную точку ошибки при возникновении ошибки.Пример следующий:
function foo(data) {
if (data === null) {
console.trace();
return [];
}
return [data.a, data.b];
}
function bar1(data) {
return foo(data);
}
function bar2(data) {
return foo(data);
}
bar1({a: 1, b: 2}); // -> [1, 2]
bar2(null); // -> []
В приведенном выше коде мы соответственноbar1а такжеbar2вызов функцииfooфункции и передавать разные параметры, очевидноbar2Когда функция выполнится, она войдетifзаявление и выполнитьconsole.trace()метод, в консоли выводится следующий результат:
bar2В функцию был передан недопустимый параметрnullвызвать ошибку, чтобы мы могли отследить исходное местоположение ошибки.
7. console.count()
Этот метод эквивалентен счетчику, который используется для записи количества вызовов и вывода результата на консоль. который принимает необязательный параметрconsole.count(label),labelУказывает заданную метку, которая будет отображаться перед количеством звонков, например:
for (let i = 1;i <= 5;i++) {
if (!(i % 2)) {
console.count('even');
} else {
console.count('odd');
}
}
в коде, еслиiчетное число, тоevenсчетчик для подсчета, в противном случае дляoddСчетчик считает, и после выполнения мы увидим в консоли следующий список:
odd: 1
even: 1
odd: 2
even: 2
odd: 3
8. console.time() и console.timeEnd()
Эти два метода обычно используются вместе и являются специальными функциями в JavaScript, используемом для отслеживания времени выполнения программы.console.timeметод используется в качестве времени начала расчета,console.timeEndвремя окончания расчета, а время выполнения отображается на консоли. Если страница должна использовать калькулятор в нескольких местах, вы можете передать методу необязательный параметр.labelчтобы указать метку, которая будет отображаться перед временем выполнения. В прошлом, когда мы рассчитывали время выполнения программы, мы обычно использовали следующие методы:
const startTime = performance.now();
let sum = 0;
for(let i = 0;i < 100000;i++) {
sum += i;
}
const diffTime = performance.now() - startTime;
console.log(`Execution time: ${ diffTime }`);
Это более традиционный подход, мы также можем использоватьconsole.timeреализовать:
console.time('sum');
let sum = 0;
for(let i = 0;i < 100000;i++) {
sum += i;
}
console.timeEnd('sum');
Консольный эффект выглядит следующим образом:
9. console.group() и console.groupEnd()
Как следует из названия, информация о данных группируется, гдеconsole.group()Метод используется для установки начальной позиции информации о группе, вся информация после этой позиции будет записана в группу,console.groupEnd()Метод используется для завершения текущей группировки, примеры следующие:
class MyClass {
constructor() {
console.group('Constructor');
console.log('Constructor executed');
this.init();
console.groupEnd();
}
init() {
console.group('init');
console.log('init executed');
console.groupEnd();
}
}
const myClass = new MyClass();
Консольный эффект выглядит следующим образом:
10. Превратите браузер в редактор
В большинстве случаев, когда мы отлаживаем структуру DOM или редактируем некоторый текст в браузере, мы редактируем узел DOM в параметре «Элементы» инструментов разработчика Chrome, но как только узлов становится слишком много, это легко увеличивает сложность отладки. Здесь мы можем использовать способ прямого преобразования браузера в режим редактирования:
document.body.contentEditable = true;
После ввода приведенного выше кода в консоли весь контент в браузере можно сделать доступным для редактирования, и эффект будет следующим:
11. API командной строки Chrome
Google Chrome Command Line API включает в себя набор удобных функций для выполнения следующих общих задач: выбор и проверка элементов DOM, отображение данных в удобочитаемом формате, остановка и запуск анализаторов и мониторинг событий DOM.
Примечание. Доступ к этому API возможен только через консоль браузера, и к нему нельзя получить доступ через веб-скрипты.
11.1 Выбор элементов DOM
Когда мы используем jQuery, мы можем передавать различные селекторы, такие как$('#id')а также$('.class')чтобы выбрать соответствующий элемент DOM, но мы могли бы сделать то же самое в консоли Chrome, если бы не включали jQuery. API командной строки Chrome предоставляет следующие способы выбора элементов DOM:
-
$(selector): возвращает первую ссылку на элемент DOM, соответствующий указанному селектору CSS, что эквивалентноdocument.querySelector()функция. -
?(selector): возвращает массив элементов DOM, соответствующих указанному селектору CSS, что эквивалентноdocument.querySelectorAll()функция. -
$x(path): возвращает массив элементов DOM, соответствующих заданному выражению XPath.
$x('//p[a]') означает, что возврат содержит
<a>все элементы<p>элемент.
11.2 Получение значения последнего результата
Мы часто выполняем некоторые расчеты в консоли. В некоторых случаях может потребоваться отследить результаты предыдущих расчетов для последующих расчетов.$_Флаги можно использовать для возврата значения последнего вычисленного выражения, например:
1 + 2 + 3 + 4 // -> 10
$_ // -> 10
$_ * $_ // -> 100
Math.sqrt($_) // -> 10
$_ // -> 10
11.3 Поиск событий, связанных с указанным элементом DOM
Когда нам нужно найти все события, связанные с элементом в DOM, консоль обеспечиваетgetEventListenersметоды, которые помогут нам найти эти связанные события.
getEventListeners($('selector'))Возвращает прослушиватели событий, зарегистрированные в указанном элементе DOM. Возвращаемое значение — это объект, объектkeyдля соответствующего типа события (например,click,focus), объектvalueпредставляет собой массив, содержащий все прослушиватели событий для соответствующего типа события. Например, следующие спискиdocumentВсе прослушиватели событий зарегистрированы на:
// eventName表示对应的事件类型
// index表示该事件类型下的事件监听器数组的索引
getEventListeners($('selector')).eventName[index].listener
// 例如获取document下click事件监听器数组的第一项
getEventListeners(document).click[0].listener
11.4 Мониторинг событий
Если вы хотите отслеживать события, связанные с определенными элементами в DOM, по мере их выполнения, консоль предоставляетmonitorEventsметоды, помогающие отслеживать некоторые или все эти события с помощью различных команд:
-
monitorEvents($('selector')): будет отслеживать все события, связанные с элементами, соответствующими селектору, и выводить их на консоль при их запуске. НапримерmonitorEvents($('#content'))будет контролироватьidдляcontentВсе события, связанные с элементом. -
monitorEvents($('selector'), 'eventName'): будет следить за определенным событием в элементе, соответствующем селектору. Например,monitorEvents($('#content'), 'click')будет контролироватьidдляcontentэлемент, связанный сclickмероприятие. -
monitorEvents($('selector'), [eventName1, eventName2, ...]): Будут наблюдать за некоторыми конкретными событиями элемента, сопоставленного селектором. Разница из вышеизложенного состоит в том, что второй элемент может проходить в строковом массиве, содержащем все имена типов событий, которые необходимо контролировать, чтобы добиться цели пользовательского мониторинга. НапримерmonitorEvents($('#content'), ['click', 'focus'])будет контролироватьidдляcontentэлемент, связанный сclickа такжеfocusмероприятие. -
unmonitorEvents($('selector')): прекратит отслеживать все события, связанные с элементами, которые соответствуют селектору. НапримерunmonitorEvents($('#content'))прекратит мониторингidдляcontentВсе события, связанные с элементом.
Схема эффекта выглядит следующим образом:
11.5 Проверка элементов DOM
консоль предоставляетinspect()методы позволяют нам проверять элемент DOM непосредственно из консоли.
-
inspect($('selector')): проверит элементы, соответствующие селектору, и автоматически перейдет на вкладку «Элементы» инструментов разработчика Chrome. Напримерinspect($('#content'))будет провереноidдляcontentЭлементы.
Схема эффекта выглядит следующим образом:
общаться с
В этой статье в основном рассказывается о некоторых навыках отладки консоли, которые, по мнению автора, хороши. Я надеюсь, что это поможет вам в процессе отладки вашего внешнего кода. Если вы считаете, что статья хороша, добро пожаловать, чтобы обратить внимание на публичный аккаунт автора. , и это будет оригинально и организовано каждую неделю Некоторые передовые технологии галантереи, я надеюсь общаться с вами, учиться друг у друга и вместе добиваться прогресса.
Статья обновлена доБлог на гитхабе, Если вы считаете, что статья приемлема, добро пожаловать!
Один из ваших лайков заслуживает моих дополнительных усилий!
Вырастая перед лицом невзгод, только постоянно учась, вы можете стать лучшей версией себя и поощрять себя!