chrome控制台使用(Using the Console)

標籤：des   style   blog   http   color   java   使用   os   

控制台提供了兩個主要的方法給開發人員測試網頁和應用程式:

　　通過使用控制台提供的Console API方法來診斷記錄資訊,比如說:console.log(),console.profile().

　　即時響應的命令視窗可以和document以及chrome開發工具相互聯調.在控制台可以直接測試運算式,並且可以使用Command Line API提供的方法,比如$()可以尋找元素,或者使用profile()來開啟CPU分析器.

本文提供關於這兩個API的概述和一些基本使用,你也可以直接去Console API和Command Line API查看詳細資料.

基礎操作開啟控制台

在調試工具裡面有兩種有效方式開啟控制台:主標籤欄裡面的console標籤,或者當你在其他標籤裡面時作為分離的視圖展示出來(比如在Elements或者Sources).

要開啟控制台,做下面任意一種操作:

• 按住 Command - Option - J (Mac) 或者 Control -Shift -J(Windows/Linux).
• 選擇 View > Developer > JavaScript Console.
• 按下 F12 > console

當你在其他標籤欄內時可以按下Esc鍵開啟或關閉控制台的分離視圖,或者也可以點擊在chrome調試工具視窗左下角的Show/Hide Console按鈕.看圖說話

清除控制台歷史記錄

要清除控制台歷史記錄,可以選擇一下方式中的一種:

• 右擊或者Ctrl-click控制台內任何地區出現文本菜單選擇Clear Console.
• 在控制台輸入clear()斷行符號(Command Line API).
• 輸入console.clear()斷行符號(Console API).
• 按下鍵盤上 ?K 或者 ?L (Mac) Control - L (Windows and Linux).

當你跳轉到其他網頁時控制台預設會清空記錄,通過控制台地區的設定對話方塊設定Preserve log upon navigation可以改變這個行為 (詳見 Console preferences).

控制台設定

控制台有兩個全域的設定可以修改在通用的設定對話方塊內:

• Log XMLHTTPRequests—每一個完成的XMLHTTPRequest 請求顯示在空台上.
• Preserve log upon navigation—頁面重新整理或跳轉時不清除記錄. 預設兩個設定是不生效的.

也可以右擊控制台內任意地區在彈出的文本菜單內設定.

 

Console API的使用

Console API就是調試工具定義的全域對象console提供的方法集合.其中一個主要目的就是當你的應用運行時將日誌資訊(比如一個變數值,或者一個對象再或者DOM元素)輸出到控制台.為了避免視覺混亂也可以有組織的輸出到控制台.

控制台的書寫

console.log() 方法可以傳遞一個或多個運算式作為參數,並且會輸出他們的當前值到控制台.例如:

var a = document.createElement(‘p‘);a.appendChild(document.createTextNode(‘foo‘));a.appendChild(document.createTextNode(‘bar‘));console.log("Node count: " + a.childNodes.length);

通過"+"操作符將運算式串連到一起(如上所示),你可以放置每一個它自己的方法參數而且他們被串連成以空格分隔的行.

console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());

錯誤和警告

console.error()方法會以一個紅叉的表徵圖和紅色字型展示文本資訊.


function connectToServer() {    console.error("Error: %s (%i)", "Server is  not responding",500);}connectToServer();

console.warn()方法會帶有黃色表徵圖展示文本資訊.

if(a.childNodes.length < 3 ) {    console.warn(‘Warning! Too few nodes (%d)‘, a.childNodes.length);}

斷言

console.assert()方法會在第一個參數值為false時拋出一個異常(第二個參數).比如下面的例子,當list元素的子節點個數大於500的時候會拋出一個錯誤資訊到控制台.


console.assert(list.childNodes.length < 500, "Node count is > 500");

控制台資訊的過濾

通過嚴格的層級控制可以快速過濾控制台輸出資訊--錯誤,警告,或者標準日誌資訊--選擇其中一個過濾選項.可以通過點擊漏鬥(如下所示)去選擇一個你想要使用的條件.

過濾選項:

• All—展示所有控制台輸出資訊.
• Errors—僅展示從console.error()的輸出資訊
• Warnings—僅展示從console.warn()的輸出資訊
• Logs—僅展示從console.log(), console.info()和console.debug()的輸出資訊.
• Debug—僅展示從console.timeEnd()和其他控制台輸出.

組織化輸出

在控制台使用console.group()和groupEnd()命令可以在控制台顯示輸出一個嵌套塊.

var user = "jsmith", authenticated = false;
console.group("Authentication phase");    
console.log("Authenticating user ‘%s‘", user);    
// authentication code here...    
if (!authenticated) {        
　　console.log("User ‘%s‘ not authenticated.", user)
}    
console.groupEnd();

多層嵌套也是可以的,在下面的樣本中建立一個日誌組登入過程的驗證階段.如果使用者已驗證,授權階段將會建立一個嵌套組.

var user = "jsmith", authenticated = true, authorized = true;
// Top-level 
groupconsole.group("Authenticating user ‘%s‘", user);
if (authenticated) {    
　　console.log("User ‘%s‘ was authenticated", user);    
　　// Start nested group    
　　console.group("Authorizing user ‘%s‘", user);    
　　if (authorized) {        
　　　　console.log("User ‘%s‘ was authorized.", user);    
　　}    
　　// End nested group    
　　console.groupEnd();
}
// End top-level 
groupconsole.groupEnd();
console.log("A group-less log trace.");

要建立一個預設收合的組,可以使用console.groupCollapsed().看下面的例子:

console.groupCollapsed("Authenticating user ‘%s‘", user);if (authenticated) {  ...}

字串替換和格式化

任何一個傳遞給控制台的日誌方法(例如log(),error())的第一個參數都可能包含一個或多個預留位置.預留位置由一個%和一個聲明應該用於插入實值型別的字母(比如%s 字串).預留位置會識別在哪替換後面提供的參數值.

下面的例子就是使用%s(字串)和%d(整數)預留位置來插入值到控制台輸出中.

console.log("%s has %d points", "Sam", "100");

輸出結果是"Sam has 100 points"

下面的表格就是一些預留位置的資訊:

預留位置	描述
%s	字串.
%d or %i	整數.
%f	浮點數.
%o	dom元素的連結.
%O	js對象的連結.
%c	css格式字串.

下面的例子是用預留位置%d將document的子節點數量式化為整數,用預留位置%f將時間格式化為時間戳記.

console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());

dom元素&JS對象

預設情況下,當你輸出一個DOM元素到控制台顯示為XML格式,如元素麵板:

console.log(document.body.firstElementChild);

當然也可以使用console.dir()來顯示對象的全部屬性

console.dir(document.body.firstElementChild);

等價的也可以通過console.log()使用預留位置 %O來實現上面的結果.

console.log("%O", document.body.firstElementChild);

控制台&css

在console.log()裡面使用預留位置%c可以實現在控制台的輸出樣式.

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

時間檢測

console.time()和console.timeEnd()方法可以協助我們檢測一個方法需要用多長時間完成.console.time()放在要開始檢測的任務前面來開啟時間檢測,在任務的末尾添加console.timeEnd()來停止,時間差將會輸出到控制台.


console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {    
　　array[i] = new Object();
};
console.timeEnd("Array initialize");

注意:在console.time()和timeEnd()裡面必須要使用相同的字串,否則可能會得不到你想要的結果.

斷點調試

可以開啟debug模式在你的js代碼中寫入debugger命令.下面的例子示範了當brightness()方法執行時呼出debug模式:

brightness : function() {    
　　debugger;    
　　var r = Math.floor(this.red*255);    
　　var g = Math.floor(this.green*255);    
　　var b = Math.floor(this.blue*255);    
　　return (r * 77 + g * 150 + b * 29) >> 8;
}

 

附上一篇非常有趣的調試文章Breakpoint Actions in JavaScript--Brian Arnold

 

Command Line API

下期繼續...

 

 

 

中文console api: http://visionsky.blog.51cto.com/733317/543789