學習Chrome Debug 的工具
目標
- 如何觀察 DOM 的變化與查看狀態
- console 的各種用法
成品
DOM BREAK ON
介紹 DOM 的中斷點模式，分別有三種觸發模式可選（可複選）
- subtree modifications: 當子元素點發生變化時
- arrtibute modifications: 當元素發生變化時
- node removal: 當元素被移除時
CONSOLE
console.log()
除了一般我們最常用的 log 之外，還可另外新增 變數 ，增加訊息的變化
- %s：可帶入 指定的參數
- %c：可新增 css樣式
console.warn()
log 多顯示為 警告icon
console.error()
log 多顯示為 錯誤icon
console.info()
失效，沒有顯示「帶白色“i”的藍色圓圈」
console.assert()
可額外用來判斷，若條件為 false 時，才會顯示 錯誤訊息。
console.clear()
清除全部log。
console.dir()
可顯示出物件的細節資料，如：DOM元素、Function…
console.groupCollapsed() & console.groupEnd()
可將一群相關訊息打成一包，這樣較易 檢查確認。
console.count()
可顯示 累加出現的次數。
console.time() & console.timeEnd()
可用於計算一段程式碼執行時，所花費的時間。
console.table()
可將陣列的資料，用 table 方式顯示，易於觀看。
