課程目的:

這個章節的內容，是介紹console各種的用法，像是我們常用的console.log，除此之外其實還有其他方法可以調用，接下來就讓我們來看看

本次功能實作重點：

• console.log()
• 插值
• 樣式
• console.warn()
• console.error()
• console.info()
• console.assert()
• console.clear()
• console.dir()
• console.group()
• console.count()
• console.timing()
• console.table()

1.console.log()

  console.log("hello");

這個就是我們平常檢測時最常使用的用法

2.插值

console.log("Hello I am a %s string!", "💩");

%s是字符串格式化佔位符，使我後面設定的emoji插入到前面的位置

不過現在大多使用ES6發布的${expression}：用法 console.log(Hello I am a ${"💩"} string!);

同樣可以達到一樣的效果

3.樣式

 console.log(
        "%c I am some great text",
        "font-size:50px; background:red; text-shadow: 10px 10px 0 blue"
      );

%c 標記後面的文本將應用指定的 CSS 樣式。

我們可以在主控台做到設定字串的Style，就像把CSS樣式改為在主控台呈現一樣

4.console.warn()

     // warning!
      console.warn("OH NOOO");

用於向主控台輸出一則警告訊息

5.console.error()

  console.error("Shit!");

用於向主控台輸出一則錯誤訊息

6.console.info()

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

向向主控台輸出一個通知訊息

7.console.assert()

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

斷言（assertion）為false時，主控台會顯示錯誤訊息；如果斷言為true，則不會顯示。

用來檢測p.classList中是否包含元素”ouch”，如果false則顯示後面的字串"That is wrong!"

8.console.clear()

使用此函式會清空主控台

9.console.dir()

可以顯示一個元素所有的屬性與方法

10.console.group()

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

console.groupCollapsed() 用來在主制台上建立一個新的分組。而新建的分組預設是折疊的。必須點擊一個按鈕才能將折疊的內容打開。
groupEnd()用來結束在主控台中以 console.group() 或 console.groupCollapsed() 開啟的群組輸出。

11.console.count()

     console.count("Wes");
      console.count("Wes");
      console.count("Steve");
      console.count("Steve");
      console.count("Wes");
      console.count("Steve");
      console.count("Wes");
      console.count("Steve");
      console.count("Steve");
      console.count("Steve");
      console.count("Steve");
      console.count("Steve");

用來記錄對 count() 的特定呼叫被呼叫的次數。

12.console.timing()

console.time("fetching data");
      fetch("https://api.github.com/users/wesbos")
        .then((data) => data.json())
        .then((data) => {
          console.timeEnd("fetching data");
        });

console.time("") 開啟一個計時器，而計時器必須取名一個名稱，像是time("fetching data")，頁面中最多能同時運作10,000 個計時器。當以此計時器名字為參數呼叫 console.timeEnd() 時，瀏覽器將以毫秒為單位，輸出對應計時器所經過的時間。

13.console.table()

console.table(dogs);

以表格的形式列印出來。數組中的每一個元素（或物件中可枚舉的屬性）將會以行的形式顯示在表格中。