Must know dev tools tricks開發者工具

這單元好喜歡，不用寫js也不用html、css，單純認識一下開發者工具中的各種console

直接滑鼠右鍵打開檢查，選擇console，就可以開始玩了．快速打印出各種資料，方便你開始debug．身為新手，每天抓bug是日常生活哈哈

技巧點

1. console.log()

• 打印出字串，或者變數．

console.log("how dare you?");
const name = "jack";
console.log("name is" + " " + name ); // name is jack

• 打印出emoji表情符號，用%s當作一個替代，後面再加上你要的emoji．

console.log("hi i am a %s", "🤨🤨"); // hi i am a 🤨🤨

• 利用%c 去將打印出的東西加入css呈現．有點像是在html寫行內style一樣的寫法
  

2. console.warn()

• 打印出來的東西，會出現驚嘆號的黃色警告．
  

3. console.error()

• 打印出來的東西，會出現Ｘ的錯誤紅色警告．
  

4. console.info()

• 打印出藍色的資訊
  

5. console.assert()

• 當前面寫的判斷不符合時，會跳出後面寫好的錯誤訊息
  

6. console.clear()

• 清除打印的所有紀錄

7. console.dir()

• 打印出ＤＯＭ元素的所有相關資訊

8. console.group()

• 群組的方式將資料一次打印出來
  

9. console.count()

• 計算打印的次數，告訴你同一個打印的項目，已經打印了幾次．
• countReset()，將次數歸零，重新計算

console.count("jack");
console.count("jack");
console.count("jack");
console.countReset("jack");

10. console.time()

• 可以知道完成某動作開始到結束後，所經過的時間．

console.time("start get data");
fetch("https://randomuser.me/api/")
  .then((res) => res.json())
  .then((data) => {
    console.timeEnd("fetch end")
    // console.log(data);
})

心得

原來console的用法這麼多樣，自己用最多的大概就只有console.log()而已，無腦的一直log
趁這個機會多認識一下console，未來說不定會用到