conosle 開發者工具常用功能

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“

 

Leave a Reply

Your email address will not be published. Required fields are marked *