iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
1
Modern Web

寫JS30天系列 第 9

JS30 - 09 - Dev Tools Domination

  • 分享至 

  • xImage
  •  

想要了解 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.groupconsole.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);
    })

上一篇
JS 30 - 08 - Fun with HTML5 Canvas
下一篇
JS 30 - 10 - Hold Shift and Check Checkboxes
系列文
寫JS30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言