同學(xué)們?cè)陂_(kāi)發(fā)功能的時(shí)候可能會(huì)遇到這樣那樣的問(wèn)題，但可能手中沒(méi)有什么好的解決辦法，那么不妨來(lái)看看小千下面介紹的幾個(gè)代碼，說(shuō)不準(zhǔn)就有能夠解決你問(wèn)題的哦。

      console.table()

      思考一下平時(shí)在開(kāi)發(fā)過(guò)程中, 我們的代碼中出現(xiàn)頻率比較高的一段代碼是什么 console.log('xxx')，因?yàn)楦鞣N各樣的原因, 我們的代碼一旦在瀏覽器運(yùn)行總是各種 紅色 所以很多小伙伴會(huì)選擇在控制臺(tái)打印一下看看?？纯次冶闅v的是個(gè)啥，看看我獲取的元素是個(gè)啥，看看我請(qǐng)求回來(lái)的東西是個(gè)啥，看看我算的數(shù)是不是 NaN。

      但是遇到類似下面這樣的代碼

      在控制臺(tái)打印出來(lái)的可能不是我們想要的

      如果只有一兩個(gè)屬性, 那么沒(méi)啥問(wèn)題, 我不用打開(kāi)就能看到結(jié)果 但是一旦對(duì)象中屬性變得多了, 那么我們展開(kāi)以后看到的結(jié)果就會(huì)誤導(dǎo)我的代碼了 這個(gè)時(shí)候, 我們可以選擇使用 console.table() 來(lái)進(jìn)行控制臺(tái)展示

      contenteditable

      我們?cè)陧?yè)面上寫(xiě)的大部分標(biāo)簽都是不可以編輯的 但是一旦你給元素加上 contenteditable 屬性以后, 就變成可以編輯的了。這個(gè)玩意有啥用呢, 也保存不下來(lái), 刷新以后還是和以前一樣 可以幫我們玩一下 css 樣式的問(wèn)題 我們可以寫(xiě)一個(gè)內(nèi)聯(lián)樣式, 寫(xiě)在 body 標(biāo)簽里面。

      calc()

      我們?cè)賹?xiě) css 的時(shí)候, 經(jīng)常會(huì)遇到一個(gè)小問(wèn)題 就是我已經(jīng)寫(xiě)了寬度 25% 了 然后發(fā)現(xiàn), 你 ** 竟然有 margin 好吧, 我給你加一個(gè) margin: 0 10px。

      好吧, 我認(rèn)命了, 不寫(xiě) 25% 了, 拉個(gè)計(jì)算器過(guò)來(lái), 我算數(shù)還不行嗎 （1）歸零 ... 歸零 ... 歸零 ...

      我們也可以選擇使用一個(gè) calc()

      li { width: calc(25% - 20px); }

      輕松解決問(wèn)題。

      還有更多小技巧同學(xué)們感興趣的話不妨來(lái)千鋒前端交流群一起探討一下，更有全套前端視頻教程可以領(lǐng)取，趕緊來(lái)找在線老師了解一下吧。