您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Firebug中console tab怎么用”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“Firebug中console tab怎么用”這篇文章吧。
1、Firefox的日志記錄(Logging in Firefox)。
通過Console的記錄方法,我們可以不再使用煩人的alert或者document.write方法來進行調試。Firebug提供了五種日志的類型:
◆console.log:記錄一行信息,無任何圖標提示;
◆console.debug:記錄一行信息,帶超鏈接,可以鏈接到語句調用的地方;
◆console.error():向控制臺中寫入錯誤信息,帶錯誤圖標顯示和高亮代碼鏈接;
◆console.info():向控制臺中寫入提示信息,帶信息圖標顯示和高亮代碼鏈接;
◆console.warn():向控制臺中寫入警告信息,帶警告圖標顯示和高亮代碼鏈接;
consle打印字符串支持字符串替換,使用起來就像c里面的printf(“%s",a),支持的類型包括:
%s string,字符串
%d,%i 整型
%f 浮點
%o 對象
如果使用%o的話,對象就會用綠色的超鏈接表示出來,單擊后會將你帶到DOM視圖。
2、分組(Grouping)。
如果某一類的信息特別多時,分組就有利于邏輯的劃分。使用上很簡單,參見代碼。
function consoleGroup(){ var groupname = "Group 1"; console.group("Message group %s", groupname); console.log("This is the 1 message in %s", groupname); console.log("This is the 2 message in %s", groupname); console.log("This is the 3 message in %s", groupname); console.groupEnd(); goupname = "Group 2"; console.group("Message group %s", goupname); console.log("This is the 1 message in %s", goupname); var subgroupname = "Sub group 1"; console.group("Message group %s",subgroupname); console.log("This is the 1 message in %s", subgroupname); console.log("This is the 2 message in %s", subgroupname); console.log("This is the 3 message in %s", subgroupname); console.groupEnd(); console.log("This is the 2 message in %s", goupname); console.groupEnd(); } |
3、console.dir和console.dirxml
console.dir可以將一個對象的所有方法和屬性打印出來,這個方法無疑是非常有用的,我們不再需要object.toString這樣的方法支持了,只要有firebug,查看對象也變得很輕松。
同時,我們也可以將頁面中的元素作為一個對象打印出來,但是你要小心,因為這將輸出眾多的信息,可能你會迷失在繁雜的信息中而找不到自己需要的條目。
我們可以通過分組將這些大量的信息放入一個分組中,這樣可以在邏輯上更清楚一些。
function consoleDir(){ function Car(){ this.Model = "Old Model"; this.getManu = function(){ return "Toyota"; } } var objCar = new Car(); console.dir(objCar); console.dir(zoo); var groupname = "Css Style"; console.group("The button Style", groupname); console.dir(document.getElementById('consoledir').style, groupname); console.groupEnd(); } |
4、斷言(console.assert())。
console.assert()可以用來判斷一個表達式是否正確,如果錯誤,他就會打印錯誤信息在控制臺窗口中。
5、追蹤(console.trace())。
console.trace()是一個非常有趣的功能。我們先來看看官方的解釋:打印Javascript執行時刻的堆棧追蹤。
這個函數可以打印出程序執行時從起點到終點的路徑信息。比如如果我們想知道某個函數是何時和如何被執行的,我們將console.trace()放在這個函數中,我們就能夠的看到這個函數被執行的路徑。這個函數在調試其他人的源代碼時非常有用。
6、計時(Timing)。
console.time(timeName)可以用來計時,這個在我們需要知道代碼執行效率的時候特別有用,就不用自己造輪子了。
function consoleTime(){ var timeName = "timer1"; console.time(timeName); var a = 0; for(var i = 0; i < 100; i++){ for(var j = 0; j < 100; j++){ // console.log('Hello world'); a = a + 1; } } console.log("a = %d", a); console.timeEnd(timeName); } |
7、Javascript分析器(Javascript Profiler)。
我們可以通過代碼console.profile('profileName')或者單擊Profiler標簽來進行Javascript代碼執行的分析。這個功能有點類似于console.time(),可以幫助我們評估代碼的表現,但是能夠提供比console.time()更詳細的信息。
有三種方法可以調用Javascript profiler。一種是在代碼中寫入分析腳本,一種是單擊profile標簽,***還可以在命令行下輸入命令來執行。執行后,可以看到詳細的輸出結果,下面對各項進行一些說明:
Function Column:顯示調用的函數名稱;
Call Column:顯示調用次數;
Percent Column:顯示消耗的時間比;
Own Time:顯示函數內部語句執行的時間,不包括調用其他函數的時間;
Time Column:顯示函數從開始到結束的執行時間;
Avg Column:平均時間。Avg = Own / Call;
Min & Max Column:顯示最小和***時間;
File Column:函數所在的文件;
8、其他的一些選項。
在Console Tab的最右側有一個Options的選項,在這里可以自己定義需要顯示的錯誤,其內容很好理解,這里就不多說了。有一點就是Firebug1.3以后,多了Show Chrome Errors和Show Chrome Message。
以上是“Firebug中console tab怎么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。