前天在團隊項目中因為產品需求在提交訂單的時候需要多個頁面的數據作為提交接口的參數，這種需求讓人醉醉的，項目用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上線的時候是要避免使用這些對象的，用的多的應該是彈框，這時候要自己寫一個彈框插件或者找第三方插件來實現功能。

每天進步一點點

瀏覽器控制臺console的使用