YouTube：https://www.youtube.com/watch?v=xkzDaKwinA8
- 在 Chrome 裡面可以按
F12開啟Dev Tools - 當 Javscript 會修改 DOM 元素，可以在
Dev Tools的 Elements 頁籤選取指定的 DOM 元素，並設定Break on...當 DOM 有變化或屬性有調整時，會開啟 debugger 模式，並指向到該 Javascript 的位置
console.group預設是會展開資訊，可用groupCollapsed使之預設是摺疊起來console.time可用來測量執行時所花費的時間fetch是新的功能，用來取代XMLHttpRequesttable可以將陣列的變數用表格的方式呈現，這個超實用！
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chrome Console Tricks!</title>
</head>
<body>
<p onclick="makeGreen()">BREAK DOWN</p>
<script>
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
function makeGreen() {
const p = document.querySelector('p');
p.style.color = '#BADA55';
p.style.fontSize = '50px';
}
// Refular
console.log('Hello');
//Interpolated
console.log('Hello I am %s!', 'Poy Chang');
var variable = '\${variable}';
console.log(`
ES6 可以用 Back Quote 反引號做換行字串的編寫
也可以用 ${variable} 的方式來使用變數
`);
//Styled
console.log('%c使用 CSS 樣式!', 'color:red;font-size:20px;');
//Warning!
console.warn('警告');
//Error
console.error('錯誤');
//Info
console.info('訊息');
//Testing
console.assert(1 === 1, '第一個參數決定是否要顯示此訊息');
const p = document.querySelector('p');
console.assert(p.classList.contains('wrong'), 'That is wrong');
//Viewing DOM Elements
console.log(p); //只顯示 DOM 元素
console.dir(p); //顯示該 DOM 元素所有的屬性
//Cleaning
console.clear();
//Grouping together
dogs.forEach(dog => {
console.group(`${dog.name}`);
// console.groupCollapsed(`${dog.name}`);
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}`);
});
//Counting
console.count('target');
console.count('target2');
console.count('target2');
console.count('target');
console.count('target2');
console.count('target');
console.count('target');
//Timing
console.time('fetching data');
fetch('https://api.github.com/users/poychang')
.then(data => data.json())
.then(data => {
console.timeEnd('fetching data');
console.log(data);
});
//Table
console.table(dogs);
</script>
</body>
</html>