邏輯流程
學習在Chrome使用element的debugger
練習基本log技巧，學習不同型態的log
課程重點
瀏覽器的debugger：在Elements頁籤中選擇欲設為中斷點之元素，點選右鍵→Break on→attribute modifications，如下圖。
這時候當你執行改變P元素屬性的函式時，就會在中斷點暫停，接著可以一行一行執行，觀察屬性變化。
基本的log：console.log(“Hello”)
加入變數的log：有兩種方法
console.log(“Hello, I’m %s”,”Hank”)
let name = “Hank”
console.log(`Hello, I’m ${name}`)
加入style的log：console.log(“%c Hello”,”color:red”)
顯示警告的log：console.warn(“oops”)
顯示錯誤的log：console.error(“oh no”)
info log：
console.info
(“This is info”)，但不知為何我的Chrome沒有顯示log前面的i符號，但Edge瀏覽器有顯示。
判斷條件的log：console.assert(1==2,”that’s false”)，後面的字串是當條件為false才會出現
清除log：console.clear()
顯示element的log：console.dir(document.querySelector(‘p’))，可以詳細顯示元素的內容，如可用函式、子元素等
將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()，則預設群組摺疊顯示。
計時的log：設定起始跟結束點，可得到中間所花的時間。
console.time(“aaa”)
fetch(“
https://api.github.com/users/wesbos
“)
.then(data => console.timeEnd(“aaa”))
转载请注明：XAMPP中文组官网 » 第九堂 – Dev Tools Domination