console.log
一般的偵測功能
console.log("hi") //"hi"字詞置換【%s】
能把【%s】的部分置換成別的内容
console.log("Hello I am a %s string!", "☆★☆"); //Hello I am a ☆★☆ string!樣式變更【%c】
字串開頭加上【%c】，能夠調整CSS
console.log("%c Hello I am some great text!", "font-size: 40px;background: red; text-shadow: 10px 10px 0 blue");Display
Hello I am some great text!
console.warn 警告訊息
跳出警告訊息
console.warn("OH NOOO");Display
OH NOOO
console.error 錯誤訊息
跳出錯誤訊息
console.error("SHIT");Display
SHIT
console.info 提示訊息
跳出提示訊息
console.info("Crocodiles eat 3-4 people per year");Display
Crocodiles eat 3-4 people per year
console.assert 驗證
檢査陳述的是否正確
若陳述為真，不回傳後面的訊息。
若陳述為否，回傳後面的訊息。
p(onClick="makeGreen()") ×BREAK×DOWN×/**********基本用法*********/
console.assert(1 === 1, "That is wrong"); //Nothing
console.assert(1 === 2, "That is wrong");
/**********進階用法*********/
const p=document.querySelector("p");
console.assert(p.classList.contains("ouch"), "That is wrong");console.clear 清除
清除以上的所有console
console.clear();
//以上的所有console都會被清除
//但是下面的console不會被清掉console.dir 檢視屬性
跳出該元素的所有屬性
若陳述為真，不回傳後面的訊息。
若陳述為否，回傳後面的訊息。
p(onClick="makeGreen()") ×BREAK×DOWN×const p=document.querySelector("p");
console.log(p);
//"<p onclick='makeGreen()'>×BREAK×DOWN×</p>"
console.dir(p);
//跳出該元素的所有屬性Grouping 資料群組
群組呈現物件資料【展開版】（但是可以點成收合）
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
dogs.forEach(dog => {
console.group(`${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 year old`);
console.groupEnd(`${dog.name}`);
})
Display
▼ Snickers
This is Snickers
Snickers is 2 years old
Snickers is 14 dog year old
▼ hugo
This is hugo
hugo is 8 years old
hugo is 56 dog year old
群組呈現物件資料【收合版】（但是可以點成展開）
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
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 year old`);
console.groupEnd(`${dog.name}`);
})Display
▼ Snickers
▼ hugo
console.count 計算次數
計算字串出現的次數
console.count("Wes");
console.count("Wes");
console.count("Steve");
console.count("Wes");
console.count("Wes");
console.count("Steve");
console.count("Wes");
console.count("Steve");
console.count("Steve");
console.count("Steve");
console.count("Steve");
Display
Wes: 1
Wes: 2
Steve: 1
Wes: 3
Wes: 4
Steve: 2
Wes: 5
Steve: 3
Steve: 4
Steve: 5
Steve: 6
console.time 計算執行需要的時間
計算某項動作執行需要多久時間
console.time("fetching data");//定義名字
fetch("https://gist.githubusercontent.com/ianchen0419/d499e572044655814f38aaf56c779823/raw/9876407c12b1e6bc5c31fe6e9f875ccfb82af43b/schedule.json")
.then(data => data.json())
.then(data => {
console.timeEnd("fetching data"); //計算該動作要多少時間
console.log(data);
});
Display
fetching data: 36.5849609375ms
console.table
將物件資料轉成表格，顯示於 console 上面
var obj=[
{ch: "草莓",
jp: "いちご",
en: "strawberry"},
{ch: "藍莓",
jp: "ブルーベリー",
en: "blueberry"},
{ch: "香蕉",
jp: "バナナ",
en: "banana"}
];
console.table(obj);Display
| (Index) | ch | jp | en |
| 0 | “草莓“ | “いちご“ | “strawberry“ |
| 1 | “藍莓“ | “ベルーベリー“ | “blueberry“ |
| 2 | “香蕉“ | “バナナ“ | “banana“ |
inspect
跳到Elements，找到指定的元素
#myElement Hi//Console Panel
inspect(myElement);
//跳到Elements Panel，並且幫你找到這個元素在哪裡