「JS30紀錄&心得」09 - Dev Tools Domination

主題

介紹chrome的開發工具:
DOM break on及13種console.的用法~

[DEMO][GitHub][JavaScript30全列表]

DOM BREAK ON ..

介紹了DOM的中斷點模式,分別有三種觸發模式可選(可複選)

1. subtree modifications: 當子元素點發生變化時

2. arrtibute modifications: 當元素發生變化時

3. node removal: 當元素被移除時

使用方法為如圖,對選取的元素按下右鍵 > Break on... 即可。

CONSOLE.THINGS

介紹各種console用法

1. console.log()

就是我們常用的那個log啦XD

2. console.log(‘%s’, value)

可將字串中的%s顯示為指定的參數

3. console.log(‘%c’, font-style)

可將字串顯示為參數中帶入的css樣式(font系列的style)

4. console.warning()

顯示為警告圖示

5. console.error()

顯示為錯誤圖示

6. console.info()

顯示為資訊圖示

!當我在測試時,並沒有出現資訊

7. console.assert()

可以拿來測試判斷是否為真,若為false則回傳對應的錯誤訊息。

8. console.clear()

清除console的所有訊息。

補充:Mac上清除的快捷鍵為⌘(Command)+K、Windows快捷鍵則為CTRL+L

9. console.dir()

可以顯示選取物件的所有屬性,
我寫的這個範例中,console.log(test)只能返回test本身的function內容,
若使用console.dir(test)則可以印出test本身及其所擁有的屬性(注意屬性第一行run)。

10.console.groupCollapsed() & console.groupEnd()

可以把輸出資訊透過group包起來。

11. console.count()

用來累加出現次數。

12.console.time() & console.timeEnd()

可以用來計算區域內執行的時間,我寫的範例是計算取回json資料的時間。

13.console.table()

可以把資料整理成table格式方便瀏覽。

其他

還有很多可以透過開發工具來協助的,
例如監測整個網頁的讀取速度可以透過Network這個頁籤來查看,
也可以設置模擬各種網路速度、或是離線狀態等..

非常推薦觀看六角學院的免費課程,可以透過影片了解更多開發工具的操作範例。

推薦:六角學院-Chrome 網頁除錯功能大解密(免費)
參閱:Google Dev Tool API