Эти 5 приемов console.log() помогут вам повысить производительность

JavaScript

Автор: Дмитрий Павлютин Переводчик: Front-end Xiaozhi Источник: дмитрипавлютин.

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

мы знаемconsole.log(message)Использование очень простое, это означает вывод сообщения параметра на консоль.

console.log('前端小智')
// 前端小智

const myAge = 28
console.log(myAge) // 28

Эта статья в основном знакомит5Полезный совет, который поможет вам при использованииconsole.log()повысить эффективность работы.

1. Распечатайте переменную полного имени

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

function sum(a, b) {
  console.log(b);
  return a + b;
}

sum(1, 2);
sum(4, 5);

После выполнения вышеуказанного кода мы видим только серию чисел:

Чтобы выразить отношение между значением и переменной, заключите переменную в фигурные скобки:{b}:

2. Расширенное форматирование

Самый распространенный способ вывести что-то в консоль — это просто вызвать с одним аргументомconsole.log():

console.log('前端小智') // 前端小智

Иногда нам может понадобиться сообщение с несколькими переменными. К счастью,console.log()можно использовать％s,％iи т. д. спецификатор начинается сsprintf()способ форматирования строки.

const user = '前端小智';
const attempts = 5;

console.log('%s 登录失败了 %i 次', user, attempts);
// 前端小智 登录失败了 5 次

％sа также％iодеялоuserа такжеattemptsзначение для замены. спецификатор％sпреобразуется в строку, а％iПреобразовать в числа.

Ниже приведен список доступных спецификаторов:

спецификатор эффект
%s элементы преобразуются в строки
%d или %i Элементы преобразуются в целые числа
%f Элементы преобразуются в плавающую точку
%o Элементы отображаются в наиболее эффективном формате
%O Элементы отображаются в наиболее эффективном формате
%c Предоставляемый приложением CSS

стиль печати со стилем

Консоль браузера позволяет нам применять стили к распечатываемым сообщениям, что мы можем сделать, добавив％cДля этого спецификатор используется вместе с соответствующим стилем CSS следующим образом:

console.log('%c Big message', 'font-size: 36px; font-weight: bold');

спецификатор％cПрименение стилей CSS'font-size: 36px; font-weight: bold'

4. Интерактивный дисплей

Стиль журнала зависит от реализации консоли хоста. картинаChromeа такжеFirefoxТакие браузеры обеспечивают интерактивное представление объектов и массивов, а вывод консоли Node — текст.

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

4.1 Objects

const myObject = {
  name: 'John Smith',
  profession: 'agent'
};

console.log(myObject);

В консоли ChromemyObjectПечать выглядит следующим образом:

Список свойств объекта можно разворачивать и сворачивать, а также можно увидеть прототип объекта.

4.2 Arrays

const characters = ['Neo', 'Morpheus', 'John Smith'];

console.log(characters);

4.3 Древовидная структура DOM

Мы можем напрямую взаимодействовать с элементами DOM, отображаемыми в консоли.

console.log(document.getElementById('root'));

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

4.4 Сообщения в интерактивном вложении

％oСпецификатор (который связывает правильный формат печати для значения) может вставлять массивы, объекты, элементы DOM и обычный текст в текстовые сообщения без потери интерактивности.

const myObject = {
  name: 'John Smith',
  profession: 'agent'
};

console.log('Neo, be aware of %o', myObject);

Из консоли,myObjectМассивы не преобразуются в строки, но остаются интерактивными.

  1. Печать больших объектов в консоли Node

в узлеlogВывод в виде простого текста. Однако в узлеconsole.log()Объекты с глубокой вложенностью не отображаются: объекты уровня 3 отображаются как[Object].

const myObject = {
  propA: {
    propB: {
      propC: {
        propD: 'hello'
      }
    }
  }
};

console.log(myObject);

При запуске скриптаpropCОбъект печатается как[Object]:

Чтобы увидеть полную структуру объекта, вы можете использовать JSON.stringify():

const myObject = {
  propA: {
    propB: {
      propC: {
        propD: 'hello'
      }
    }
  }
};

console.log(JSON.stringify(myObject, null, 2));

JSON.stringify(myObject, null, 2)Возвращает JSON-представление этого объекта, третий параметр2Установите размер отступа в пробелах.

Надеемся, что эти 5 советов помогут вам использоватьconsole.log()Опыт более эффективным.

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

оригинал:Рисовое путешествие avlutin.com/console-log…

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории