任務目標

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

重點整理

Break On Attribute Modifications

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

使用步驟如下:

1. 打開Development Tool
2. 在Element選則要觀察的標籤, 按右鍵 -> Break on... -> Attribute Modifications
3. 要觀察的標籤前面會出現一個圓點, 頁面上也會出現格放的選項
4. 可以觸發改變, 透過格放來觀察程式碼是怎麼跑的
5. 不需要時, 只要取消勾選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)
  });

以上就是JS 30 第九篇!

Reference

Console