js除錯系列 初識控制台

寫在最開頭：其實我以前就在考慮要不要寫這個東西，因為這個東西確實不難，但是為什麼會有這麼多人問，他們問的不是怎麼用控制台，而是不知道控制台能幹嘛，他們也知道有 console.log 之類的東西，但他們不知道為什麼要用這麼長的字串代替 alert 輸出資訊。在他們眼裡 alert 足以。好吧，我承認小小的吐槽了下，不過這個系列我只打算介紹下除錯的基本知識，不會涉及太深，因為深入的東西結合js知識，如果你js沒到乙個境界，我就算教你除錯bug，破解一些外掛程式之類的，你也根本不知道我在做什麼。我的目的只是讓你認識控制台，讓你入門除錯，之後的路還得靠你們自己走。

當然大俠請飄過，或者吐槽一下也行。。

-其實做web開發的都知道這東西，不論是前端還是後台，但是很多人只停留在html檢視和css修改上，完全沒有把控制台利用起來。

說不定有些剛入門的還不知道有這東西呢。。

這東西的資料網上一抓一大把，但是都沒有講除錯方面的，只是介紹基本的怎麼用而已。。

不論是 chrome firefox ie(8以上版本) 還是 360急速瀏覽器 搜狗瀏覽器 等等，只要按 f12 就能開啟控制台。

我們的文章以 chrome 為例講解，不為什麼，因為我喜歡 chrome 而已。。蘿蔔白菜各有所愛。。

ps: ff 以前都是firebug的天下，現在原生的也非常不錯了。

現在我們按一下 f12 開啟控制台，點選 console 這一項。

可以看到我的頭像和幾行文字，不過下面還有幾行東西，我們暫時先忽略，以後會講解的。

其實對於這 f12 而言，最確切的叫法是開發人員工具，console 這一項才是控制台。

ps：做為基礎教程，我只介紹 console 和 sources 方面的除錯，其他功能自己去了解吧。。

點選右鍵的 clear console 選單 或者 輸入 clear() 然後按回車即可清空控制台內容。

我們進行第一步用 console.log 輸出資訊吧。

分別輸入  console.log("hehe..")  和  console.log("hehe..", "haha..")  然後按回車，可以在控制台看到輸出結果。

其實就是輸出資訊而，非常簡單，用他代替 alert 和 document.write 除錯，你的工作會變的非常輕鬆的。

例如除錯乙個迴圈這部分的**，可是陣列裡卻有幾十個甚至上百個元素，alert 的話你會點瘋掉的，

document.write 也不是不行，但是對於物件輸出，你只能看到 [object object] 這樣的東西。

這是很多新人朋友遇到的真實問題。

如果用 console.log 代替 alert document.write 輸出物件資訊，可以在控制台展開這物件檢視具體資訊。

例如：

var arr = [, ];

可以直接看到物件資訊，而不會顯示 [object object] 令我們一頭霧水。
是不是突然覺得 console.log 屌爆了？
其實這只是他的冰山一角而已，我會盡量把他的一些優勢都展現給你們看。
繼續剛才的步驟，現在我們直接輸入 arr 然後回車。
是不是更吊了，現在可以直接點選 object 展開這個陣列內的物件進行檢視了，連迴圈輸出都省了。
這就是控制台的魅力，而且這只是他最基礎的功能而已。
我們先來認識下 console 物件下還有那些方法供我們使用吧。
輸入 console 然後回車，展開這個物件，
可以看一些深色和淺色的東西，深色的就是我們可以直接呼叫的方法了，淺色的表示預設屬性或方法，展示無需關心，以後有機會再說。
其實常用的只有 log dir 而已，其他真心很少用，到高階除錯才會用上。
group，table 之類的輔助性質，可用可不用，看你喜好了。我不太喜歡用。
js控制台除錯
說到除錯，就是平時在遇到 問題的時候對錯誤 進行的修改以及尋找錯誤的過程。我們通常會利用一些輸出語句來判斷 執行在 塊的何處出現問題。在js中，提到 輸出我們就會自然聯想到alert 但是alert彈出的是乙個個的對話方塊，要進行除錯就必須用滑鼠乙個個地點選確定，這未免過於麻煩。這時候console...
sublime控制台除錯JS
電腦先安裝配置好nodejs環境 在sublime配置新的build system 工具 編譯系統 新編譯系統 開啟之後具體如下 這一步是關鍵，將當前的檔案儲存為 node.sublime build 然後儲存到當前目錄 ctrl shift s 儲存即可 然後在 node.sublime buil...
js除錯系列 控制台命令列API
js除錯系列目錄 上次初步介紹了什麼是控制台，以及簡單的 console.log 輸出資訊。最後還有兩個小問題，我們就當回顧，來看下怎麼操作吧。這些問題其實是今天內容的乙個伏筆，剛才我們看到如何在控制台檢視乙個元素以及他的屬性方法。其實控制台為我們提供了很多命令列api，簡單點說就是只有控制台能用的...