js調試技巧

標籤：對象   需要   nbsp   檔案中   調用   工具   讀取   測試的   ons   

　　最近使用js進行一些開發工作,整理一下最近接觸的前台調試技巧.

1.尋找調用方法

在瀏覽器的開發人員工具中(大部分瀏覽器都可以使用F12快速鍵),在Console頁簽中使用以下代碼就可以得到控制項觸發的函數方法名稱和相關資訊.

$._data ? $._data( $("#button"), "events" ) : $.data( elem, "events", undefined, true );

以上其實是jquery擷取元素繫結的事件的方法,可以將其封裝起來方便以後使用,代碼如下:

//jquery擷取元素繫結的事件function findEvents (elem) {    return $._data ? $._data( elem, "events" ) : $.data( elem, "events", undefined, true );}var event = findEvents($("input:first")[0]); // 擷取綁定的事件event.click[0].handler//得到綁定的事件名稱

　是我自己測試的例子的,這裡顯示我在這個控制項上綁定了一個匿名的函數,點擊後就可以跳轉到你編寫此代碼的檔案中去,這樣就很方便去讀取別人的代碼或者調試ajax跳轉的代碼了

　　js中函數也是一個對象,對這個對象使用toString()方法就可以看到該函數的原始碼,這也算是一個小技巧吧,如下:

2.js方法調試

　　對於自己寫的js,如果比較複雜的話,我們總希望能動態看到每一步的執行情況,這時候就可以使用斷點調試功能了.

　　首先,在需要調試的js方法合適的位置加入debugger;

　　然後,運行js並開啟瀏覽器的開發人員模式;

　　這時候如果運行到有debugger的地方,代碼就會停下來,然後使用調試快速鍵進行調試,本人使用Firefox瀏覽器進行調試,調試按鈕位置如下,不同瀏覽器的視圖位置有可能不同,但大體應該差不多,這裡就不多說了.

　　　　這裡 暫停(F8),跨越(10),步進(F11)和步出(shift+F11)等按鈕就可以進行相應的調試了.另外也可以在代碼左側行號的位置添加斷點,這種方式會方便一點.

　 

js調試技巧