iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
0
Modern Web

一個 JS 學習者的日常系列 第 20

一個 JS 學習者的日常 day 19

比起古早的 alert 指令,我們時常使用 console.log 來檢驗或測試我們的問題與結果是否正確。在 chrome 上,我們使用瀏覽器提供的開發者工具。而平常只是使用輸出功能,來顯示一些簡單的 JS 執行變數。當要研究找資料才發現 google 提供非常完整的中英文手冊,針對開發者工具詳述的使用說明。

//mac 指令
 Cmd+Opt+J (Mac)

說明:
大部分時間我們都會使用 Console 去檢視程式輸出,或想測簡單邏輯或教學 demo ,在右上的螺絲符號是可以去設定或過濾出針對你要顯示的私訊,例子是設定增加執行的時間。

說明:
在 Performance 的部分可以記錄效能,這裡是一個用 JS 寫下的動畫,你可以勾選記憶體使用,以及螢幕擷取的選項,他提供數字、畫面甚至圖表資料,讓我們進一步分析程式效能。
(Sscripting、Rendering、Painting 便是網頁顯示的一個一個步驟)

而在 debug 的過程中,其實有很多時候是連續的計算或者是連動的畫面,我們無法瞬間看到程式結果的變化,我們便可以使用中斷點。

而官方完整的分類是包誇我們常使用的 DOM 物件的變化、監聽事件、例外處理或函式叫用等等。


上一篇
一個 JS 學習者的日常 day18
下一篇
一個 JS 學習者的日常 day20
系列文
一個 JS 學習者的日常30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言