使用Console命令調試JS

標籤：blog   http   color   io   ar   使用   java   for   strong   

一、console 的對象常用的方法

1、console.log(object[, object, ...])
使用頻率最高的一條語句：向控制台輸出一條訊息。支援 C 語言 printf 式的格式化輸出。當然，也可以不使用格式化輸出來達到同樣的目的

 

2、console.debug(object[, object, ...])
向控制台輸出一條資訊，它包括一個指向該行代碼位置的超連結。

 

3、console.info(object[, object, ...])
向控制台輸出一條資訊，該資訊包含一個表示“資訊”的表徵圖，和指向該行代碼位置的超連結。

 

4、console.warn(object[, object, ...])

同 info。區別是表徵圖與樣式不同。

 

5、console.error(object[, object, ...])

同 info。區別是表徵圖與樣式不同。error 實際上和 throw new Error() 產生的效果相同，使用該語句時會向瀏覽器拋出一個 js 異常。

 

6、console.assert(expression[, object, ...])

斷言，測試一條運算式是否為真，不為真時將拋出異常（宣告失敗）。

 

7、console.dir(object)

輸出一個對象的全部屬性（輸出結果類似於 DOM 面板中的樣式）。

 

8、console.dirxml(node)
輸出一個 HTML 或者 XML 元素的結構樹，點擊結構樹上面的節點進入到 HTML 面板。

 

9、console.trace()
輸出 Javascript 執行時的堆棧追蹤。

 

10、console.group(object[, object, ...])
輸出訊息的同時開啟一個嵌套塊，用以縮排輸出的內容。調用 console.groupEnd() 用以結束這個塊的輸出。

 

11、console.groupCollapsed()
同 console.group(); 區別在於嵌套塊預設是收合的。

 

12、console.time(name)
計時器，當調用 console.timeEnd(name);並傳遞相同的 name 為參數時，計時停止，並輸出執行兩條語句之間代碼所消耗的時間（毫秒）。

 

13、console.profile([title])
與 profileEnd() 結合使用，用來做效能測試，與 console 面板上 profile 按鈕的功能完全相同。

 

14、console.count([title])
輸出該行代碼被執行的次數，參數 title 將在輸出時作為輸出結果的首碼使用。

 

15、console.clear()
清空控制台

 

二、使用console調試JS指令碼執行個體

 

1、console.log()

 

最簡單的方法是console.log()，可以用來取代alert()或document.write()。

另外，根據資訊的不同性質，console對象還有4種顯示資訊的方法，分別是一般資訊console.info()、除錯資訊console.debug()、警告提示console.warn()、錯誤提示console.error()。

例如

 

　　console.info("這是info");

　　console.debug("這是debug");

　　console.warn("這是warn");

　　console.error("這是error");

 

載入時，控制台會顯示如下內容

 

 

 

2、預留位置

console對象的上面5種方法，都可以使用printf風格的預留位置。不過，預留位置的種類比較少，只支援字元（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種。

例如

　　console.log("%d年%d月%d日",2011,3,26);

　　console.log("圓周率是%f",3.1415926);

 

%o預留位置，可以用來查看一個對象內部情況。比如，有這樣一個對象

　　var dog = {} ;

　　dog.name = "大毛" ;

　　dog.color = "黃色";

 

%o預留位置的使用

 

console.log("%o",dog);

 

顯示

 

 

 

 

3、console.dir()查看對象的資訊

 

console.dir()可以顯示一個對象所有的屬性和方法。

 

例如

 

    <script type="text/javascript">           var info = {                blog:"ddd",                tel:25422223,                message:"歡迎你使用"            };           console.dir(info);    </script>

 

4、console.dirxml() 顯示某個節點的內容

 

console.dirxml()用來顯示網頁的某個節點（node）所包含的html/xml代碼。

例如

var table = document.getElementById("table1");

console.dirxml(table);

 

5、console.assert()判斷變數是否是真

 

console.assert()用來判斷一個運算式或變數是否為真。如果結果為否，則在控制台輸出一條相應資訊，並且拋出一個異常。

例如

　　var result = 1;

　　console.assert( result );

　　var year = 2000;

　　console.assert(year == 2011 );

 

 

6、console.trace()

 

console.trace()用來追蹤函數的調用軌跡。

 

 

7、console.time()和console.timeEnd()

 

用來顯示代碼的已耗用時間。

例如

　　console.time("計時器一");

　　for(var i=0;i<1000;i++){

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd("計時器一");

效果

 

 

8、console.profile()

效能分析（Profiler）就是剖析器各個部分的已耗用時間，找出瓶頸所在，使用的方法是console.profile()。

 

例如

　　console.profile(‘效能分析器一‘);

　　Foo();

　　console.profileEnd();

 

使用Console命令調試JS