console
對象并不是 JavaScript 的原生對象,它有點(diǎn)像 Unix 系統(tǒng)的標(biāo)準(zhǔn)輸出stdout
和標(biāo)準(zhǔn)錯誤stderr
,可以輸出各種信息到控制臺,并且還提供了很多有用的輔助方法。
console
的常見用途有兩個。
- 調(diào)試程序,顯示網(wǎng)頁代碼運(yùn)行時的錯誤信息。
- 提供了一個命令行接口,用來與網(wǎng)頁代碼互動。
console
對象的瀏覽器實現(xiàn),包含在瀏覽器自帶的開發(fā)工具之中。以 Chrome 瀏覽器的“開發(fā)者工具”(Developer Tools)為例,可以使用下面三種方法的打開它。
- 按 F12 或者
Control + Shift + i
(PC)/Command + Option + i
(Mac)。 - 瀏覽器菜單選擇“工具/開發(fā)者工具”。
- 在一個頁面元素上,打開右鍵菜單,選擇其中的“Inspect Element”。
打開開發(fā)者工具以后,頂端有多個面板。
- Elements:查看網(wǎng)頁的 HTML 源碼和 CSS 代碼。
- Resources:查看網(wǎng)頁加載的各種資源文件(比如代碼文件、字體文件 CSS 文件等),以及在硬盤上創(chuàng)建的各種內(nèi)容(比如本地緩存、Cookie、Local Storage等)。
- Network:查看網(wǎng)頁的 HTTP 通信情況。
- Sources:查看網(wǎng)頁加載的腳本源碼。
- Timeline:查看各種網(wǎng)頁行為隨時間變化的情況。
- Performance:查看網(wǎng)頁的性能情況,比如 CPU 和內(nèi)存消耗。
- Console:用來運(yùn)行 JavaScript 命令。
這些面板都有各自的用途,以下只介紹Console
面板(又稱為控制臺)。
Console
面板基本上就是一個命令行窗口,你可以在提示符下,鍵入各種命令。
console 對象的靜態(tài)方法
console
對象提供的各種靜態(tài)方法,用來與控制臺窗口互動。
console.log(),console.info(),console.debug()
console.log
方法用于在控制臺輸出信息。它可以接受一個或多個參數(shù),將它們連接起來輸出。
console.log('Hello World')
// Hello World
console.log('a', 'b', 'c')
// a b c
console.log
方法會自動在每次輸出的結(jié)尾,添加換行符。
console.log(1);
console.log(2);
console.log(3);
// 1
// 2
// 3
如果第一個參數(shù)是格式字符串(使用了格式占位符),console.log
方法將依次用后面的參數(shù)替換占位符,然后再進(jìn)行輸出。
console.log(' %s + %s = %s', 1, 1, 2)
// 1 + 1 = 2
上面代碼中,console.log
方法的第一個參數(shù)有三個占位符(%s
),第二、三、四個參數(shù)會在顯示時,依次替換掉這個三個占位符。
console.log
方法支持以下占位符,不同類型的數(shù)據(jù)必須使用對應(yīng)的占位符。
%s
字符串%d
整數(shù)%i
整數(shù)%f
浮點(diǎn)數(shù)%o
對象的鏈接%c
CSS 格式字符串
var number = 11 * 9;
var color = 'red';
console.log('%d %s balloons', number, color);
// 99 red balloons
上面代碼中,第二個參數(shù)是數(shù)值,對應(yīng)的占位符是%d
,第三個參數(shù)是字符串,對應(yīng)的占位符是%s
。
使用%c
占位符時,對應(yīng)的參數(shù)必須是 CSS 代碼,用來對輸出內(nèi)容進(jìn)行 CSS 渲染。
console.log(
'%cThis text is styled!',
'color: red; background: yellow; font-size: 24px;'
)
上面代碼運(yùn)行后,輸出的內(nèi)容將顯示為黃底紅字。
console.log
方法的兩種參數(shù)格式,可以結(jié)合在一起使用。
console.log(' %s + %s ', 1, 1, '= 2')
// 1 + 1 = 2
如果參數(shù)是一個對象,console.log
會顯示該對象的值。
console.log({foo: 'bar'})
// Object {foo: "bar"}
console.log(Date)
// function Date() { [native code] }
上面代碼輸出Date
對象的值,結(jié)果為一個構(gòu)造函數(shù)。
console.info
是console.log
方法的別名,用法完全一樣。只不過console.info
方法會在輸出信息的前面,加上一個藍(lán)色圖標(biāo)。
console.debug
方法與console.log
方法類似,會在控制臺輸出調(diào)試信息。但是,默認(rèn)情況下,console.debug
輸出的信息不會顯示,只有在打開顯示級別在verbose
的情況下,才會顯示。
console
對象的所有方法,都可以被覆蓋。因此,可以按照自己的需要,定義console.log
方法。
['log', 'info', 'warn', 'error'].forEach(function(method) {
console[method] = console[method].bind(
console,
new Date().toISOString()
);
});
console.log("出錯了!");
// 2014-05-18T09:00.000Z 出錯了!
上面代碼表示,使用自定義的console.log
方法,可以在顯示結(jié)果添加當(dāng)前時間。
console.warn(),console.error()
warn
方法和error
方法也是在控制臺輸出信息,它們與log
方法的不同之處在于,warn
方法輸出信息時,在最前面加一個黃色三角,表示警告;error
方法輸出信息時,在最前面加一個紅色的叉,表示出錯。同時,還會高亮顯示輸出文字和錯誤發(fā)生的堆棧。其他方面都一樣。
console.error('Error: %s (%i)', 'Server is not responding', 500)
// Error: Server is not responding (500)
console.warn('Warning! Too few nodes (%d)', document.childNodes.length)
// Warning! Too few nodes (1)
可以這樣理解,log
方法是寫入標(biāo)準(zhǔn)輸出(stdout
),warn
方法和error
方法是寫入標(biāo)準(zhǔn)錯誤(stderr
)。
console.table()
對于某些復(fù)合類型的數(shù)據(jù),console.table
方法可以將其轉(zhuǎn)為表格顯示。
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);
上面代碼的language
變量,轉(zhuǎn)為表格顯示如下。
(index) | name | fileExtension |
---|---|---|
0 | "JavaScript" | ".js" |
1 | "TypeScript" | ".ts" |
2 | "CoffeeScript" | ".coffee" |
下面是顯示表格內(nèi)容的例子。
var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
};
console.table(languages);
上面代碼的language
,轉(zhuǎn)為表格顯示如下。
(index) | name | paradigm |
---|---|---|
csharp | "C#" | "object-oriented" |
fsharp | "F#" | "functional" |
console.count()
count
方法用于計數(shù),輸出它被調(diào)用了多少次。
function greet(user) {
console.count();
return 'hi ' + user;
}
greet('bob')
// : 1
// "hi bob"
greet('alice')
// : 2
// "hi alice"
greet('bob')
// : 3
// "hi bob"
上面代碼每次調(diào)用greet
函數(shù),內(nèi)部的console.count
方法就輸出執(zhí)行次數(shù)。
該方法可以接受一個字符串作為參數(shù),作為標(biāo)簽,對執(zhí)行次數(shù)進(jìn)行分類。
function greet(user) {
console.count(user);
return "hi " + user;
}
greet('bob')
// bob: 1
// "hi bob"
greet('alice')
// alice: 1
// "hi alice"
greet('bob')
// bob: 2
// "hi bob"
上面代碼根據(jù)參數(shù)的不同,顯示bob
執(zhí)行了兩次,alice
執(zhí)行了一次。
console.dir(),console.dirxml()
dir
方法用來對一個對象進(jìn)行檢查(inspect),并以易于閱讀和打印的格式顯示。
console.log({f1: 'foo', f2: 'bar'})
// Object {f1: "foo", f2: "bar"}
console.dir({f1: 'foo', f2: 'bar'})
// Object
// f1: "foo"
// f2: "bar"
// __proto__: Object
上面代碼顯示dir
方法的輸出結(jié)果,比log
方法更易讀,信息也更豐富。
該方法對于輸出 DOM 對象非常有用,因為會顯示 DOM 對象的所有屬性。
console.dir(document.body)
Node 環(huán)境之中,還可以指定以代碼高亮的形式輸出。
console.dir(obj, {colors: true})
dirxml
方法主要用于以目錄樹的形式,顯示 DOM 節(jié)點(diǎn)。
console.dirxml(document.body)
如果參數(shù)不是 DOM 節(jié)點(diǎn),而是普通的 JavaScript 對象,console.dirxml
等同于console.dir
。
console.dirxml([1, 2, 3])
// 等同于
console.dir([1, 2, 3])
console.assert()
console.assert
方法主要用于程序運(yùn)行過程中,進(jìn)行條件判斷,如果不滿足條件,就顯示一個錯誤,但不會中斷程序執(zhí)行。這樣就相當(dāng)于提示用戶,內(nèi)部狀態(tài)不正確。
它接受兩個參數(shù),第一個參數(shù)是表達(dá)式,第二個參數(shù)是字符串。只有當(dāng)?shù)谝粋€參數(shù)為false
,才會提示有錯誤,在控制臺輸出第二個參數(shù),否則不會有任何結(jié)果。
console.assert(false, '判斷條件不成立')
// Assertion failed: 判斷條件不成立
// 相當(dāng)于
try {
if (!false) {
throw new Error('判斷條件不成立');
}
} catch(e) {
console.error(e);
}
下面是一個例子,判斷子節(jié)點(diǎn)的個數(shù)是否大于等于500。
console.assert(list.childNodes.length < 500, '節(jié)點(diǎn)個數(shù)大于等于500')
上面代碼中,如果符合條件的節(jié)點(diǎn)小于500個,不會有任何輸出;只有大于等于500時,才會在控制臺提示錯誤,并且顯示指定文本。
console.time(),console.timeEnd()
這兩個方法用于計時,可以算出一個操作所花費(fèi)的準(zhǔn)確時間。
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');
// Array initialize: 1914.481ms
time
方法表示計時開始,timeEnd
方法表示計時結(jié)束。它們的參數(shù)是計時器的名稱。調(diào)用timeEnd
方法之后,控制臺會顯示“計時器名稱: 所耗費(fèi)的時間”。
console.group(),console.groupEnd(),console.groupCollapsed()
console.group
和console.groupEnd
這兩個方法用于將顯示的信息分組。它只在輸出大量信息時有用,分在一組的信息,可以用鼠標(biāo)折疊/展開。
console.group('一級分組');
console.log('一級分組的內(nèi)容');
console.group('二級分組');
console.log('二級分組的內(nèi)容');
console.groupEnd(); // 二級分組結(jié)束
console.groupEnd(); // 一級分組結(jié)束
上面代碼會將“二級分組”顯示在“一級分組”內(nèi)部,并且“一級分組”和“二級分組”前面都有一個折疊符號,可以用來折疊本級的內(nèi)容。
console.groupCollapsed
方法與console.group
方法很類似,唯一的區(qū)別是該組的內(nèi)容,在第一次顯示時是收起的(collapsed),而不是展開的。
console.groupCollapsed('Fetching Data');
console.log('Request Sent');
console.error('Error: Server not responding (500)');
console.groupEnd();
上面代碼只顯示一行”Fetching Data“,點(diǎn)擊后才會展開,顯示其中包含的兩行。
console.trace(),console.clear()
console.trace
方法顯示當(dāng)前執(zhí)行的代碼在堆棧中的調(diào)用路徑。
console.trace()
// console.trace()
// (anonymous function)
// InjectedScript._evaluateOn
// InjectedScript._evaluateAndWrap
// InjectedScript.evaluate
console.clear
方法用于清除當(dāng)前控制臺的所有輸出,將光標(biāo)回置到第一行。如果用戶選中了控制臺的“Preserve log”選項,console.clear
方法將不起作用。
控制臺命令行 API
瀏覽器控制臺中,除了使用console
對象,還可以使用一些控制臺自帶的命令行方法。
(1)$_
$_
屬性返回上一個表達(dá)式的值。
2 + 2
// 4
$_
// 4
(2)$0
- $4
控制臺保存了最近5個在 Elements 面板選中的 DOM 元素,$0
代表倒數(shù)第一個(最近一個),$1
代表倒數(shù)第二個,以此類推直到$4
。
(3)$(selector)
$(selector)
返回第一個匹配的元素,等同于document.querySelector()
。注意,如果頁面腳本對$
有定義,則會覆蓋原始的定義。比如,頁面里面有 jQuery,控制臺執(zhí)行$(selector)
就會采用 jQuery 的實現(xiàn),返回一個數(shù)組。
(4)$$(selector)
$$(selector)
返回選中的 DOM 對象,等同于document.querySelectorAll
。
(5)$x(path)
$x(path)
方法返回一個數(shù)組,包含匹配特定 XPath 表達(dá)式的所有 DOM 元素。
$x("http://p[a]")
上面代碼返回所有包含a
元素的p
元素。
(6)inspect(object)
inspect(object)
方法打開相關(guān)面板,并選中相應(yīng)的元素,顯示它的細(xì)節(jié)。DOM 元素在Elements
面板中顯示,比如inspect(document)
會在 Elements 面板顯示document
元素。JavaScript 對象在控制臺面板Profiles
面板中顯示,比如inspect(window)
。
(7)getEventListeners(object)
getEventListeners(object)
方法返回一個對象,該對象的成員為object
登記了回調(diào)函數(shù)的各種事件(比如click
或keydown
),每個事件對應(yīng)一個數(shù)組,數(shù)組的成員為該事件的回調(diào)函數(shù)。
(8)keys(object)
,values(object)
keys(object)
方法返回一個數(shù)組,包含object
的所有鍵名。
values(object)
方法返回一個數(shù)組,包含object
的所有鍵值。
var o = {'p1': 'a', 'p2': 'b'};
keys(o)
// ["p1", "p2"]
values(o)
// ["a", "b"]
(9)monitorEvents(object[, events]) ,unmonitorEvents(object[, events])
monitorEvents(object[, events])
方法監(jiān)聽特定對象上發(fā)生的特定事件。事件發(fā)生時,會返回一個Event
對象,包含該事件的相關(guān)信息。unmonitorEvents
方法用于停止監(jiān)聽。
monitorEvents(window, "resize");
monitorEvents(window, ["resize", "scroll"])
上面代碼分別表示單個事件和多個事件的監(jiān)聽方法。
monitorEvents($0, 'mouse');
unmonitorEvents($0, 'mousemove');
上面代碼表示如何停止監(jiān)聽。
monitorEvents
允許監(jiān)聽同一大類的事件。所有事件可以分成四個大類。
- mouse:"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
- key:"keydown", "keyup", "keypress", "textInput"
- touch:"touchstart", "touchmove", "touchend", "touchcancel"
- control:"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"
monitorEvents($("#msg"), "key");
上面代碼表示監(jiān)聽所有key
大類的事件。
(10)其他方法
命令行 API 還提供以下方法。
clear()
:清除控制臺的歷史。copy(object)
:復(fù)制特定 DOM 元素到剪貼板。dir(object)
:顯示特定對象的所有屬性,是console.dir
方法的別名。dirxml(object)
:顯示特定對象的 XML 形式,是console.dirxml
方法的別名。
debugger 語句
debugger
語句主要用于除錯,作用是設(shè)置斷點(diǎn)。如果有正在運(yùn)行的除錯工具,程序運(yùn)行到debugger
語句時會自動停下。如果沒有除錯工具,debugger
語句不會產(chǎn)生任何結(jié)果,JavaScript 引擎自動跳過這一句。
Chrome 瀏覽器中,當(dāng)代碼運(yùn)行到debugger
語句時,就會暫停運(yùn)行,自動打開腳本源碼界面。
for(var i = 0; i < 5; i++){
console.log(i);
if (i === 2) debugger;
}
上面代碼打印出0,1,2以后,就會暫停,自動打開源碼界面,等待進(jìn)一步處理。
參考鏈接
- Chrome Developer Tools, Using the Console
- Matt West, Mastering The Developer Tools Console
- Firebug Wiki, Console API
- Axel Rauschmayer, The JavaScript console API
- Marius Schulz, Advanced JavaScript Debugging with console.table()
- Google Developer, Command Line API Reference
更多建議: