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

      console.table()

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

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

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

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

      contenteditable

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

      calc()

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

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

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

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

      輕松解決問題。

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