[Day9] - Dev Tools Domination(JS30 x 鐵人 30 x MDN) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 9

Modern Web

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

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

15th鐵人賽 javascript 30

yang817

團隊好想工作室 v7.0

2023-09-24 08:17:02

98 瀏覽

分享至

活用 console API 幫助開發除錯

瀏覽器控制台調試：console APIs

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

console.log()
首先是用到爛掉、最普通常見的，簡單來說就如字面上意思在 console 日誌中留下紀錄
```
console.log("Hello World");
```
再來介紹 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);
```
console.warn() & console.error()
接著來說說大家在開發中非常熟悉的，waring 警告與 error 報錯，大家可說是對它又愛又恨，恨它希望不要再出現新的錯誤，但又必須透過它明瞭的協助 debug。
```
console.warn("warning");
console.warn("error");
```
甚至可以讓你點擊查看是哪行出錯
console.info()
如字面上意思當作資訊於 Console 中印出，會有一個藍色小 i 圖示，但在 Chrome 中不會顯示
```
console.info("This is Console info");
```
Chrome

Safari

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

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

console.clear()
就是清空 console，用到這行你會發現前面的都消失了，但它清完還會留一行已清除讓你知道
```
console.clear();
```
console.dir()
有時候你是不是會想，我用querselector取到節點了想來印看看裡面有哪些屬性於是用console.log()去印，結果發現是 html 格式，完全無法點開看每個元素內的屬性及設定，這時就要用到console.dir()幫你解決一切。
```
const p = document.querySelector("p");
console.log(p);
```
```
console.dir(p);
```

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();

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]);
}
```
注意：因為這個例子用到數學亂數，所以每次產生的結果都不一樣哦

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);
  });