想要了解 js 如何操作 css
我們可以鎖定目標 element
看他變化時， js 在背後做了什麼事

1. 首先開啟開發者工具的 element
2. 找到要觀察的 element ，右鍵 -> Break on... -> Attribute Modifications
3. 這時候會看到 element 的前方有一個圓點，表示現在鎖定了這個 element
4. 觸發js，這時候會跳轉到 Source 並指向有作用的 js
5. 如果要取消鎖定，重複步驟2，把 Attribute Modifications 的勾選拿掉即可

接下來是 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);
    })