浏覽器的控制台（console）是最重要的面闆，主要作用是顯示網頁加載過程中産生各類資訊。
顯示資訊
console.log('hello world');
console.debug('debug');
console.info('資訊');
console.error('錯誤');
console.warn('警告'); 最常用的就是
console.log
了。
占位符
console
對象還可以使用 printf 風格的占位符。不過隻支援字元（
%s
）、整數（
%d
或
%i
）、浮點數（
%f
）、對象（
%o
）和 css 樣式（
%c
）。
var person = {};
person.name = 'Jack';
person.age = 30;
console.log('%o', person);
console.log('%d年%d月%d日', 2016, 08, 23);
console.log('圓周率：%f', 3.1415926);
console.log('%c改變文本顔色', 'color:green;'); 資訊分組
console.group("第一組資訊");
console.log("第一組第一條");
console.log("第一組第二條");
console.groupEnd();
console.group("第二組資訊");
console.log("第二組第一條");
console.log("第二組第二條");
console.groupEnd(); 檢視對象的資訊
console.dir()
可以顯示一個對象所有的屬性和方法。
var person = {};
person.name = 'Jack';
person.age = 30;
person.talk = function(str) {
console.log(str);
}
console.dir(person); 顯示某個節點的内容
console.dirxml()
用來顯示網頁的某個節點（node）所包含的 html/xml 代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Document</title>
</head>
<body>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
<script>
var oTable = document.getElementById('table');
console.log(oTable);
</script> 判斷是否為真
console.assert()
用來判斷一個表達式或變量是否為真。如果結果為否，則在控制台輸出一條相應資訊，并且抛出一個異常。
console.assert(1);
console.assert(1 === 2); 追蹤函數的調用軌迹
console.trace()
用來追蹤函數的調用軌迹。
function add(a, b) {
console.trace();
return a + b;
}
var x = add3(1, 1);
function add3(a, b) {
return add2(a, b);
}
function add2(a, b) {
return add1(a, b);
}
function add1(a, b) {
return add(a, b);
} 運作後，會顯示
add()
的調用軌迹，從上到下依次為
add()
、
add1()
add2()
add3()
。
計時功能
console.time()
和
console.timeEnd()
，用來顯示代碼的運作時間。
console.time('計時器一');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('計時器一'); 性能分析
性能分析（Profiler）就是分析程式各個部分的運作時間，找出瓶頸所在，使用的方法是
console.profile()
假定有一個函數
Foo()
，裡面調用了另外兩個函數
funcA()
funcB()
，其中
funcA()
調用 10 次，
funcB()
調用 1 次。
function Foo() {
for (var i = 0; i < 10; i++) {
funcA(1000);
}
funcB(10000);
}
function funcA(count) {
for (var i = 0; i < count; i++) {}
}
function funcB(count) {
for (var i = 0; i < count; i++) {}
} 然後，就可以分析
Foo()
的運作性能了。
console.profile('性能分析器一');
Foo();
console.profileEnd(); 參考資料
- Firebug控制台詳解
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)