轉載自：https://segmentfault.com/a/1190000004528137。
console對象是JavaScript的原生對象，它有點(diǎn)像Unix系統的標準輸出stdout和標準錯誤stderr，可以輸出各種信息用來(lái)調試程序，而且還提供了很多額外的方法，供開(kāi)發(fā)者調用。它的常見(jiàn)用途有兩個(gè)。
顯示網(wǎng)頁(yè)代碼運行時(shí)的錯誤信息。
提供了一個(gè)命令行接口，用來(lái)與網(wǎng)頁(yè)代碼互動(dòng)。
console對象的瀏覽器實(shí)現，包含在瀏覽器自帶的開(kāi)發(fā)工具之中。以Chrome瀏覽器的“開(kāi)發(fā)者工具”（Developer Tools）為例，首先使用下面三種方法的一種打開(kāi)它。
按F12或者Control + Shift + i（PC平臺）/ Alt + Command + i（Mac平臺）。
在菜單中選擇“工具/開(kāi)發(fā)者工具”。
在一個(gè)頁(yè)面元素上，打開(kāi)右鍵菜單，選擇其中的“Inspect Element”。
打開(kāi)“開(kāi)發(fā)者工具”以后，可以看到在頂端有八個(gè)面板卡可供選擇，分別是：
Elements：用來(lái)調試網(wǎng)頁(yè)的HTML源碼和CSS代碼。
Resources：查看網(wǎng)頁(yè)加載的各種資源文件（比如代碼文件、字體文件、css文件等），以及在硬盤(pán)上創(chuàng )建的各種內容（比如本地緩存、Cookie、Local Storage等）。
Network：查看網(wǎng)頁(yè)的HTTP通信情況。
Sources：調試JavaScript代碼。
Timeline：查看各種網(wǎng)頁(yè)行為隨時(shí)間變化的情況。
Profiles：查看網(wǎng)頁(yè)的性能情況，比如CPU和內存消耗。
Audits：提供網(wǎng)頁(yè)優(yōu)化的建議。
Console：用來(lái)運行JavaScript命令。
這八個(gè)面板都有各自的用途。以下內容只針對Console面板，又稱(chēng)為控制臺。Console面板基本上就是一個(gè)命令行窗口，你可以在提示符下，鍵入各種命令。
console對象提供的各種方法，用來(lái)與控制臺窗口互動(dòng)。
console.log方法用于在console窗口輸出信息。它可以接受多個(gè)參數，將它們的結果連接起來(lái)輸出。
console.log("Hello World")// Hello Worldconsole.log("a","b","c")// a b cconsole.log方法會(huì )自動(dòng)在每次輸出的結尾，添加換行符。
console.log(1);console.log(2);console.log(3);// 1// 2// 3如果第一個(gè)參數是格式字符串（使用了格式占位符），console.log方法將依次用后面的參數替換占位符，然后再進(jìn)行輸出。
console.log(' %s + %s = %s', 1, 1, 2)// 1 + 1 = 2上面代碼中，console.log方法的第一個(gè)參數有三個(gè)占位符（%s），第二、三、四個(gè)參數會(huì )在顯示時(shí)，依次替換掉這個(gè)三個(gè)占位符。console.log方法支持的占位符格式有以下一些，不同格式的數據必須使用對應格式的占位符。
%s 字符串
%d 整數
%i 整數
%f 浮點(diǎn)數
%o 對象的鏈接
%c CSS格式字符串
var number = 11 * 9;var color = 'red';console.log('%d %s balloons', number, color);// 99 red balloons上面代碼中，第二個(gè)參數是數值，對應的占位符是%d，第三個(gè)參數是字符串，對應的占位符是%s。
使用%c占位符時(shí)，對應的參數必須是CSS語(yǔ)句，用來(lái)對輸出內容進(jìn)行CSS渲染。
console.log('%cThis text is styled!', 'color: red; background: yellow; font-size: 24px;')上面代碼運行后，輸出的內容將顯示為黃底紅字。
console.log方法的兩種參數格式，可以結合在一起使用。
console.log(' %s + %s ', 1, 1, '= 2')// 1 + 1 = 2如果參數是一個(gè)對象，console.log會(huì )顯示該對象的值。
console.log({foo: 'bar'})// Object {foo: "bar"}console.log(Date)// function Date() { [native code] }上面代碼輸出Date對象的值，結果為一個(gè)構造函數。
console.info()和console.debug()都是console.log方法的別名，用法完全一樣。只不過(guò)console.info方法會(huì )在輸出信息的前面，加上一個(gè)藍色圖標。
console對象的所有方法，都可以被覆蓋。因此，可以按照自己的需要，定義console.log方法。
['log', 'info', 'warn', 'error'].forEach(function(method) { console[method] = console[method].bind( console, new Date().toISOString() );});console.log("瞧，我在前面添加了現在的時(shí)間！");// 2014-05-18T09:00.000Z 出錯了！上面代碼表示，使用自定義的console.log方法，可以在顯示結果添加當前時(shí)間。
warn方法和error方法也是輸出信息，它們與log方法的不同之處在于，warn方法輸出信息時(shí)，在最前面加一個(gè)黃色三角，表示警告；error方法輸出信息時(shí)，在最前面加一個(gè)紅色的叉，表示出錯，同時(shí)會(huì )顯示錯誤發(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)本質(zhì)上，log方法是寫(xiě)入標準輸出（stdout），warn方法和error方法是寫(xiě)入標準錯誤（stderr）。
對于某些復合類(lèi)型的數據，console.table方法可以將其轉為表格顯示。
var languages = [ { name: "JavaScript", fileExtension: ".js" }, { name: "TypeScript", fileExtension: ".ts" }, { name: "CoffeeScript", fileExtension: ".coffee" }];console.table(languages);上面代碼的language，轉為表格顯示如下。
復合型數據轉為表格顯示的條件是，必須擁有主鍵。對于上面的數組來(lái)說(shuō)，主鍵就是數字鍵。對于對象來(lái)說(shuō)，主鍵就是它的最外層鍵。
var languages = { csharp: { name: "C#", paradigm: "object-oriented" }, fsharp: { name: "F#", paradigm: "functional" }};console.table(languages);上面代碼的language，轉為表格顯示如下。
count方法用于計數，輸出它被調用了多少次。
function greet(user) { console.count(); return "hi " + user;}greet('bob')// : 1// "hi bob"greet('alice')// : 2// "hi alice"greet('bob')// : 3// "hi bob"上面代碼每次調用greet函數，內部的console.count方法就輸出執行次數。
該方法可以接受一個(gè)字符串作為參數，作為標簽，對執行次數進(jìn)行分類(lèi)。
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"上面代碼根據參數的不同，顯示bob執行了兩次，alice執行了一次。
dir方法用來(lái)對一個(gè)對象進(jìn)行檢查（inspect），并以易于閱讀和打印的格式顯示。
console.log({f1: 'foo', f2: 'bar'})// Object {f1: "foo", f2: "bar"}console.dir({f1: 'foo', f2: 'bar'})// Object// f1: "foo"http:// f2: "bar"http:// __proto__: Object上面代碼顯示dir方法的輸出結果，比log方法更易讀，信息也更豐富。
該方法對于輸出DOM對象非常有用，因為會(huì )顯示DOM對象的所有屬性。
console.dir(document.body)assert方法接受兩個(gè)參數，第一個(gè)參數是表達式，第二個(gè)參數是字符串。只有當第一個(gè)參數為false，才會(huì )輸出第二個(gè)參數，否則不會(huì )有任何結果。
// 實(shí)例console.assert(true === false, "判斷條件不成立")// Assertion failed: 判斷條件不成立下面是另一個(gè)例子，判斷子節點(diǎn)的個(gè)數是否大于等于500。
console.assert(list.childNodes.length < 500, "節點(diǎn)個(gè)數大于等于500")這兩個(gè)方法用于計時(shí)，可以算出一個(gè)操作所花費的準確時(shí)間。
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.481mstime方法表示計時(shí)開(kāi)始，timeEnd方法表示計時(shí)結束。它們的參數是計時(shí)器的名稱(chēng)。調用timeEnd方法之后，console窗口會(huì )顯示“計時(shí)器名稱(chēng): 所耗費的時(shí)間”。
console.profile方法用來(lái)新建一個(gè)性能測試器（profile），它的參數是性能測試器的名字。
console.profile('p')// Profile 'p' started.console.profileEnd方法用來(lái)結束正在運行的性能測試器。
console.profileEnd()// Profile 'p' finished.打開(kāi)瀏覽器的開(kāi)發(fā)者工具，在profile面板中，可以看到這個(gè)性能調試器的運行結果。
console.group和console.groupend這兩個(gè)方法用于將顯示的信息分組。它只在輸出大量信息時(shí)有用，分在一組的信息，可以用鼠標折疊/展開(kāi)。
console.group('Group One');console.group('Group Two');// some codeconsole.groupEnd(); // Group Two 結束console.groupEnd(); // Group One 結束console.groupCollapsed方法與console.group方法很類(lèi)似，唯一的區別是該組的內容，在第一次顯示時(shí)是收起的（collapsed），而不是展開(kāi)的。
console.groupCollapsed('Fetching Data');console.log('Request Sent');console.error('Error: Server not responding (500)');console.groupEnd();上面代碼只顯示一行”Fetching Data“，點(diǎn)擊后才會(huì )展開(kāi)，顯示其中包含的兩行。
console.trace方法顯示當前執行的代碼在堆棧中的調用路徑。
console.trace()// console.trace()// (anonymous function)// InjectedScript._evaluateOn// InjectedScript._evaluateAndWrap// InjectedScript.evaluateconsole.clear方法用于清除當前控制臺的所有輸出，將光標回置到第一行。
在控制臺中，除了使用console對象，還可以使用一些控制臺自帶的命令行方法。
$_屬性返回上一個(gè)表達式的值。
2+2// 4$_// 4控制臺保存了最近5個(gè)在Elements面板選中的DOM元素，
$(selector)返回一個(gè)數組，包括特定的CSS選擇器匹配的所有DOM元素。該方法實(shí)際上是document.querySelectorAll方法的別名。
var images = $('img');for (each in images) { console.log(images[each].src);}上面代碼打印出網(wǎng)頁(yè)中所有img元素的src屬性。
$$(selector)返回一個(gè)選中的DOM對象，等同于document.querySelectorAll。
$x(path)方法返回一個(gè)數組，包含匹配特定XPath表達式的所有DOM元素。
$x("http://p[a]")上面代碼返回所有包含a元素的p元素。
inspect(object)方法打開(kāi)相關(guān)面板，并選中相應的元素：DOM元素在Elements面板中顯示，JavaScript對象在Profiles中顯示。
getEventListeners(object)方法返回一個(gè)對象，該對象的成員為登記了回調函數的各種事件（比如click或keydown），每個(gè)事件對應一個(gè)數組，數組的成員為該事件的回調函數。
keys(object)方法返回一個(gè)數組，包含特定對象的所有鍵名。
values(object)方法返回一個(gè)數組，包含特定對象的所有鍵值。
var o = {'p1':'a', 'p2':'b'};keys(o)// ["p1", "p2"]values(o)// ["a", "b"]monitorEvents(object[, events])方法監聽(tīng)特定對象上發(fā)生的特定事件。當這種情況發(fā)生時(shí)，會(huì )返回一個(gè)Event對象，包含該事件的相關(guān)信息。unmonitorEvents方法用于停止監聽(tīng)。
monitorEvents(window, "resize");monitorEvents(window, ["resize", "scroll"])上面代碼分別表示單個(gè)事件和多個(gè)事件的監聽(tīng)方法。
monitorEvents($0, "mouse");unmonitorEvents($0, "mousemove");上面代碼表示如何停止監聽(tīng)。
monitorEvents允許監聽(tīng)同一大類(lèi)的事件。所有事件可以分成四個(gè)大類(lèi)。
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");上面代碼表示監聽(tīng)所有key大類(lèi)的事件。
profile方法用于啟動(dòng)一個(gè)特定名稱(chēng)的CPU性能測試，profileEnd方法用于結束該性能測試。
profile("My profile")profileEnd("My profile")命令行API還提供以下方法。
clear()方法清除控制臺的歷史。
copy(object)方法復制特定DOM元素到剪貼板。
dir(object)方法顯示特定對象的所有屬性，是console.dir方法的別名。
dirxml(object)方法顯示特定對象的XML形式，是console.dirxml方法的別名。
debugger語(yǔ)句必須與除錯工具配合使用，如果沒(méi)有除錯工具，debugger語(yǔ)句不會(huì )產(chǎn)生任何結果。
在chrome瀏覽器中，當代碼運行到debugger指定的行時(shí)，就會(huì )暫停運行，自動(dòng)打開(kāi)console界面。它的作用類(lèi)似于設置斷點(diǎn)。
for(var i = 0;i<5;i++){ console.log(i); if (i===2) debugger;}上面代碼打印出0，1，2以后，就會(huì )暫停，自動(dòng)打開(kāi)console窗口，等待進(jìn)一步處理。
聯(lián)系客服
