控制台提供了兩個主要的方法給開發者測試網頁和應用程序:
通過使用控制台提供的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