每日 30 秒 ⏱ 除錯黑魔法

zhangxiangliang發表於2019-03-27
除錯

簡介

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

相關文章