WEB前端開發必備 Console API 當打開 firebug (也包括 Chrome 等瀏覽器的自帶調試工具),window 下面會註冊一個叫做 console 的對象,它提供多種方法向控制檯輸出信息,供開發人員調試使用。下面是這些方法的一個簡單介紹,適時地運用它們,對於提高開發效率很有幫助。 console.log(object[, object, ...]) console.debug(object[, object, ...]) console.info(object[, object, ...]) console.warn(object[, object, ...]) console.error(object[, object, ...]) console.assert(expression[, object, ...]) console.dir(object) console.dirxml(node) console.trace() console.group(object[, object, ...]) console.groupCollapsed() console.time(name) console.profile([title]) console.count([title]) console.clear() 控制檯的輸出面板右邊,是控制檯的輸入面板(Chrome 調試工具對應爲下方),在這裏除了可以運行常規的 javascript 代碼,還內置了相當數量的命令行可以輔助我們的調試工作,下面是一些常用命令行的簡單介紹。 $(id) $$(selector) $x(xpath) $0 $1 $n(index) dir(object) dirxml(node) clear() inspect(object[, tabName])() keys(object) values(object) debug(fn) monitor(fn) monitorEvents(object[, types]) 上面的命令行被執行後,將開啓當前在 HTML 面板中被選中元素的 click 事件監控,一旦這個元素的 click 事件被觸發,事件對象將會在控制檯輸出。如果不指定第二個參數,將對所有事件進行記錄。 profile([title]) 轉載:
使用頻率最高的一條語句:向控制檯輸出一條消息。支持 C 語言 printf 式的格式化輸出。當然,也可以不使用格式化輸出來達到同樣的目的:
var animal='frog', count=10;
console.log("The %s jumped over %d tall buildings", animal, count);
console.log("The", animal, "jumped over", count, "tall buildings");
向控制檯輸出一條信息,它包括一個指向該行代碼位置的超鏈接。
向控制檯輸出一條信息,該信息包含一個表示“信息”的圖標,和指向該行代碼位置的超鏈接。
同 info。區別是圖標與樣式不同。
同 info。區別是圖標與樣式不同。error 實際上和 throw new Error() 產生的效果相同,使用該語句時會向瀏覽器拋出一個 js 異常。
斷言,測試一條表達式是否爲真,不爲真時將拋出異常(斷言失敗)。
輸出一個對象的全部屬性(輸出結果類似於 DOM 面板中的樣式)。
輸出一個 HTML 或者 XML 元素的結構樹,點擊結構樹上面的節點進入到 HTML 面板。
輸出 Javascript 執行時的堆棧追蹤。
輸出消息的同時打開一個嵌套塊,用以縮進輸出的內容。調用 console.groupEnd() 用以結束這個塊的輸出。
同 console.group(); 區別在於嵌套塊默認是收起的。
計時器,當調用 console.timeEnd(name);並傳遞相同的 name 爲參數時,計時停止,並輸出執行兩條語句之間代碼所消耗的時間(毫秒)。
與 profileEnd() 結合使用,用來做性能測試,與 console 面板上 profile 按鈕的功能完全相同。
輸出該行代碼被執行的次數,參數 title 將在輸出時作爲輸出結果的前綴使用。
清空控制檯
返回一個給定 id 的元素。
返回給定的 css 選擇器匹配到的一組元素。
返回給定的 XPath 表達式匹配到的一組元素。
在 HTML 面板中選中的元素。
上一次在 HTML 面板中選中的元素。
訪問最近 5 個被選中過的元素,index 的範圍: 0 – 4。
同 console.dir(object)。
同 console.dirxml(node)。
同 console.clear()。
在合適的(或一個指定的) tab 中檢視一個對象。
返回一個對象的所有屬性的鍵。
返回一個對象的所有屬性的值。
在函數第一行添加一個斷點,使用 undebug(fn) 移除斷點。
開啓一個函數的調用日誌,使用 unmonitor(fn) 關閉該功能。非常有用的一個命令,但是它似乎並沒有很好地工作。
開啓一個元素的某個事件(或所有事件)被觸發時的日誌記錄。用例如下:
monitorEvents($0,['click'])
同 console.profile([title])
Firebug & Chrome Console 控制檯使用指南
命令行
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.