JavaScript學習路-(16)Console-2

續前一篇「JavaScript學習路-(15)Console-1

console.time() + console.timeEnd()
計算函式總共花多少時間完成,用法跟 console.group() + console.groupEnd() 很像,
把想要計算的函式包起來並取個名字,重整後就可以看到運作時間了。
唯一要注意的是前後命名要一樣,不一樣的話應該沒有人知道怎麼找吧…
console.time("myTestTime");
function test() {.....}
console.timeEnd("myTestTime");

console.timeStamp()
記錄函式的時間。
在函式加上 console.timeStamp() 後,
還需要在 Timeline 視窗按下 Record 鍵才會看到結果喲。
(左邊紅紅的那顆就是了)
record

斷點可用來觀察 JavaScript 運作的方式,
要使用斷點時切換到 Sources 的頁籤就可以看到。
breakpoints
左側是頁面內容,中間是頁面的原始碼,右側功能區。
功能區上的按鈕由左依序為:
暫停 (Pause script execution) / 繼續 (Resume script execution)
直接執行 function (Step over next function call)
逐行執行 function (Step into next function call)
跳出 function (Step out of current function call)
關閉所有斷點 (Deactivate breakponits) / 啟用所有斷點(Activate breakponits)
停在異常點 (Pause on exceptions)

要設立斷點的話,只要在中間的頁面原始碼處靠左的原始碼行號上點一下,就會出現斷點符號。
接著將頁面重整一次,搭配其他的選項可以觀察 JavaScrpit 如何運作。

在 Command line API 裡可以找元素、打 JavaScript 觀察…等等。
要找“一個”元素,就使用 $(‘#selector’);的方式,
通常拿來找 ID,同 jQ 的 document.querySelector() 。

如果要找 class, 則用 $$(‘.selector’);
Command line 會顯示頁面中所有的 class
(即使是用了兩個以上的 class 只要有一個名稱符合也會一起出現),
同 jQ 的 document.querySelectorAll() 。

$x(‘XPath’); 可以回傳路徑的子陣列。
例如今天要找 html 底下的原始碼,就打上 $x(‘html’); Command line 會顯示要找的部分。
$x 不屬於 JavaScript ,只能用在 console ,
直接寫在 html 裡會出錯:Uncaught ReferenceError: $x is not defined。

本文同步發表於 http://ithelp.ithome.com.tw/ironman7/app/article/dev/recent/10158045

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。