Zi 字媒體

原文：segmentfault.com/a/1190000006721606（點擊文末閱讀原文即可前往） 1.凡人視角列印字元串代碼：console.log("I am a 凡人");列印提示消息代碼：console.info("Yes, you arm a 凡人");列印警告消息代碼：console.warn("凡人你居然敢窺視我");列印錯誤消息代碼：console.error("天兵天將，把這個凡人給我打入地獄");列印調試信息console.debug("我就是傳說中的debug");2.上帝視角console 除了上面的幾個方法還有什麼方法呢？log 除了能列印字元串外，還能列印出對象，我們可以利用 console.log 列印自己。代碼：console.log(console);輸出：Object{ assert:..., clear:..., count:..., debug:..., dir:..., dirxml:..., error:..., group:..., groupCollapsed:..., groupEnd:..., info:..., log:..., markTimeline:..., profile:..., profileEnd:..., table:..., time:..., timeEnd:..., timeStamp:..., timeline:..., timelineEnd:..., trace:..., warn:...}啊咧咧？怎麼這麼多方法。其實上面的 console 方法 不一定每個瀏覽器 都有實現，我這邊使用的是 chrome瀏覽器 。所以說，這個特性是非標準的，請盡量不要在 生產環境 中使用它。但是我們可以在 開發環境 中，合理的利用 這些方法來幫助我們開發。清理控制台如果我們在控制台調試的時候，難免 強迫症 發作想清理掉已經亂七八糟的控制台。瀏覽器和命令行 clear 一樣提供了一個清理函數 console.clear 。console.clear當然我們也可以用 chrome 的 command line api 來清理控制台。clear又或者可以使用按鍵Mac上 cmd + k ，Win ctrl + l（我用的是chrome瀏覽器）。分組當代碼非常長，或者我們需要把一個函數，或者一個文件中的函數等區分出來。我們可以使用分組來實現。代碼：console.group('凡人');console.log("手");console.log("腳");console.groupEnd;console.group('神');console.log("法力無邊");console.log("騰雲架霧");輸出：如果想要輸出為摺疊，我們可以使用 console.groupCollapsed ，用法和 console.group 類似。查看對象信息有時候我們需要列印出對象信息,可以使用 console.log 來進行簡單的輸出。代碼：var person ={ head:1 hand:2 leg:2};console.log(person);嗚嗚，可是這個顯示得好醜，我們這個時候就可以使用傳說中的神器 console.table 來幫助我們清楚的顯示 關聯數組信息。var data =[ { '姓名':'幼稚園' '性別':'女' }, { '姓名':'李狗嗨' '數量':1 }];console.table(data);輸出：但是如果想要看詳細的對象信息，我們可以使用 console.dir，將一個 JavaScript 對象的所有屬性和屬性值顯示成一個可交互的列表，它還能列印出函數等。console.dir(clear);什麼？你想看某個節點中的html代碼？沒事，我們可以用 console.dirxml 來查看頁面中對應元素的 html/xml 內容。html代碼：javascirpt代碼：var person = document.getElementById('person');性能測試雷軍粑粑老是喜歡說：「不服？跑個分。」有時候，我們也需要對代碼跑個分。這個時候，我們可以使用console.time和console.timeEnd，他們可以記錄代碼運行所花費的時間。console.time("神機妙算");(function{ for(var i =0; i <10; i++){ var sum =(function{ var flog =0; for(var i =0; i <10; i++){ } }); }});console.timeEnd("神機妙算");啊咧咧？你這個頂多就是 計時器 怎麼能說是 性能測試 。客官別急，我們這還有一個叫做 console.profile 和 console.profileEnd 姐妹呢~~console.profile("神機妙算");(function{ flog+=i;});console.profileEnd("神機妙算");輸出會顯示在 profile什麼還是不夠？你還想知道運行時的結果棧？可以可以，我們這還有一位 console.trace 哦。他可以看透大爺你的一局一動哦。代碼：function add(num){ if(0< num){ console.trace("現在num的值為" num); return num + add(num -1); }else{ return0; }}var a =3;add(3);輸出：判斷真假平時我們在寫代碼是時候，經常需要判斷一下當前值的真假情況，使用if或者三元表達式來達到目的。我們現在也可以使用 console.assert 來判斷，該方法會在條件為錯誤時，返回一個 console.error 的輸出。console.assert(1==1);console.assert(1==0);console.assert(!(1==0));統計次數有時候我們需要統計一個函數或者被調用了幾次，我們通常會增加一個變數 count 來記錄，然後在控制台中查看。這樣相當的麻煩，我們可以使用 console.count 函數來幫忙我們記錄次數，並輸出。function hi(name){ console.count(name); return"hi "+ name;}for(var i =0; i <10; i++){ if(i <4){ hi("person"); }else{ hi("god"); }}總結console 中有很多對我們調試代碼有幫助的函數，我們可以在開發環境中配合 console 來調試代碼，使得我們測試更加便利。