js除錯系列 斷點與動態除錯 基礎篇

2022-01-18 01:50:17 字數 2023 閱讀 7459

js除錯系列目錄:

-額,我說的不是張敬軒的 斷點 這首歌,是除錯用到的斷點,進入正題吧。

昨天留的課後練習 1. 分析 votepost 函式是如何實現 推薦 的。

其實我們已經看到了原始碼,只要讀下原始碼即可知道他是怎麼實現的了。

function votepost(n, t, i) ;

$("#digg_tips").css("color", "red").html("提交中...");

$.ajax(

$("#digg_tips").html(n.message)

},error: function(n)

});}

差不多就這個樣子的。

ps: 我用的是 sublime text 格式化的**,和chrome控制台格式化後的結果有點不同。

現在下完斷點了,我們回頭點下 推薦。。(雖然感覺我在騙推薦,不過我真心沒這麼想,當初是隨便找了個按鈕當練習的。)

當你點 推薦 按鈕的時候,神奇的事情發生了,並沒有執行推薦功能,而是跳到了控制台 sources 面板裡我們剛剛下的那個斷點處。

現在,你不僅能在右側 scope variables(變數作用域) 一欄處看到當前變數,而且還能把滑鼠直接移到任意變數上,就可以檢視該變數的值。

scope variables欄目會顯示當前作用域以及他的父級作用域,以及閉包。

是不是超方便。。(我初學閉包的時候,scope variables幫了我不少呢。)

我們進行下一步,按3次 f10 就可以看到這樣的東西。

我們每按一次 f10 會執行一條語句,剛才按了3次,就是執行到了  $("#digg_tips").css("color", "red").html("提交中...");

所以我們可以在頁面上看到 #digg_tips 顯示提交中的字樣。

可是當我們再次按 f10 的時候,發現他一路執行下去,而沒有進入 ajax 內部的**函式。

這是個糾結的問題,也是我要重點說的。

像這種**函式,特別是非同步的,我們要在**函式內部再次下乙個斷點。

所以我們在 96 行再下個斷點即可,現在我們再點一下 推薦 依然停在了 92 行,我們直接按 f8 就可以在 ajax 的**函式處斷下了。

現在,我們就可以除錯**資料了,同時可以發現右側 scope variables 多了乙個 closure 的東西,這個就是閉包。

如果現在理解不了,那就過,這東西要大篇幅介紹,不是三言兩句就能講明白的,反正控制台很強大就對了。

在看到閉包的同時,我們也看到 ajax 的返回資料 n,很明顯,我的 issuccess 屬性為 false 沒有成功,因為他返回了乙個資訊 "不能推薦自己的內容"。

是不是很有意思,動態除錯,讓尋找bug變得 so easy。

接下來,我們來實驗第三個引數。

我們在控制台輸入  votepost(cb_entryid, 'digg', true);  然後回車。

同樣停在了92行的斷點處,這個裡就不除錯了,直接f8進入 ajax 的**函式出。

在這裡我們非常清楚的看到,當第三個引數為 true 的時候,確實是取消推薦了,同時你可以看到推薦數確實 -1 了,哪怕重新整理也一樣。

本次我們用到了兩個快捷鍵 f10 和 f8,明天詳細介紹,今天先學會基礎除錯先。

如果不會這個練習,推薦看下 《** jquery 事件原始碼定位問題》,有詳細分析哦。

IOS除錯 斷點除錯以及動態輸出

斷點除錯,是最常用最簡單的一種除錯方式,可以一步步跟蹤程式執行的流程,得到變數的值,快速的找到錯誤的原因。斷點的操作非常簡單,下面通過幾張圖來介紹一下如何新增 刪除 編輯以及使用斷點。設定全域性斷點 異常斷點 當遇到錯誤,debug程式會自動定位到棧底資訊,即跳到出錯 所在行。設定條件斷點,當滿足條...

斷點與單步除錯

先看看xcode除錯控制台上的一些命令按鈕。lldb 常用命令 1.執行時修改變數的值 假如有乙個loginwithusername 方法,需要兩個引數 username,password。首先設定好斷點,如下圖所示 控制台會返回以下資訊 0x1c59aae0 a line forthe break...

js增刪dom控制項 js的除錯 斷點與log

以下說的是原生js不是jquery。找到錨點元素 元素屬性操作,事件操作 轉換錨點 在錨點元素內外查詢元素 查 錨點內外增刪元素 增,刪,改 element屬性與方法可以遍歷,增刪改整個dom結構,element參考如下。除錯 大多瀏覽器支援js的除錯,斷點單步,打log,檢視變數。檢視js生成的h...