不知道大家是不是跟我一樣都用一招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);
});
console.table()
可以將陣列或物件整理表格印出方便閱讀
console.table(myInfo);
console.table(food);