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

console.table()

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

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

在控制臺打印出來的可能不是我們想要的

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

contenteditable

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

calc()

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

好吧, 我認命了, 不寫 25% 了, 拉個計算器過來, 我算數(shù)還不行嗎 （1）歸零 … 歸零 … 歸零 …

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

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

輕松解決問題。

還有更多小技巧同學(xué)們感興趣的話不妨關(guān)注我，后期分享更多前端小技巧。

本文來自千鋒教育，轉(zhuǎn)載請注明出處。

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的前端开发技巧-那些不常见但十分有效的小玩意的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。