Day 9 – Dev Tools

 任務目標
認識瀏覽器開發者工具列 (以Chrome舉例實作)

重點整理
Break On Attribute Modifications
從之前的練習中發現, 我們常會利用JS操作元素的CSS屬性來表示互動介面發生的變化. Break On Attribute Modifications 可以用來檢查某個DOM的屬性被JS改變時, 背後發生了什麼事.

使用步驟如下:

打開Development Tool
在Element選則要觀察的標籤, 按右鍵 -> Break on… -> Attribute Modifications
要觀察的標籤前面會出現一個圓點, 頁面上也會出現格放的選項
可以觸發改變, 透過格放來觀察程式碼是怎麼跑的
不需要時, 只要取消勾選Break on… -> Attribute Modifications就好
Console Tools
除了最常用的console.log外, console還有其他功能, 能夠在控制台介面顯示出對開發者更有用的資訊.

console.log
console.log(‘Hello’)
在console.log中插入字串
%s是佔位符號, 代表的實際值放在第二個參數內, 實際輸出結果為Hello little oTree.

console.log(‘Hello little %s’, ‘oTree’)
在console.log中使用CSS
%c放在要改變樣式的字串前方, 代表樣式的佔位符號, 在字串中以CSS的格式輸入屬性與值, 該字串輸出結果會帶有樣式.

console.log(‘%c Big Dudi!’, ‘color: #780011; font-size: 32px;’)
console.warn
在控制台中顯示警告訊息

console.warn(‘%c Oh No!!!’, ‘background-color: gold; color: white;’)
console.error
在控制台中顯示錯誤訊息

console.error(‘Holy shit!’)
console.info

在控制台中顯示代表資訊的訊息

console.info

(‘Old tree means trees older than 100 years.’)
console.assert
assert可以用來測試, 例如我要判斷某個元素有沒有dudi這類別, 並將結果顯示在控制台訊息中, 我只需要用assert包住該元素, 在第二個參數寫下測試失敗的回饋訊息即可.

<p class=”dudo”>I am Dudo.</p>
const testingUnit = document.querySelector(‘p’)
console.assert(testingUnit.classList.contains(‘dudi’), ‘There is no  dudi’)
console.clear
clear()用來將之前顯示的控制台訊息清空, 保持畫面整潔.

console.clear();
console.dir(Element)
顯示某個元素的DOM物件, 裡面會有該物件的所有屬性, 方法等…
用來檢查我們所選取的元素有何屬性, 方法能使用, 是非常方便的.

console.dir(testingUnit);
Grouping
在控制台面板顯示群組化的訊息, 被群組化的訊息會以縮排的方式呈現. console.group, console.groupCollapsed用來放在要群組畫的訊息的頭, 兩者差在被群組化的訊息是否一開始以摺疊的方式呈現. console.groupEnd放在尾巴, 代表訊息的終點. 下面程式碼放到console中執行便可看到群組結果.

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.groupEnd(`${dog.name

}`)
})
console.count
用來計算某段程式碼被呼叫了幾次. 把count插在不同的函式中, 用不同的方式呼叫等, 都會分別產生不同的計次.

如下程式碼, dudi跟dudu被呼叫的次數是不同的.

for(let i = 0; i < 10; i++) {
console.count(‘dudi’)
if(i % 3 === 1) { console.count(‘dudu’)}
}
Timing
用來計算某段程式執行的時間, 例如從遠端請求檔案到拿到檔案需要多久之類的. time()代表計時開始, timeEnd()代表計時結束, time跟timeEnd內部的訊息相當於計時器的名稱, 必須一致.

console.time(‘fetching data’)
fetch(‘https://api.github.com/users/godlike0108

‘)
.then(data => data.json())
.then(data => {
console.timeEnd(‘fetching data’)
console.table(data)
});