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 操作～