Гибкое использование консоли упрощает отладку js

Переводчик: Front-end Xiaozhi

оригинал:medium.com/@Matt не так хорош, как формат… medium.free код camp.org/10-tips-to-…

Наиболее часто используемая высота для веб-разработкиconsole.log,Несмотря на то чтоconsole.logИмеет место, но многие этого не осознаютconsoleВ дополнение к основномуlogКроме методов есть много других методов. Правильное использование этих методов может сделать отладку более простой, быстрой и интуитивно понятной.

console.log()

существуетconsole.logЕсть много неожиданных особенностей. Хотя большинство людей используютconsole.log(object)для просмотра объектов, но вы также можете использоватьconsole.log(object, otherObject, string), он будет регистрировать их все аккуратно и иногда удобно.

Мало того, есть еще один отформатированный:console.log(msg, values), как в C или PHPsprintf.

console.log('I like %s but I do not like %s.', 'Skittles', 'pus');

выведет, как и следовало ожидать:

> I like Skittles but I do not like pus.

общие заполнители%o(это буква о, а не 0), принимает предметы,%sпринимает строки,%dПредставляет десятичное или целое число.

Еще одно интересное%c, что может быть не совсем тем, что вы думаете, на самом деле это заполнитель для значений CSS. При использовании заполнителя %c соответствующий следующий параметр должен быть оператором CSS, который используется для отображения выходного содержимого с помощью CSS. Существует два распространенных метода вывода:文字样式、图片输出.

console.log('I am a %cbutton', 'color: white; background-color: orange; padding: 2px 5px; border-radius: 2px');

Это не элегантно и не особенно полезно. Конечно, это не совсем кнопка.

Это работает? Извините.

console.dir()

В большинстве случаевconsole.dir()Функция очень похожа наlog(), хотя выглядит немного иначе.

Маленькая стрелка раскрывающегося списка покажет те же сведения об объекте, что и выше, к которым также можно получить доступ изconsole.logверсию видел. Когда вы посмотрите на структуру элементов, вы увидите, что они более разные и более интересные.

let element = document.getElementById('2x-container');

использоватьconsole.logПроверять:

Открыто несколько элементов, что ясно показывает DOM, по которому мы можем перемещаться. ноconsole.dir(element)Это дает вывод для более удобного просмотра структуры DOM:

Это более объективный способ взглянуть на элементы. Иногда это может быть то, что вам действительно нужно, больше похоже на проверку элемента.

console.warn()

Вероятно, самая очевидная заменаlog(), вы можете использовать точно так жеconsole.warn(). Единственная реальная разница в том, что цвет выходного слова желтый. В частности, вывод находится на уровне предупреждения, а не на уровне информации, поэтому браузеры будут обрабатывать его немного по-другому. Это делает его более заметным в загроможденном выводе.

Однако есть еще большее преимущество, потому что вывод представляет собой предупреждение, а не информацию, поэтому вы можете отфильтровать всеconsole.logи держи толькоconsole.warn. Это особенно полезно для приложений, которые время от времени выводят в браузер много бесполезной хрени. Удаление некоторой бесполезной информации облегчает просмотр желаемого результата.

console.table()

Удивительно, но он не более известен, ноconsole.table()Эта функция предназначена для более аккуратного отображения табличных данных, чем просто вывод массива необработанных объектов.

Например, вот список данных.

const data = [{
  id: "7cb1-e041b126-f3b8",
  seller: "WAL0412",
  buyer: "WAL3023",
  price: 203450,
  time: 1539688433
},
{
  id: "1d4c-31f8f14b-1571",
  seller: "WAL0452",
  buyer: "WAL3023",
  price: 348299,
  time: 1539688433
},
{
  id: "b12c-b3adf58f-809f",
  seller: "WAL0012",
  buyer: "WAL2025",
  price: 59240,
  time: 1539688433
}];

если мы используемconsole.logчтобы вывести приведенное выше, мы получаем довольно бесполезный вывод:

▶ (3) [{…}, {…}, {…}]

При нажатии на эту маленькую стрелку раскрывается содержимое объекта, однако это не тот «краткий обзор», который нам нужен.

ноconsole.table(data)Результат гораздо полезнее.

Второй необязательный параметр — это список обязательных столбцов. Очевидно, что все столбцы являются значениями по умолчанию, но мы можем сделать и это:

> console.table(data, ["id", "price"]);

Здесь следует отметить, что это не по порядку - стрелка в заголовке крайнего правого столбца показывает, почему. Я нажимаю на этот столбец для сортировки. Очень удобно находить максимальное или минимальное значение столбца или просто иметь другое представление данных. Кстати, функция не имеет ничего общего с отображением каких-то колонок, она всегда доступна.

console.table()Может обрабатывать только до 1000 строк, поэтому может не подходить для всех наборов данных.

console.assert()

assert()иlog()та же функция,assert()Он утверждает входное выражение. Только когда выражение ложно, соответствующая информация выводится на консоль. Пример выглядит следующим образом:

var arr = [1, 2, 3];
console.assert(arr.length === 4);

Иногда нам нужны более сложные условные операторы. Например, мы видели пользователейWAL0412проблемы с данными и хотите отображать только транзакции из этих данных, это интуитивно понятное решение.

console.assert(tx.buyer === 'WAL0412', tx);

Это выглядит хорошо, но это не работает. Помните, условие должно бытьfalse, утверждение будет выполнено, и изменения будут следующими:

console.assert(tx.buyer !== 'WAL0412', tx);

Подобно некоторым из них,console.assert()Не всегда особенно полезно. Но в конкретных случаях это может быть элегантным решением.

console.count()

Еще один счетчик специального назначения, count просто действует как счетчик или как именованный счетчик для подсчета количества выполнений кода.

for(let i = 0; i < 10000; i++) {
  if(i % 2) {
    console.count('odds');
  }
  if(!(i % 5)) {
    console.count('multiplesOfFive');
  }
  if(isPrime(i)) {
    console.count('prime');
  }
}

Это бесполезный код и немного абстрактный. Не буду здесь демонстрироватьisPrimeфункцию, если она выполняется.

После выполнения получаем список:

odds: 1
odds: 2
prime: 1
odds: 3
multiplesOfFive: 1
prime: 2
odds: 4
prime: 3
odds: 5
multiplesOfFive: 2
...

Существует также связанныйconsole.countReset(), вы можете использовать его для сброса счетчика.

console.trace()

trace()Это трудно продемонстрировать на простых данных. Его преимущество возникает, когда вы пытаетесь выяснить в классе или библиотеке, какой фактический вызывающий объект вызывает проблему.

Например, может быть 12 различных компонентов, вызывающих службу, но у одного из них не настроена правильно зависимость.

export default class CupcakeService {
    
  constructor(dataLib) {
    this.dataLib = dataLib;
    if(typeof dataLib !== 'object') {
      console.log(dataLib);
      console.trace();
    }
  }
  ...
}

использовать здесьconsole.log()просто скажите нам передать данныеdataLibэто то, что передается без определенного пути. но,console.trace()очень четко скажет нам, что проблемаDashboard.js, мы видим, что этоnew CupcakeService(false)вызвать ошибку.

console.time()

console.time()— это специальная функция для отслеживания времени работы, это хороший способ отслеживать время выполнения JavaScript.

function slowFunction(number) {
  var functionTimerStart = new Date().getTime();
  // something slow or complex with the numbers. 
  // Factorials, or whatever.
  var functionTime = new Date().getTime() - functionTimerStart;
  console.log(`Function time: ${ functionTime }`);
}
var start = new Date().getTime();

for (i = 0; i < 100000; ++i) {
  slowFunction(i);
}

var time = new Date().getTime() - start;
console.log(`Execution time: ${ time }`);

Это старая школьная практика, мы используемconsole.time()чтобы упростить приведенный выше код.

const slowFunction = number =>  {
  console.time('slowFunction');
  // something slow or complex with the numbers. 
  // Factorials, or whatever.
  console.timeEnd('slowFunction');
}
console.time();

for (i = 0; i < 100000; ++i) {
  slowFunction(i);
}
console.timeEnd();

Нам больше не нужно делать какие-либо вычисления или устанавливать временные переменные.

console.group()

// this is the global scope
let number = 1;
console.group('OutsideLoop');
console.log(number);
console.group('Loop');
for (let i = 0; i < 5; i++) {
  number = i + number;
  console.log(number);
}
console.groupEnd();
console.log(number);
console.groupEnd();
console.log('All done now');

Результат выглядит следующим образом:

Не очень полезно, но вы можете видеть, как некоторые из них сочетаются друг с другом.

class MyClass {
  constructor(dataAccess) {
    console.group('Constructor');
    console.log('Constructor executed');
    console.assert(typeof dataAccess === 'object', 
      'Potentially incorrect dataAccess object');
    this.initializeEvents();
    console.groupEnd();
  }
  initializeEvents() {
    console.group('events');
    console.log('Initialising events');
    console.groupEnd();
  }
}
let myClass = new MyClass(false);

Код с большим количеством отладочной информации может быть не таким уж полезным. Но по-прежнему интересная идея писать таким образом, чтобы сделать ваш журнал более понятным.

выберите DOM-элемент

Если вы знакомы с jQuery, то знаете, насколько важны селекторы $('.class') и $('#id'). Они выбирают элементы DOM на основе связанного с ними класса или идентификатора.

Но вы все равно можете сделать то же самое в консоли разработчика Google, когда вы не ссылаетесь на jQuery.

$('tagName') $('.class') $('#id') и $('.class #id') эквивалентныdocument.querySelector(''), который возвращает первый элемент в DOM, соответствующий селектору.

Вы можете использовать ?(tagName) или ?(.class),Обратите внимание на двойной символ, который выбирает все элементы DOM на основе определенного селектора. Это также помещает их в массив, из которого вы также можете выбрать определенные элементы, указав положение этого элемента в массиве.

Например,?('.className')получить класс сclassNameвсе элементы , а\$\$(.className')[0]и?('.className')[1]Получите первый и второй элементы соответственно.

Превратить браузер в редактор

Сколько раз вы задавались вопросом, можете ли вы редактировать текст в своем браузере? Ответ — да, вы можете превратить свой браузер в текстовый редактор. Вы можете добавлять и удалять текст в любом месте DOM.

Вам больше не нужно проверять элементы и редактировать HTML. Вместо этого зайдите в консоль разработчика и введите следующее:

document.body.contentEditable=true 

Это сделает содержимое редактируемым. Теперь вы можете редактировать практически все в DOM.

Найти события, связанные с элементами в DOM

При отладке, когда вам нужно найти прослушиватель событий для элемента в DOM, консоль GooglegetEventListenersДелает поиск этих событий более простым и интуитивно понятным.

getEventListeners($(‘selector’))Возвращает массив объектов, содержащий все события, связанные с этим элементом. Вы можете развернуть объект, чтобы увидеть события:

Чтобы найти слушателя для определенного события, вы можете сделать это:

getEventListeners($(‘selector’)).eventName[0].listener 

Это покажет слушателей, связанных с конкретным событием. здесьeventName[0]представляет собой массив, в котором перечислены все события для определенного события. Например:

getEventListeners($(‘firstName’)).click[0].listener 

будет отображаться с идентификатором как‘firstName’Слушатель, связанный с событием щелчка элемента.

отслеживать события

Вы также можете сделать это в консоли, если хотите отслеживать события, связанные с определенными элементами в DOM, по мере их выполнения. Вы можете отслеживать некоторые или все эти события с помощью различных команд:

Вы также можете сделать это в консоли, если хотите отслеживать события, связанные с определенными элементами в DOM, по мере их выполнения. Вы можете отслеживать некоторые или все эти события с помощью различных команд:

• monitorEvents($(‘selector’))Все события, связанные с элементами селектора, будут отслеживаться, а затем выводиться на консоль при их запуске. Например,monitore($(#firstName))будет печататьIDзаfirstNameВсе события элемента.

• monitorEvents($(‘selector’),’eventName’)Будет напечатано конкретное событие, привязанное к элементу. Вы можете передать имя события в качестве параметра функции. Это будет регистрировать только определенные события, связанные с определенными элементами. Например, monitorEvents($('#firstName'),'click') напечатает все события, связанные с элементом с идентификатором 'firstName'.clickсобытие.

• monitore($(selector)，[eventName1, eventName3'， .])Несколько событий будут регистрироваться в соответствии с вашими потребностями. Вместо того, чтобы передавать в качестве параметра одно имя события, передайте массив строк, содержащих все события. Напримерmonitore($(#firstName)，[click, focus])Привязать запись к элементу ID firstNameclickсобытия иfocusсобытие.

• unmonitorevent ($(selector)): Это прекратит мониторинг и печать событий в консоли.

Проверить элемент в DOM

Вы можете проверить элемент прямо из консоли:

• inspect(('#имя'))将检查 ID为'firstName' 的元素，спектр($('а')3)将检查 DOM 中的第 4 个элемент.

• $0, $1, $2 и т. д. могут помочь вам получить самые последние проверенные элементы. Например,$0представляет последний проверенный элемент DOM, и$1Предпоследний элемент DOM для проверки.

Получить значение последнего результата

Вы можете использовать консоль как калькулятор. Когда вы сделаете это, вам может понадобиться использовать второй, чтобы отслеживать вычисления. Вот как получить результаты предыдущих вычислений из памяти:

$_ 

Процесс выглядит следующим образом:

2+3+4
9 //- The Answer of the SUM is 9

$_
9 // Gives the last Result

$_ * $_
81  // As the last Result was 9

Math.sqrt($_)
9 // As the last Result was 81

$_
9 // As the Last Result is 9

Очистить консоль и память

Если вы хотите очистить консоль и ее память, введите следующее:

 clear()

Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.

Ваши лайки - моя мотивация продолжать делиться хорошими вещами, ставьте лайки!

общаться

Статьи из серии галантереи резюмируются следующим образом: если вы чувствуете себя хорошо, нажмите «Звезда», добро пожаловать в группу, чтобы учиться друг у друга.

GitHub.com/QQ449245884…

Я Сяо Чжи, автор официального аккаунта "Moving the World",Продолжайте знакомить энтузиастов с передовыми технологиями. Я буду часто делиться тем, что я узнал и увидел, На пути продвижения, давайте подбадривать друг друга!

Обратите внимание на публичный аккаунт и отвечайте в фоновом режимеБлагосостояние, вы можете увидеть преимущества, вы знаете.