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