今天又是一個沒有介面的實作，要來練習的是網頁開發很常用到的console小工具，相信學會這些能夠讓各位的測試能力又更進一步。

邏輯流程

1. 學習在Chrome使用element的debugger
2. 練習基本log技巧，學習不同型態的log

課程重點

1. 瀏覽器的debugger：在Elements頁籤中選擇欲設為中斷點之元素，點選右鍵→Break on→attribute modifications，如下圖。
   
   這時候當你執行改變P元素屬性的函式時，就會在中斷點暫停，接著可以一行一行執行，觀察屬性變化。
2. 基本的log：console.log("Hello")
3. 加入變數的log：有兩種方法

   console.log("Hello, I'm %s","Hank")
   
   let name = "Hank"
   console.log(`Hello, I'm ${name}`)
   

4. 加入style的log：console.log("%c Hello","color:red")
5. 顯示警告的log：console.warn("oops")
6. 顯示錯誤的log：console.error("oh no")
7. info log：console.info("This is info")，但不知為何我的Chrome沒有顯示log前面的i符號，但Edge瀏覽器有顯示。
8. 判斷條件的log：console.assert(1==2,"that's false")，後面的字串是當條件為false才會出現
9. 清除log：console.clear()
10. 顯示element的log：console.dir(document.querySelector('p'))，可以詳細顯示元素的內容，如可用函式、子元素等
11. 將log群組化：利用教材給的dogs Array

    dogs.forEach(dog => {
       console.group(`${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} years old`)
       console.groupEnd(`${dog.name}`)
    })
    

    利用group()和groupEnd()可將中間的console.log()群組。若group()換成groupCollapsed()，則預設群組摺疊顯示。
12. 計時的log：設定起始跟結束點，可得到中間所花的時間。

console.time("aaa")
fetch("https://api.github.com/users/wesbos")
    .then(data => console.timeEnd("aaa"))