alert

這個不用多說了，不言自明

console

基本輸出

想必大家都在用console.log在控制檯輸出點東西，其實console還有其它的方法：

console.log("打印字符串");//在控制檯打印自定義字符串
console.error("我是個錯誤");//在控制檯打印自定義錯誤信息
console.info("我是個信息");//在控制檯打印自定義信息
console.warn("我是個警告");//在控制檯打印自定義警告信息
console.debug("我是個調試");//在控制檯打印自定義調試信息
cosole.clear();//清空控制檯（這個下方截圖中沒有）

注意上面輸出的error和throw出的error不一樣，前者只是輸出錯誤信息，無法捕獲，不會冒泡，更不會中止程序運行。

格式化輸出

除此以外，console還支持自定義樣式和類似c語言的printf形式

console.log("%s年",2016);//%s表示字符串
console.log("%d年%d月",2016,11);//%d表示整數
console.log("%f",3.1415926);//%f小數
console.log("%o",console);//%o表示對象
console.log("%c自定義樣式","font-size:30px;color:#00f");
console.log("%c我是%c自定義樣式","font-size:20px;color:green","font-size:10px;color:red");

DOM輸出

下面幾個比較簡單的，就不舉例子了，簡單說一下：

var ul = document.getElementsByTagName("ul");
console.dirxml(ul); //樹形輸出table節點，即

對象輸出

var o = {
 name:"Lily", 

 age: 18
};
console.dir(obj);//顯示對象自有屬性和方法

對於多個對象的集合，你可以這樣，輸出更清晰：

var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}];
console.log(stu);
console.table(stu);

成組輸出

//建立一個參數組
console.group("start"); //引號裡是組名，自己起
console.log("sub1");
console.log("sub1");
console.log("sub1");
console.groupEnd("end");

函數計數和跟蹤

function fib(n){ //輸出前n個斐波那契數列值
 if(n == 0) return;
 console.count("調用次數");//放在函數里，每當這句代碼運行輸出所在函數執行次數 

 console.trace();//顯示函數調用軌跡(訪問調用棧）
 var a = arguments[1] || 1;
 var b = arguments[2] || 1;
 console.log("fib=" + a);
 [a, b] = [b, a + b];
 fib(--n, a, b);
}
fib(6);

注：Chrome開發者工具中的Sources標籤頁也在Watch表達式下面顯示調用棧。

計時

console.time() //計時開始
fib(100); //用上述函數計算100個斐波那契數 

console.timeEnd() //計時結束並輸出時長

斷言語句

js中，當第一個表達式或參數為true時候什麼也不發生，false時終止程序並報錯

console.assert(true, "我錯了");
console.assert(false, "我真的錯了");

性能分析

function F(){
 var i = 0;
 function f(){
 while(i++ == 1000);
 }
 function g(){
 while(i++ == 100000);
 }
 f();
 g();
}
console.profile();
F();
console.profileEnd();

注：Chrome開發者工具中的Audits標籤頁也可以實現性能分析。

轉自：https://segmentfault.com/a/1190000016256731

閱讀更多 影帝小碼 的文章

關鍵字: 技術 輸出 不言自明