瀏覽器控制檯console的使用

前天在團隊項目中由於產品需求在提交訂單的時候須要多個頁面的數據做爲提交接口的參數，這種需求讓人醉醉的，項目用angular來作的，沒辦法只能用全局變量來定義要交互的值和localStorage來臨時的將數據存在瀏覽器，話很少少進入正題。

用JS組裝的JS對象在存入localStorage的時候要用JSON.stringify轉成JSON對象才能正確的存起來，同理取得時候也要用JSON.parse來將JSON對象轉化成JS對象才能在前端正常使用。當時在控制檯打印從localStorage獲取到的數據的時候發現打印的字體顏色是黑色的（chrome），當時控制檯還有其餘顏色的打印項。

平時每天使用console，此次才真正的發現console的一些小的細節，不一樣的數據類型在console打印的顏色是不同的，因而帶着興趣研究了一番。

上圖分別測試了JS的數據類型Number,String,Null,Undefined,Boolean以及Object在consol的打印結果，能夠看出來在瀏覽器中（chrome）打印出對應的類型的顏色是不同的，Number類型的數據偏向藍色、Boolean類型的數據偏向紫紅色，Null和Undefined的顏色值是灰色，當愕然Array和Object的特色就更明顯了，一個帶中括號一個有大括號很便於咱們識別。固然也能夠自定義console打印的字體顏色。

若是把對應的數據類型在瀏覽器console中對應的顏色的話在開發中或多或少能讓咱們從控制檯中看到數據對應的類型，這樣是能夠提升咱們的開發效率的。

平時項目開發中console對象正常狀況下用的比較多的方法應該就是console.log()方法，除此以外console還有其它的一些方法，咱們能夠在控制檯輸出 console.log(console)來查看下。

這就是console對象下面全部的方法。不一樣的方法在瀏覽器控制檯有不一樣的表現方式：

這裏僅僅舉例幾種方法，能夠看出console不一樣的方法在控制檯仍是有不一樣的表現的。

 這裏說說console的根源，console並不屬於原生JS的，原生JS並無console對象，它是瀏覽器提供的用於用戶便於訪問控制檯的對象，所以在不一樣的瀏覽器裏面console的效果也可能會有一些差別。

開發用用的和console相似的alert,confirm,prompt等彈框也是瀏覽器自帶的行爲，區別在於console不影響代碼的執行可是alert,confirm,prompt彈框彈出的時候回阻斷代碼的執行。

由於console，alert，confirm，prompt等這些瀏覽器自帶的對象只能依賴於瀏覽器纔會有效，因此對於要打包的APP上線的時候是要避免使用這些對象的，用的多的應該是彈框，這時候要本身寫一個彈框插件或者找第三方插件來實現功能。

天天進步一點點