想要了解 js 如何操作 css
我們可以鎖定目標 element
看他變化時, js 在背後做了什麼事
Source
並指向有作用的 js接下來是 console
的部分
開發人員常常使用 console.log()
來取得資訊
除了 console.log
,以下介紹其他不同的 console
最常用的 console.log
console.log("hello~");
加入字串 %s
,被加入的字串寫在第二個參數位置
console.log('I am %s', "Jack");
加入 css 樣式 %c
,在欲加入 css 的前方使用 %c
,將樣式寫在第二個參數
console.log("%c big word", "font-size: 70px; color: green;");
警告訊息 console.warn
console.warn("%c oh no!", "color: blue; font-size: 70px;");
錯誤訊息 console.error
console.error("%s error", "Arel");
顯示資訊訊息 .console.info
console.info('info?');
用 console.assert
來測試
如果為true則沒事
如果為false則顯示第二個參數
console.assert(1 === 2 ,"That's wrong!");
清空 console
console.clear();
查詢 DOM element 的屬性、方法
let p = document.querySelector("p");
console.dir(p);
要群組化 console
使用console.group
或console.groupCollapsed
開頭console.groupEnd
結尾
dogs.forEach(dog => {
console.groupCollapsed(`${dog.name}`);
console.log(`${dog.name}`);
console.log(`${dog.age}`);
console.groupEnd(`${dog.name}`);
});
計數 console.count
,可以用來計算目標被 console 了幾次
可以使用console.countReset
來歸零
for (i = 0; i < 10; i++) {
sole.count("Turtle");
if (i % 3 === 0) {
console.countReset("Turtle");
}
}
計算請求時間
console.time(`fetching data`); fetch("http://ptx.transportdata.tw/MOTC/v2/Bus/EstimatedTimeOfArrival/InterCity?$top=30&$format=JSON")
.then(data => data.json())
.then(data => {
onsole.timeEnd(`fetching data`)console.log(data);
})