WES BOS系列影片
Alex快速導讀系列影片

今天比較輕鬆，作者帶我們深入了解console的一些使用方法，
記錄下來，也許那天突然就會用到也不一定。

作者有準備了一些資料，待會有一些案例會用到

<p onClick="makeGreen()">×BREAK×DOWN×</p>

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';
}

1. Regular(最常見的用法)

console.log('HI 我是喬依司')

2. Interpolated(於console中插入字元，也可直接使用ES6提供的寫法)

console.log('HI 我是喬依司 %s','我愛貓')
//ES6
let text = '我愛貓'
console.log(`HI 我是喬依司 ${text}`)

3. Styled(於console中插入樣式)

console.log('%c HI 我是喬依司','font-size:60px; color:green;')

4. warning!(警告)

console.warn('這是警告')

5. Error :|(錯誤)

console.error('這是錯誤')

6. Info(與log相同性質)

console.info('這是Info')

7. clearing(清除)
也可以直接在console視窗直接按Ctrl+L

console.clear()

8. Testing(使用斷言進行除錯)
如果斷言為false，後方文字才會出現
以下方文字做範例，在console視窗中出現的文字就會是
'HI 我是Joyce'

console.assert('true','HI 我是喬依司')
console.assert('false','HI 我是Joyce')

9. Viewing DOM Elements(查看所有可使用的屬性與方法)
可以與log比較

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

10. Grouping together(歸類資料)
以dogs這串資料做範例，沒有歸類資料時，
資料顯得很混亂，但用了group歸類後，
資料就能依照狗狗的名字做好分類。

dogs.forEach(dog => {
    console.log(`狗狗名字 ${dog.name}`)
    console.log(`${dog.name} 今年 ${dog.age} 歲`)
    console.log(`${dog.name} 明年 ${dog.age +1} 歲`)
})

     
dogs.forEach(dog => {
    console.groupCollapsed(`${dog.name}`)
    console.log(`狗狗名字 ${dog.name}`)
    console.log(`${dog.name} 今年 ${dog.age} 歲`)
    console.log(`${dog.name} 明年 ${dog.age +1} 歲`)
    console.groupEnd(`${dog.name}`)
})
      

沒分類

有分類

11. counting(查看出現過幾次)
讓console幫你算相同的東西出現過幾次。

console.count('貓出現幾次?')
console.count('貓出現幾次?')
console.count('貓出現幾次?')
console.count('貓出現幾次?')

console.count('狗出現幾次?')
console.count('狗出現幾次?')
console.count('狗出現幾次?')

console.count('貓出現幾次?')
console.count('狗出現幾次?')
console.count('貓出現幾次?')

12. timing(計算程式運行的速度)
有時候不知道寫好的程式碼，運行速度是快或慢，
這時候console.time()，就非常好用。
假設，我們用了一個for迴圈，
但在命名變數的區域有所不同，那麼結果會是如何呢?
有興趣的話可以console出來看看喔。

console.time('test1')
let i 
let j
for (i=0; i<10000; i++){
  j=i
}
console.timeEnd('test1')

console.time('test2')
for (let i=0; i<10000; i++){
  let j=i
}
console.timeEnd('test2')

另外也在Alex老師的頻道學到一招，先將log封裝起來，統一管理。
以後就不需要一行一行的隱藏console.log

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

這樣寫好後，需要把console.log關起來時，只要把isDev改為false即可。

今天的練習完成囉，
建議直接使用console.log印出來，會比較好理解喔!
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30