[Перевод] вы не знаете консольную команду

• Оригинальный адрес:Beyond console.log()
• Оригинальный автор:Matt Burgess
• Перевод с:Программа перевода самородков
• Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
• Переводчик:Pomelo1213
• Корректор:RicardoCao-Biker, CoderMing

Существует больше способов отладки JavaScript, чем использование console.log для вывода значений. Вы думали, что я буду говорить об отладчиках? Нет нет нет вы не правы.

Сказать людям, которые пишут JavaScript, что они должны использовать отладчик браузера для отладки своего кода, кажется хорошей идеей, и, безусловно, она имеет свое время и место. Но в большинстве случаев вы просто хотите увидеть, выполняется ли конкретный фрагмент кода или каково значение переменной, вместо того, чтобы заблудиться в глубинах кодовой базы RxJS или библиотеки Promise.

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

console.log()

Многие не знают, что классический console.log на самом деле обладает богатыми функциональными возможностями. Хотя большинство людей используют толькоconsole.log(object)этот синтаксис, но вы все равно можете написатьconsole.log(object, otherObject, string)И печатает все аккуратно. Иногда это действительно удобно.

Более того, вот еще один формат:console.log(msg, values). Эта реализация такая же, как C или PHP.sprintfочень похожий.

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

выведет именно то, что вы ожидаете.

> I like Skittles but I do not like pus.

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

Еще одна интересная вещь, о которой вы, возможно, не подумали.%c. На самом деле он действует как заполнитель для значений 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');

Вот вывод элемента ввода журнала:

У меня открыты некоторые узлы элементов. Узлы DOM четко отображаются с первого взгляда, и мы также можем перейти к дочерним узлам DOM. ноconsole.dir(element)дает нам неожиданно другой результат.

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

console.warn()

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

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

console.table()

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

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

const transactions = [{
  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()Первый параметрfalseyвремя иlog()Такой же. Также ничего не делает, когда первый аргумент истинен.

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

if (object.whatever === 'value') {
  console.log(object);
}

Чтобы уточнить, когда я сказал «то же самое», я должен был сказать сделатьНапротивиметь значение. Значит, нужно изменить ситуацию.

Итак, предположим, что наше значение выше имеет отметку времени.nullили0, что нарушит форматирование даты в нашем коде.

console.assert(tx.timestamp, tx);

когда и любойэффективныйпропускается при использовании с объектом Thing. Но есть один, который запускает нашу регистрацию, потому что временная метка равна 0 и nullложное значение.

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

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

Выглядит правильно, но не работает. Помните, сцена должна быть негативной, я хочуутверждение, вместофильтр.

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

Это то, что мы хотим сделать. В таком случае всенетВсе транзакции для клиента WAL0412 верны, оставлены только те, которые совпадают. Или не совсем.

Такой,console.assert()Не всегда очень полезно. Однако в конкретной сцене это будет самым элегантным решением.

console.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.count(), никаких параметров не требуется. использоватьdefaultпередача.

Есть еще ассоциативные функции.console.countReset(), который можно использовать, если вы хотите сбросить счетчик.

console.trace()

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

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

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

используется только здесьconsole.log()Мы можем знать только, какая базовая библиотека выполняется, но не конкретное место выполнения. Однако трассировка стека ясно скажет нам, что проблема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.log выше. Большинство людей не понимают, что здесь можно было использовать шаблонные строки и интерполяцию. Это поможет вам время от времени.

Итак, давайте обновим код выше.

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);

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

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

Эпилог

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

Пожалуй, самый полезныйconsole.table, но другие методы также имеют свои применимые сценарии. Я очень хочу использовать, когда мы хотим что-то отладитьconsole.assert, но только в некоторых частных случаях.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

---

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из ИнтернетаНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.