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

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

Напечатаем в консоли, чтобы посмотреть, какие еще магические методы у него есть:

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

1.console.log() печатает содержимое. Этот способ слишком знаком, и, наверное, именно он используется чаще всего! ! ! Я не буду говорить об основном использовании, но давайте поговорим о заполнителе console.log(). Есть пять заполнителей, а именно:

const name = 'chinaBerg';
const age = 88;
const money = 12.88;
const obj = {
    status: '很积极'
}

console.log('我叫%s，%d岁，有%f元，状态：%o', name, age, money, obj.status, '又打印一句话')

console.log('我叫' +  name + ' ,' + age +'岁，有' + money + '元')

console.log(`我叫${name}，${age}岁, 有${money}元`);

//例如，这里演示的：第一参数是拼接的字符串，第二参数插入字符串的浮点数
console.log('我叫' +  name + ' ,' + age +'岁，有%f元',  money)

// 注意这里字符串模板的最后插入了%f
console.log(`我叫${name}，${age}岁, 有%f元`, 12.88);

const css1 = 'font-size: 22px;font-weight: bold';
const css2 = 'border: 1px solid green';
const css3 = 'color: #fff;background: #f00';

// 占位符填入				
console.log('%c %s + %s = %s', css1, 1, 2, 3);
// 字符串拼接形式中插入%c占位符
console.log('%c我的名字叫' + name + ', 今年' + age + '岁', css2);
// es6字符串模板中插入%c占位符
console.log(`%c我叫${name}，${age}岁, 有%f元`, css3);

console.log('我是console.log()打印出来的');

console.info('我是console.info()打印出来的');

console.debug('console.debug()打印出来的')

const arr = [1, 2, 3];

// 打印断言，如果arr[0]的值不等于2，则打印提示信息
console.assert(arr[0] === 2, 'arr[0]的值不等于2');

for (let i = 0; i < 10; i++) {
    console.count('我被调用了');
}

for (let i = 0; i < 10; i++) {
    console.count(`我是${i}我被调用了`);
}

function fun (name) {
    console.count(name)
}
fun('小米');
fun('小刚');
fun('小米');

for (let i = 0; i < 10; i++) {
    // count()没传递提示标签
    console.count();
}

// 立即启动计时器
console.time()

// 某些操作
for (let i = 0; i < 10000; i++) {
    // 某些操作				
}

// 立即结束计时器，并输出计时结果
console.timeEnd()

// 立即启动计时器
console.time('time')

// 某些操作
for (let i = 0; i < 10000; i++) {
    // 某些操作				
}

// 立即结束计时器，并输出计时结果
console.timeEnd('time')

// 一个对象
const obj = {
    name: '某某渣',
    age: 22,
    sex: '男'
}

// dir打印
console.dir(obj);

// log打印
console.log(obj);

// dir打印
console.dir(document.body);

// log打印
console.log(document.body)

// console.groupCollapsed() + console.groupEnd()的形式，默认是折叠的
console.group('分第一组');
console.log('html')
console.dir({ type: '前端'}),
console.groupEnd('分第一组')

// console.group() + console.groupEnd() 默认是展开的
console.group('分第2组');
console.log('php')
console.dir({ type: '后台'}),
console.groupEnd('分第2组')

const arr = ['a', 'b'];
			
console.table(arr)

Печатать сложные массивы:

const arr = [
    {
        name: '小明',
        age: 22,
        likes: ['跳舞', '上网']
    },
    {
        name: '小刚',
        age: 23,
        likes: ['撸码', '计算机']
    }
];
				
console.table(arr)

объект печати:

const obj = {
    name: '小明',
    age: 22,
    likes: [
        {
            a: 1,
            b: 2
        },
        {
            a: 3,
            b: 4
        },
    ]
}
				
console.table(obj)

По результатам, выведенным с помощью console.table(), мы можем интуитивно увидеть состав данных.

---------------------------------------------------------------------

11.Console.trace() Путь для вызова этого метода в стеке.

Если вы хотите четко знать дорожку вызова функции, вы можете написать этот метод внутри функции, чтобы отслеживать дорожку вызова функции.Код реализован следующим образом:

function test(name) {
    console.trace(`此处调用了${name}`)
}
				
function doSome (name) {
    test(name);
}
				
doSome('翠花');

Консоль гугла выводит следующее:

Это распечатывает все местоположения стека, где test() вызывается в js. Сверху вниз это самый внутренний вызов самого внешнего вызова. Обычно, когда мы используем сторонние библиотеки, если запись неверна, мы часто можем увидеть наше сообщение об ошибке на консоли и распечатать информацию о стеке в неправильном месте, как здесь.

---------------------------------------------------------------------

12.console.warn() выводит предупреждающее сообщение

console.warn('我是一条警告')

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

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

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

---------------------------------------------------------------------

13.console.error() ошибка печати.

console.error('我这里出现了错误，我来告知用户')

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

Этот метод в основном используется для печати ошибок, а стиль результата печати показан выше. Тут нечего сказать, но если разрабатывать сторонние библиотеки, то можно использовать. ноthrowЕсть также много способов выдать ошибку.

---------------------------------------------------------------------

14.console.profile() и console.profileEnd() Создайте новый анализатор производительности (на основе использования ЦП). Мощный инструмент для анализа производительности функций.

Мы уже знаем, что можем узнать время выполнения фрагмента кода через console.time() и console.timeEnd(). Однако, если нам нужно проанализировать код более сложной логики js, а затем выяснить узкое место в производительности работающей программы, если мы продолжим использовать метод console.time(), то это означает, что нам придется вставлять большое количество этот метод, явно неуклюжий, также делает нас неприемлемыми.

Что касается сложной логической настройки программы JavaScript, пригодятся новые анализаторы производительности console.profile() и console.profileEnd().

Использование такое же, как и время.Console.profile() начинается и console.profileEnd() заканчивается.Вы должны передать параметр для использования в качестве метки.Проще говоря, это имя анализатора производительности. Глядя на следующий код, мы тестируем трудоемкую ситуацию нескольких различных методов написания цикла for:

// 简单新建一个数组吧，新建一个一千万个成员为1的数组
let arr = new Array(10000000).fill(1);
				
// 第一种for循环书写方式				
function fun1 () {
    for (let i = 0, len = arr.length; i < len; i++) {}
}

// 第二种for循环书写方式				
function fun2 () {
    for (let i = arr.length; i --; ) {}
    fun1();
}

// 第三种for循环书写方式		
function fun3 () {
    for (let i = 0, item; item = arr[i++]; ) {}
}

// 执行三个函数		
function fun () {
    fun1();
    fun2();
    fun3();
}

// 立即开始一个性能分析器
console.profile('测试for循环');
fun();
//
console.profileEnd('测试for循环');

Запустите указанную выше программу, откройте консоль Google и посмотрите:

Ну все верно, два предложения печатаются, профайлер запускается и заканчивается. А как насчет анализатора производительности, о котором говорила Нани~? ? ? Сяо Цюань Цюань вот-вот ударит тебя в грудь! ! !

Не волнуйтесь, профилировщика здесь нет, он находится на панели javascript Profiler.

Нажмите на панель javascript Profiler, чтобы увидеть профилировщик производительности. Если у вас нет панели, отмеченной красным прямоугольником сверху, то нажмите три точки справа и выберите по очереди из выпадающего менюMore tools -> JavaScript Profilerвариант, вы можете добавить параметр в положение красного поля выше. Затем щелкните панель, чтобы ввести соответствующий контент:

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

Я отметил на картинке:

• 1 место,Self TimeУказывает, что для выполнения самой текущей функции требуется время. Что это значит? То есть время выполнения самой текущей функции не включает время выполнения других функций, вызываемых в текущей функции.
  
• 2, общее время указывает общее время, затрачиваемое на выполнение текущей функции, включая время, затраченное на выполнение самой функции, + время выполнения других функций, вызываемых внутри функции.
• FunctionВ этом столбце мы открыли его через рисунок вышеfun1В этой колонке указано,fun1Расширенные результаты включаютfunа такжеfun2, что относится к функцииfun1в функцииfunа такжеfun2Время, необходимое для выполнения вызова. Через код, который мы знаем,fun1функция делает вfunфункция иfun2вызывается 1 раз, поэтому здесь показаноfunДлительное время выполнения двух вызовов.
• В крайнем правом углу каждой функциональной строки также есть позиция стека, нажмите, чтобы войтиresouceРасположение файла на панели, где находится функция.

Если вы обратите внимание на время выполнения функции fun1, вы можете щелкнуть, чтобы выбрать строку fun1, а затем щелкнуть значок глаза выше, и он автоматически покажет вам только информацию о функции fun1:

• Выберите строку функции и щелкните глаз, чтобы отобразить текущую функцию целевым образом.
• Выберите функцию, и если щелкнуть знак ×, текущая строка функции будет удалена.
• После выбора строки функций и нажатия на глаз для входа, если вы хотите вернуться к панели всех вышеперечисленных строк функций, вы можете нажать кнопку обновления выше. Или после удаления функциональной строки ее также можно восстановить, как показано выше.
• Три кнопки на изображении выше можно нажимать только тогда, когда цвет становится темнее, глаза и знак × можно нажимать только при выборе строки функции, а кнопку обновления можно нажимать после ввода или удаления строки функции.

Есть один момент, который не был введен, то есть этот метод отображения данных является методом по умолчанию: Тяжелый (Снизу вверх), то есть все выполняемые функции расположены в соответствии с продолжительностью времени, сверху вниз, самые трудоемкие — вверху, менее трудоемкие — внизу. Но у него есть два других пути (Диаграмма и Дерево), как показано ниже:

Давайте сначала поговорим об анализе данных древовидного типа, давайте переключимся на древовидный тип, чтобы увидеть следующий рисунок:

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

Наконец, давайте поговорим о способе диаграммы. Диаграмма показывает нам производительность функции после запуска функции. Вы можете увидеть временной узел, когда каждая функция начинает работать, как показано на следующем рисунке:

Он примерно разделен на верхнюю и нижнюю части.Синяя область в верхней части - это общая диаграмма тренда использования ЦП.Вы можете четко видеть использование ЦП для каждого временного узла. Нижняя часть — это временной узел, когда каждая функция начинает работать.

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

Наведите указатель мыши на функцию, и вы также увидите трудоемкую работу текущей функции, как показано ниже:

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

---------------------------------------------------------------------

15.console.timeStamp('информация о событии'), вставьте событие, чтобы добавить событие во время записи сеанса на панели производительности Performance (ранее Timeline).

Говоря о методе console.timeStamp(), этот метод будет использоваться при отладке производительности. Говоря об этом методе, мы должны в первую очередь упомянуть панель производительности Performance, потому что результаты, напечатанные этим методом, необходимо просматривать в этой панели отладки, Точнее, этот метод отлаживается с панелью производительности:

Как показано выше, на панели Perdormance мы можем проанализировать производительность текущей страницы и узнать результаты анализа событий, связанных с загрузкой страницы и взаимодействием с пользователем. Что касается содержания Перформанса, если говорить об этом внимательно, то контента очень много. Здесь представлено только содержимое, связанное с методом console.timeStamp. Этот кусок можно взять для детального анализа и записать позже.

Возвращаясь к теме, console.timeStamp может записать событие на временную шкалу:

// 一些其他操作
for (let i = 0; i < 10000; i ++) {}

// 在录制会话期间插入的第一个事件		
console.timeStamp('第一个循环完了')
				
// 一些其他操作
for (let i = 0; i < 10000; i ++) {}
				
// 在录制会话起价插入的第二个事件
console.timeStamp('第2个循环完了')

После записи сеанса мы перемещаем ввод в желтую вертикальную линию в верхнем левом углу красного поля на рисунке ниже, и появится окно подсказки, помеченное подсказкой «Отметка времени»: «Первый цикл окончен» и также есть время, когда событие было вставлено узлом.

---------------------------------------------------------------------

16. Эффект метода console.markTimeline() эквивалентен console.timeStamp(), который является предыдущим методом написания console.timeStamp() и был исключен. Нечего сказать.

---------------------------------------------------------------------

17. console.timeLine('параметр метки') взаимодействует с console.timeLineEnd('параметр метки') для записи временной шкалы за определенный период времени.

В приведенном выше методе console.timeStamp мы узнали, что на панели «Производительность» мы можем записывать информацию о сеансе текущей страницы, а с помощью console.timeline и console.timelineEnd мы можем записывать информацию о сеансе только за определенный период времени.

// 录制第一段时间的会话信息
console.timeline('测试循环100万相关的性能分析')
for (let i = 0; i < 1000000; i ++) {}
console.timelineEnd('测试循环100万相关的性能分析')


// 录制第二段时间的会话信息				
console.timeline('测试循环1000万相关的性能分析')
for (let i = 0; i < 10000000; i ++) {}
console.timelineEnd('测试循环1000万相关的性能分析')

На нашей панели «Производительность» нажмите, чтобы начать запись текущей страницы и посмотрите результат после записи:

console.timeline('参数标签')а такжеconsole.timelineEnd('参数标签'), два метода должны получить одну и ту же метку параметра, которая является просто идентификатором.

Зная это использование здесь, это больше о том, как выполнить анализ производительности в производительности, а затем выяснить узкое место, которое влияет на производительность программы, Это важная вещь.

Я понял, что семейство консолей сильное, и я могу протянуть нам руку помощи в процессе разработки и отладки. Простое использование контента, связанного с консолью, — это первый шаг к началу отладки. Более эффективным является гибкое и рациональное использование панели отладки Google и более продвинутое автоматическое тестирование.

❤❤❤ если вам понравилось! ! !