頁面連結(請打開 console 查看)

今天同樣不會做出東西，而是學習 console 的各種小技巧！大家可以將下面示範的程式碼貼在瀏覽器玩看看

console.log(..)

最基本的使用方式，常用來查看 JS 是否串接成功，或是當不確定狀況時查看變數或目前狀態

console.log('Hello world!');

// Hello world!

console.log(%s .. , ..)

這種方式可以插入值到字串當中，例如：

console.log('I am an %s string', '?');

// I am an ? string

可以看到 %s 被貓頭鷹 emoji 給取代了，這種用法有點類似在 C 之類的語言的表達方式（%s 代表 string），如果要帶入數字，則使用 %i 或者 %f（integer & float）

console.log(%c .. , ..)

這種謝法使我們能夠將 console.log 的內容當成 CSS 更改樣式，但 %c 只能放在開頭

console.log('%c I am some hugeee text!', 'font-size: 20px; color: tomato');

可以看到文字變大也變顏色了！

console.warn(..)

印出黃底的警告文字

console.warn('Oh snap!');

console.error(..)

如一般出錯時看到的錯誤提示，此語法會印出紅底的錯誤訊息

console.error('Something went wrong!');

console.info(..)

此語法會印出如 console.log 的顯示方式，但在開頭前面會有一個 i 的符號（我在 chrome 沒看到符號，但 firefox 及 safari 都有）

console.info('在非洲，每六十秒，就有一分鐘過去');

console.assert(.. , ..)

此語法可以用於測試使用，共有兩個參數：第一個參數帶入欲測試的項目，如果結果是 false 才會印出第二個參數的字串

// HTML
<p>hello</p>

const p = document.querySelector('p');
console.assert(p.classList.contains('test'), 'That is not true!');  // 逗點後的訊息只有在前一項為 false 時才會顯示

console.clear()

此語法會將 console 中的內容全部清除，請謹慎使用！

console.clear();

console.dir(element)

// HTML
<p>hello</p>

const p = document.querySelector('p');
console.log(p);

// <p>hello</p>

可以看到平常印出 DOM 元素時至只會印出該元素本身，並無法看到可用的方法（methods）或屬性（properties），但使用 console.dir() 就可以囉！

console.dir(p);

// 會印出一個 HTMLElement 內含方法及屬性

console.group(..) / console.groupCollapsed(..) & console.groupEnd(..)

當需要使用迴圈印出一些重複的內容時，console 的版面會顯得雜亂，此時可以使用 console.group(..) 來群組同一組的內容，記得結尾時要使用 console.groupEnd(..) 來標示結束

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

dogs.forEach(dog => {
    console.groupCollapsed(`${dog.name}`);  // console.group(..) 則預設會展開內容
    console.log(`This is ${dog.name}.`);
    console.log(`${dog.name} is ${dog.age} years old.`);
    console.log(`${dog.name} is ${dog.age * 7} dog years old.`);
    console.groupEnd(`${dog.name}`);
});

console.count(..)

此語法紀錄總共呼叫 console.count(..) 的次數；會依照不同的內容分別計算

console.count('Henry');
console.count('Henry');
console.count('Kai');
console.count('Kai');
console.count('Henry');
console.count('Kai');
console.count('Kai');
console.count('Henry');
console.count('Kai');

// Henry: 1
// Henry: 2
// Kai: 1
// Kai: 2
// Henry: 3
// Kai: 3
// Kai: 4
// Henry: 4
// Kai: 5

console.time(..) & console.timeEnd(..)

此語法紀錄了某個動作的花費總時間，開頭使用 console.time(..)，結尾使用 console.timeEnd(..)

console.time('hello');
alert('Hello world!');
console.timeEnd('hello')

// hello: 1620.22412109375ms

console.table(..)

console.table() 內容如果放入一個 array，console 會自動以表格方式呈現

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

console.table(dogs);

// 以表格方式呈現

以上就是今天的介紹，沒辦法呈現完整結果的部分，請大家點擊最上方連結或是實際在 console 操作～

Reference

• Console - MDN