Day9: Dev Tools Domination

專案介紹： DOM break on & 練習 console 用法

作品頁面：https://iris1114.github.io/javascript30/09_Dev-Tools-Domination/index.html (請打開 console)

Breakpoints

有三種觸發模式(可複選)：

subtree modifications 當添加、改變、刪除子元素時觸發
attributes modifications 當元素屬性發生改變時觸發
node removal 當移除元素時觸發

console 用法

1. console.log()

1console.log("test");

2. console.log(‘%s’, value)

可將字串中的%s 顯示為指定的參數

1console.log("Interpolated - my name is  %s .", "iris"); //字串
2console.log("Interpolated - %f dollars .", 2.55); //浮點數
3console.log("Interpolated - %d dollars.", 4.55); //整數

3. console.log(‘%c’, style)

可將字串顯示為參數中帶入的 css 樣式

1console.log("%cI am console style", "font-size:50px; background:red;");

4. console.warning()

1console.warn("OH NOOO");

5. console.error()

1console.error("Shit!");

6. console.info()

1console.info("Crocodiles eat 3-4 people per year");

7. console.assert()

可以拿來測試判斷是否為真，若為 false 則回傳對應的錯誤訊息。

1const p = document.querySelector("p");
2console.assert(p.classList.contains("ouch"), "That is wrong!");

8. console.clear()

清除 console 的所有訊息。

1console.clear();

9. console.dir()

顯示元素的所有屬性。

1console.dir(p);

10. console.group() 及 console.groupEnd()

群組化輸出資訊。 console.groupCollapsed() 會進行摺疊群組化資訊。

1dogs.forEach((dog) => {
2  console.groupCollapsed(`${dog.name}`);
3  console.log(`This is ${dog.name}`);
4  console.log(`${dog.name} is ${dog.age} years old`);
5  console.log(`${dog.name} is ${dog.age * 7} dog years old`);
6  console.groupEnd(`${dog.name}`);
7});

11. console.count()

累加指定內容出現的次數。

1console.count("Wes");
2console.count("Wes");
3console.count("Steve");
4console.count("Steve");
5console.count("Wes");
6console.count("Steve");
7console.count("Wes");
8console.count("Steve");
9console.count("Steve");

12. console.time()

計算指定任務執行的時間。

1console.time("fetching data");
2fetch("https://api.github.com/users/wesbos")
3  .then((data) => data.json())
4  .then((data) => {
5    console.timeEnd("fetching data");
6    console.log(data);
7  });

13. console.table()

把資料整理成 table 格式方便瀏覽。

1console.table(dogs);

參考資料

https://guahsu.io/2017/06/JavaScript30-09-Dev-Tools-Domination/