iT邦幫忙

2023 iThome 鐵人賽

DAY 9
0
Modern Web

JS30 x 鐵人30 x MDN doc系列 第 9

[Day9] - Dev Tools Domination(JS30 x 鐵人 30 x MDN)

  • 分享至 

  • xImage
  •  

活用 console API 幫助開發除錯

不知道大家是不是跟我一樣都用一招console.log()打天下呢?在看這題之前我還真不知道還有其他那麼多好用的 console API,但是打開 insex-Start.html 完全不知道要幹嘛,於是直接看著影片 + MDN 文件學了,下面我將用自己寫的例子介紹作者影片中有講解的一些 Console API。

  1. console.log()
    首先是用到爛掉、最普通常見的,簡單來說就如字面上意思在 console 日誌中留下紀錄

    console.log("Hello World");
    

  2. 再來介紹 String substitutions(字符串替換),都是一個百分比符號%緊貼著一個英文字母,如果後方有相符的變數就以變數取代,如果沒有則會直接印出

    (1). %s字串取代

    const str ="Tim"
    console.log("Hello, my name is %s .",str)
    

    (2). %o /%O物件取代,你還可以按三角形展開查看

    const obj = {name:"Tim",homeTown:"Tainan",phone:"0900123456"};
    console.log("My information is %o,please check",obj);
    

    (3). %d整數取代(只印出整數部分)

    const num = 1.23
    console.log("print Interger %d",num);
    

    (4). %f浮點數取代(數字都會印出)

    const num = 1.23
    console.log("print number %f",num);
    


    (5). %c套用 css 樣式,不知道大家打開某些網站的 deve tool Console(開發人員工具)有沒有看過大大的注意或住手等,又大又是紅色的警告訊息呢,facebook、Discord 都有,這就是使用這個產生的,將針對後方的文字變更樣式,你可以一行 console 使用多個%c

    const css = "color:red; font-size:50px"
    const markcss = "color:white; font-size:50px;background:black"
    console.log("%cSTOP%c!!!",css,markcss);
    

  3. console.warn() & console.error()
    接著來說說大家在開發中非常熟悉的,waring 警告與 error 報錯,大家可說是對它又愛又恨,恨它希望不要再出現新的錯誤,但又必須透過它明瞭的協助 debug。

    console.warn("warning");
    console.warn("error");
    


    甚至可以讓你點擊查看是哪行出錯

  4. console.info()
    如字面上意思當作資訊於 Console 中印出,會有一個藍色小 i 圖示,但在 Chrome 中不會顯示

    console.info("This is Console info");
    

    Chrome

    Safari

  5. console.assert()
    又稱做斷言,只有在判斷結果為 false 時才會印出後面設定的訊息或參數,如果判斷結果為 true 則不發生任何事

    const myInfo = { name: "Tim", homeTown: "Tainan", phone: "0900123456" };
    console.assert(
      myInfo.homeTown === "Taipei",
      `No my homeTown is ${myInfo.homeTown}`
    );
    

  6. console.clear()
    就是清空 console,用到這行你會發現前面的都消失了,但它清完還會留一行已清除讓你知道

    console.clear();
    

  7. console.dir()
    有時候你是不是會想,我用querselector取到節點了想來印看看裡面有哪些屬性於是用console.log()去印,結果發現是 html 格式,完全無法點開看每個元素內的屬性及設定,這時就要用到console.dir()幫你解決一切。

    const p = document.querySelector("p");
    console.log(p);
    

    console.dir(p);
    

  8. console.group()console.groupCollapsed()console: groupEnd()
    前面兩種可以創造 console 分組,group()預設為完全展開,groupCollapsed()則預設為關閉,使用者必須親自點擊展開,要關掉分組皆使用 groupEnd()關閉,值得注意的是開幾層就要關幾層。

    console.log("最外面");
    console.group("第1層");
    console.log("第1層內");
    console.group("第2層");
    console.log("第2層內");
    console.groupEnd("關掉第2層");
    console.log("回到1層內");
    console.groupEnd("關掉第1層");
    console.log("回到最外面");
    

    console.groupCollapsed("Hello I'm Tim , below is my information");
    console.log(`My name is ${myInfo.name}`);
    console.log(`My hometown is ${myInfo.homeTown}`);
    console.log(`My phone is ${myInfo.phone}`);
    console.groupEnd();
    


  9. console.count()
    如字面上意思可以拿來當計數器使用,查看出現了幾次。

    const food = ["noodle", "rice", "fruit"];
    for (let i = 0; i < 10; i++) {
      const randomIndex = Math.floor(Math.random() * people.length);
      console.count(food[randomIndex]);
    }
    

    注意:因為這個例子用到數學亂數,所以每次產生的結果都不一樣哦

  10. console.time()console.timeEnd()
    如字面上意思可以拿來當計時器使用,這邊我就使用原作者的例子,計時 fetch 資料實際所花的時間,

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

  11. console.table()
    可以將陣列或物件整理表格印出方便閱讀

    console.table(myInfo);
    console.table(food);
    

👉Github Demo 頁面 👈

👉 好想工作室 15th 鐵人賽看板 👈

參考資料

  1. Javascript 30 官網
    https://javascript30.com/
  2. MDN 官網
    https://developer.mozilla.org/en-US/

上一篇
[Day8] - Fun with HTML5 Canvas(JS30 x 鐵人 30 x MDN)
下一篇
[Day10] - Hold Shift and Check Checkboxes(JS30 x 鐵人 30 x MDN)
系列文
JS30 x 鐵人30 x MDN doc30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言