1.骨灰級調(diào)試大師Alert--缺點窗口實在不美觀,而且會遮擋不么頁面的內(nèi)容不太友好,alert的調(diào)試信息必須在alert()才能正常工作,并且alert在阻礙頁面的繼續(xù)的渲染,調(diào)試后,開發(fā)者需要手動清除,挺實在有點麻煩,想法console.log好點
2.新一代調(diào)試王者Console--api--在控制臺調(diào)試新不影響也沒得顯示
console 的對象,它提供多種方法向控制臺輸出信息,供開發(fā)人員調(diào)試使用
console,log();--向控制臺輸出一條信息。
console.debug()--向控制臺輸出一條信息,它包括一個指向該行代碼位置的超鏈接。
console.info()向控制臺輸出一條信息,該信息包含一個表示“信息”的圖標,和指向該行代碼位置的超鏈接。
console.warn();同 info。區(qū)別是圖標與樣式不同。
console.error(object[, object, …])
同 info。區(qū)別是圖標與樣式不同。error 實際上和 throw new Error() 產(chǎn)生的效果相同,使用該語句時會向瀏覽器拋出一個 js 異常。
console.assert(expression[, object, …])
斷言,測試一條表達式是否為真,不為真時將拋出異常(斷言失?。?。
console.dir(object)
輸出一個對象的全部屬性(輸出結(jié)果類似于 DOM 面板中的樣式)。
console.dirxml(node)
輸出一個 HTML 或者 XML 元素的結(jié)構(gòu)樹,點擊結(jié)構(gòu)樹上面的節(jié)點進入到 HTML 面板。
console.trace()
輸出 Javascript 執(zhí)行時的堆棧追蹤。
console.group(object[, object, …])
輸出消息的同時打開一個嵌套塊,用以縮進輸出的內(nèi)容。調(diào)用 console.groupEnd() 用以結(jié)束這個塊的輸出。
console.groupCollapsed()
同 console.group(); 區(qū)別在于嵌套塊默認是收起的。
console.time(name)
計時器,當(dāng)調(diào)用 console.timeEnd(name);并傳遞相同的 name 為參數(shù)時,計時停止,并輸出執(zhí)行兩條語句之間代碼所消耗的時間(毫秒)。
注:console.time(slugName) – console.timeEnd(slugName) – 記錄某一個時間戳的執(zhí)行時間,可用于優(yōu)化循環(huán)語句
console.profile([title])
與 profileEnd() 結(jié)合使用,用來做性能測試,與 console 面板上 profile 按鈕的功能完全相同。
console.count([title])
輸出該行代碼被執(zhí)行的次數(shù),參數(shù) title 將在輸出時作為輸出結(jié)果的前綴使用。
console.clear()
清空控制臺
?
命令行
控制臺的輸出面板右邊,是控制臺的輸入面板(Chrome 調(diào)試工具對應(yīng)為下方),在這里除了可以運行常規(guī)的 javascript 代碼,還內(nèi)置了相當(dāng)數(shù)量的命令行可以輔助我們的調(diào)試工作,下面是一些常用命令行的簡單介紹:
$(id)
返回一個給定 id 的元素。
$$(selector)
返回給定的 css 選擇器匹配到的一組元素。
$x(xpath)
返回給定的 XPath 表達式匹配到的一組元素。
$0
在 HTML 面板中選中的元素。
$1
上一次在 HTML 面板中選中的元素。
$n(index)
訪問最近 5 個被選中過的元素,index 的范圍: 0 – 4。
dir(object)
同 console.dir(object)。
dirxml(node)
同 console.dirxml(node)。
clear()
同 console.clear()。
inspect(object[, tabName])()
在合適的(或一個指定的) tab 中檢視一個對象。
keys(object)
返回一個對象的所有屬性的鍵。
values(object)
返回一個對象的所有屬性的值。
debug(fn)
在函數(shù)第一行添加一個斷點,使用 undebug(fn) 移除斷點。
monitor(fn)
開啟一個函數(shù)的調(diào)用日志,使用 unmonitor(fn) 關(guān)閉該功能。非常有用的一個命令,但是它似乎并沒有很好地工作。
monitorEvents(object[, types])
開啟一個元素的某個事件(或所有事件)被觸發(fā)時的日志記錄。用例如下:
monitorEvents($0,[‘click’])
上面的命令行被執(zhí)行后,將開啟當(dāng)前在 HTML 面板中被選中元素的 click 事件監(jiān)控,一旦這個元素的 click 事件被觸發(fā),事件對象將會在控制臺輸出。如果不指定第二個參數(shù),將對所有事件進行記錄。
profile([title])
同 console.profile([title])