30 секунд в день ⏱ Отладка черной магии

Введение

console.log, вспомогательные функции отладки, советы по отладке

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

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

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

ps: Конечно, мир избавлен от насекомых, но отладку точки останова не сломаешь.

Обычная отладка

Одним из наиболее часто встречающихся сценариев в разработке является вложенность функций:

star(
    pushmetop(
        github('ok!')
    )
)

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

const a = github('ok!');
console.log(a);

const b = pushmetop(a);
console.log(b);

const c = star(b);
console.log(c);

Супер отладка

Славные парни полны волшебных переменных иconsole.log, это, очевидно, сократит много времени на прикосновения 🐟, остроумие, почему мы ошибаемся?console.logОбновить:

const superme = (x) => (console.log(x), x)

Совет: используйте запятые для написания элегантного кода, напримерx => (x=x+1, x).

Избавляться от насекомых сейчас не слишком удобно, просто指哪打哪:

star(pushmetop(
    // 想除哪就除拿
    superme(github('ok!'))
))

Супер супер отладка

Кроме iphone плюс нашdebugКак это могло быть не так?

const supermePlus =  (x, fn = (y) => y) => fn(x)

С supermePlus мы можем легко вставлять отладочный код при отладке:

star(
    // 想怎么加就怎么加
    supermePlus(pushmetop(github('ok!')), (x) => {
        // 测试 x 是不是数字
        console.log(typeof x === 'number' && x === x);
        return x;
    })
);

Также удобно подставлять значения:

star(
    supermePlus(pushmetop(github('ok!')), (x) => 'good!')
);

Магия струн

В новой версии Chrome вы можете напрямую выводить содержимое функции.

При печати функции во время отладки она часто выводит строку:

const user = {
    greet: function () {
        console.log('hello world')
    }
}

// 输出: [Function: greet]
console.log(user.greet)

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

сценарий

const user = {
    greet: function () {
        console.log('hello world')
    }
}

console.log(user.greet + '')

выход

function () {
    console.log('hello world')
}

разное

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

const github = x => x;
const pushmetop = x => x + '!';
const star = x => x + '?';

Расти вместе

В запутанном городе неизбежно идти бок о бок伙伴Давайте расти вместе.

• Если вы хотите, чтобы статью увидело больше людей, нажмите点赞.
• Если вы хотите мотивировать второго ребенка, вы можете перейти кGithubдать小星星.
• Если вы хотите больше общаться с Xiaoer, добавьте WeChatm353839115.

Оригинал статьи изPushMeTop