如何防止斷點除錯進入jquery庫

antzone發表於2017-04-10
斷點除錯jQuery

使用谷歌等瀏覽器進行斷點除錯一定不會陌生。

如果除錯jQuery或者其他需要引入庫的程式碼時候，大家有沒有遇到過進入jquery庫或者其他庫的內部，如果這樣那真的是非常的痛苦，從下面就來介紹一下如何儘量避免這種情況或者儘量的減輕痛苦。

下面先解釋一下斷點除錯中經常用到的按鍵，後面會用到:

（1）.F8:恢復執行。

（2）.F10:步過，遇到自定義函式也當成一個語句執行，而不會進入函式內部。

（3）.F11:步入，遇到自定義函式就跟入到函式內部。

（4）.Shift + F11:步出，跳出當前自定義函式。

下面就通過程式碼例項介紹一下各個按鍵或者按鍵組合的作用。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#antzone {
  height: 30px;
  width: 100px;
  background: #ccc;
  text-align:center;
  line-height:30px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#bt").click(function () {
    $("#antzone").animate({
      "width": "1000px"
    },5000);
    $("#antzone").text("螞蟻部落");
  });
})
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="檢視效果" />
</body>
</html>

我們在上面的程式碼中，設定兩個斷點，截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/10/101509kc4qdq8fnukq3k4u.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

當點選按鈕之後，那麼就停在20行斷點處，點選F8就是恢復執行，遇到下一個斷點再停止，一直這樣重複下去。

如果點選F10的話，就會將自定義函式看做為一個語句，不會進入函式內部。

如果點選F11的話，就非常的認真仔細了，每一條語句都會進入，這樣就會進入jquery庫內部。

但是在實際除錯中，點選F10依然能夠進入jquery，這個時候使用Shift + F11就可以跳出那個進入的函式了。

相關文章