js調試技巧和快捷鍵

 一、“逐語句執行”或者“逐步執行”按鈕：

　　　　1、意思就是，每點擊它一次，js語句就會往后執行一句

　　　　2、快捷鍵F10

 　　　  

  

二、“逐過程執行”按鈕：

　　　　1、常用在一個方法調用多個js文件時，涉及到的js代碼比較長，則會使用到這個按鈕

　　　　2、快捷鍵F8

　　      

  

三、console控制台：

　　　　1、這個就是一個js解析器，是瀏覽器本身用來解析運行js的家伙，只不過瀏覽器通過console讓我們開發者在調試過程中，可以控制js的運行以及輸出。

　　　　2、console.log()可以取代alert()或document.write()，在網頁腳本中使用console.log()時，會在瀏覽器控制台打印出信息。

　　　　3、console.dir()可以顯示一個對象所有的屬性和方法。

 

四、sources面板：

　　　　1、源碼面板，調試最重要的一個功能。

 

 　　　　2、Pretty print 按鈕：格式化代碼。

　　　　 

　　　　3、Breakpoints 一欄：管理所有斷點，可以方便地跳轉到對應斷點的位置處。

　　　　 

　　　　4、Scope(變量作用域) 一欄：顯示當前作用域和它的父級作用域，以及閉包。

　　　　 

五、jQuery 事件源碼定位問題：

　　　　將以下代碼復制到控制台，按回車運行。

　　　　1、適用於 1.5+ 版本的 jQuery：

function lookEvents (elem) {
    return $._data ? $._data( elem, "events" ) : $.data( elem, "events", undefined, true );
}
var event = lookEvents($("#testbtn")[0]); // 獲取綁定的事件
event.click[0].handler // 獲取click事件的第一個事件源碼地址

 

　　　　2、適用於 1.2.6-1.4 版本的 jQuery：　　　

function lookEvents (elem) {
    return $._data ? $._data( elem, "events" ) : $.data( elem, "events", undefined, true );
}
var event = lookEvents($("#testbtn")[0]); // 獲取綁定的事件
event.click; // 查看有幾個click事件，如果要查看其他事件直接輸入 event 然后回車即可

 

六、debugger：調試器，即代碼斷點。

　　　　1、用法非常簡單，在寫代碼的時候，想要斷點調試的地方寫上 debugger 即可。

　　　　2、調試按鈕。

　　　　　　

　　　　　　

 七、調試bug的思路：

　　　　1、首先，js是否成功的執行進來；

　　　　2、其次，js是否存在邏輯問題、變量問題、參數問題等等；

　　　　3、最后，如果上述都沒有問題，仔細查看各種符號。。。

　　　　  

參考資料1：【http://www.cnblogs.com/mqfblog/p/5397282.html】

參考資料2：【http://www.cnblogs.com/52cik/p/js-console-acquaintance.html】

參考資料3：【https://www.cnblogs.com/softwarefang/p/6891234.html?utm_source=itdadao&utm_medium=referral】