實用的 Console

發表於 | 更新於 | 分類於

前言

介紹JS除錯時常用的 Console

Console

為全域 window 下的某個屬性Console。Console其是個物件(Object)，裡面有許多方法(methods)，那該如何開啟 Console呢？
請先打開瀏覽器(以Chrome來做示範)，滑鼠右鍵檢查或是 在鍵盤上按下F12 打開開發者工具，選擇 Console即完成。

1
2
3
4
5
6
7
//內建的 console
window.console;

window["console"];

window.console.log();
console.log();//可不用寫window

其實可以建立 自訂 console 物件，如有需要可以再呼叫全域的console是沒有問題的。

1
2
3
4
5
6
7
8
9
//或是定義別的名稱 ，如此一來就不用每次用完console.log()就把它註解或是砍掉，將isView設定為 false即可。

let console = {
    isView : true,
    log : function(...args){
        if(!this.isView) return;
        window.console.log(...args);
    }
};

log

顯示訊息文字在console上，

console.log()，參數分別有，字串、整是、物件等，可以使用逗點無限加入參數

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//Interpolated 字串格式 %s, %d, %f, %o
let str = "字串";
console.log('String: %s', str);
let ints = 999;
console.log('Int: %d', ints);
let floats = 99.09;
console.log('Float: %f', floats);
let obj = {
    a : 'apple'
};
console.log('Object: %o', obj);

或是使用ES6 的 `${}`
let es6 = "es6";
console.log(`${es6}`);

console.log("1234");
=> 1234

console.log("我是誰");
=> 我是誰

Styled

console 的訊息字改變樣式

1
2
3
4
console.log("這邊不會變成紅字%c住手，請勿使用Console", "Font-size:20px;Color:red");
//在%c之後的文字，將會套用後面寫的樣式

//可以看看各家網站的console吧

warn

! 警告 warning，可以在程式中標記

1
console.warn("Oops 警告");

error

錯誤 Error，可以在程式中標記 (少用)

1
console.error("Oops 發生錯誤");

info

類似於 log

1
console.info("資訊");

結語

本身在除蟲都只使用 log 而已，但其他還有很多好用的方法 可以在參考 MDN Console

0%