每日 30 秒 ⏱ 調試黑魔法

簡介

console.log、調試輔助函數、調試小技巧

⚠️⚠️⚠️ 請注意本文不是講 console 各類方法，請不要點出去。

原本想取名爲 console 黑魔法，順手講一點 console 的其餘方法。但是查閱資料的時候發現好多文章都已經寫得很是好了，這部分相關的內容你們能夠到掘金查看 👉 傳送門。

今天來說點不同的，其實有了那麼多 console 方法開發中最常常用到的仍是 console.log，那你知道怎麼讓 console.log 來幫你摸 🐟 減小 Debug 工做量嘛？

ps: 固然天下除蟲，惟斷點調試不破。

普通 Debug

在開發時最常常碰到的場景之一就是函數嵌套了：

star(
    pushmetop(
        github('ok!')
    )
)
複製代碼

好傢伙這嵌套夠深，若是前方產品八米加急找到你說請求 star 函數出錯了，一臉視死如歸的同窗打開對應代碼開始調試：

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

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

const c = star(b);
console.log(c);
複製代碼

超級 Debug

好傢伙滿滿當當的魔術變量和 console.log，這顯然會減小大量摸🐟時間，機智的咱們爲什麼不對 console.log 進行升級：

const superme = (x) => (console.log(x), x)
複製代碼

小技巧：利用逗號表達式來寫寫出優雅的代碼，例如 x => (x=x+1, x)。

這下再除蟲簡直不要太舒服，簡直指哪打哪：

star(pushmetop(
    // 想除哪就除拿
    superme(github('ok!'))
))
複製代碼

超超級 Debug

除了 iphone 有 plus 咱們的 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 給個 小星星。
• 若是您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop