使用斷點(diǎn)調(diào)試代碼

簡單地說,斷點(diǎn)調(diào)試是指自己在程序的某一行設(shè)置一個(gè)斷點(diǎn)科平,調(diào)試時(shí)褥紫,程序運(yùn)行到這一行就會停住,然后你可以一步一步往下調(diào)試瞪慧,調(diào)試過程中可以看各個(gè)變量當(dāng)前的值髓考,出錯(cuò)的話,調(diào)試到出錯(cuò)的代碼行即顯示錯(cuò)誤汞贸,停下绳军。

在web開發(fā)中印机,打斷點(diǎn)是經(jīng)常使用的調(diào)試代碼的方法,現(xiàn)在在這里簡略的翻譯一下官方對此功能的講解门驾,并插入一些自己的說明射赛。

文章翻譯自:developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

何時(shí)使用何種類型的斷點(diǎn):

Line-of-code:? 知道在DevTools代碼里要打點(diǎn)的具體區(qū)域;

Conditional line-of-code?:?知道在DevTools代碼里要打點(diǎn)的具體區(qū)域且設(shè)置條件奶是,只有為真才執(zhí)行斷點(diǎn)操作楣责;

DOM: 在 body 中添加,檢測節(jié)點(diǎn)或其子節(jié)點(diǎn)的增刪和屬性變化聂沙;

XHR: 在 xhr url 包含特定內(nèi)容的時(shí)候打點(diǎn)秆麸;

Event listener: 在觸發(fā)特定事件的時(shí)候打點(diǎn);

Exception: 在拋出異常的時(shí)候打點(diǎn)及汉;

Function: 在特定函數(shù)被調(diào)用的時(shí)候打點(diǎn)沮趣;

debugger: 在書寫的代碼里希望打點(diǎn)的時(shí)候手動打點(diǎn);



Line-of-code breakpoints

瀏覽器會執(zhí)行解析操作到打點(diǎn)的那行代碼之前(不包含那行代碼)坷随。

操作: f12 -> Sources Tab -> 雙擊打開需要打點(diǎn)的文件 -> 找到需要打點(diǎn)的那行代碼 -> 在行數(shù)上單擊房铭,出現(xiàn)一個(gè)藍(lán)色標(biāo)記,打點(diǎn)完成温眉。

在標(biāo)記上再次單擊缸匪,會刪除當(dāng)前斷點(diǎn)。

在代碼中輸入 debugger 同樣能在指定位置暫停类溢,除了不是在?DevTools UI 里設(shè)置以外和 line-of-code breakpoints 是相等的凌蔬。

console.log('a');

console.log('b');

debugger;? //在此暫停

console.log('c');



Conditional line-of-code breakpoints

在你希望有條件地打點(diǎn)的時(shí)候使用 conditional line-of-code 方法。

操作: f12 -> Sources Tab -> 雙擊打開需要打點(diǎn)的文件 -> 找到需要打點(diǎn)的那行代碼 -> 右鍵行數(shù)闯冷,選擇?Add conditional breakpoint -> 在出現(xiàn)的對話框中輸入條件 -> 點(diǎn)擊 enter砂心,出現(xiàn)橙色標(biāo)志,打點(diǎn)完成窃躲。




管理斷點(diǎn)

可以在 BreakPoints 面板上統(tǒng)一管理所有的斷點(diǎn)计贰。


上面的圖片顯示頁面共有兩個(gè)斷點(diǎn),一個(gè)在 get-started.js 第15行蒂窒,一個(gè)在第32行躁倒。

? ??●? checkbox 選擇啟用禁用斷點(diǎn)

? ??●? ?在條目上右鍵,可以選擇移除當(dāng)前斷點(diǎn)洒琢、停用當(dāng)前斷點(diǎn)秧秉、禁用所有斷點(diǎn)、移除所有斷點(diǎn)衰抑、移除其他斷點(diǎn)象迎。

? ? ? ? ? 禁用所有斷點(diǎn)相當(dāng)于把所有 checkbox 的勾都去掉;

? ? ? ? ? 停用當(dāng)前斷點(diǎn)會讓瀏覽器忽略掉此斷點(diǎn),但是斷點(diǎn)位置和圖標(biāo)仍然保留砾淌,以便再次激活使用啦撮;

? ? ? ? ? 移除斷點(diǎn)會直接去掉此斷點(diǎn);


DOM change breakpoints

在文檔節(jié)點(diǎn)發(fā)生變化的時(shí)候暫停汪厨。

操作: f12 ->?Elements Tab -> 點(diǎn)擊希望監(jiān)測的節(jié)點(diǎn) -> 右擊節(jié)點(diǎn) -> 在出現(xiàn)的菜單上選擇 Break on -> 按需要選擇?Subtree modifications,Attribute modifications,?Node removal赃春。


dom 改變斷點(diǎn)類型:

? ??●????Subtree modifications , 在當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)發(fā)生增加劫乱、移除织中、內(nèi)容改變、交換順序的情況的時(shí)候生效衷戈。其他情況例如當(dāng)前節(jié)點(diǎn)發(fā)生了變化狭吼,或者子節(jié)點(diǎn)的屬性發(fā)生了變化都不會觸發(fā)。

? ??●????Attributes modifications 殖妇, 在當(dāng)前節(jié)點(diǎn)的屬性發(fā)生變化刁笙,例如增加屬性、移除屬性谦趣、屬性值改變 的時(shí)候觸發(fā)采盒。

? ??●????Node Removal , 在當(dāng)前節(jié)點(diǎn)被移除的時(shí)候觸發(fā)蔚润。



XHR breakpoints

在你希望監(jiān)聽特定的 xhr 請求的時(shí)候,使用 xhr breakpoints 尺栖。 指定特定的字符串嫡纠,當(dāng)有包含此字符串的 xhr url 出現(xiàn)時(shí)觸發(fā),DevTools 會在 xhr.send() 方法被調(diào)用的地方暫停延赌。

xhr breakpoints 對 fetch 請求也有效除盏。

對于一些被封裝好了的 xhr 請求例如 JQuery 的 ajax 方法,瀏覽器無法定位到被調(diào)用的地方挫以。

操作: f12 -> Source Tab ->?XHR Breakpoints 面板 -> 點(diǎn)擊 + 號 -> 在出現(xiàn)的對話框里輸入指定的字符串者蠕,瀏覽器會在出現(xiàn)包含此字符串的 xhr 請求時(shí)暫停(無論字符串在 url 的哪個(gè)位置) -> enter , 完成斷點(diǎn)掐松。




Event listener breakpoints

監(jiān)測事件踱侣,在事件發(fā)生后暫停,斷點(diǎn)到事件綁定的位置大磺。支持單獨(dú)的事件例如 click 抡句, 也支持一整個(gè)類別的事件,例如所有的鼠標(biāo)事件杠愧。

操作: f12 -> Source Tab -> 展開?Event Listener Breakpoints 面板待榔,會列出所有能監(jiān)聽的事件?-> 全選或展開之后單獨(dú)選事件,完成斷點(diǎn)流济。


上圖是在移動設(shè)備的手持裝置方向事件(橫豎屏轉(zhuǎn)換)上打點(diǎn)锐锣。



Exception breakpoints

在你希望捕捉到報(bào)異常的代碼的時(shí)候腌闯,使用 exception breakpoints。

操作: f12 -> Source Tab -> 點(diǎn)擊?Pause on exceptions 暫停圖標(biāo) -> 圖標(biāo)變成藍(lán)色雕憔,表明啟用了在未捕獲到的異常出現(xiàn)的時(shí)候斷點(diǎn)的功能姿骏。

可選操作: 勾選?Pause On Caught Exceptions , 能夠在捕獲到異常的情況下也斷點(diǎn)橘茉。

try{

????throw'a exception';

}catch(e){

????console.log(e);

}

上面 try 里面的代碼會遇到異常工腋,但是后面的 catch 代碼能夠捕獲該異常。如果是所有異常都中斷(勾選了?Pause On Caught Exceptions)畅卓,那么代碼執(zhí)行到會產(chǎn)生異常的 throw 語句時(shí)就會自動中斷擅腰;而如果是僅遇到未捕獲異常才中斷,那么這里就不會中斷翁潘。一般我們會更關(guān)心遇到未捕獲異常的情況趁冈。




Function breakpoints

在你希望 debug 一個(gè)具體的函數(shù)時(shí)使用。功能與在此函數(shù)的第一行代碼出打斷點(diǎn)是一樣的拜马。

操作: 在代碼里插入 debug(functionName) 或者在瀏覽器控制臺調(diào)用渗勘。

代碼里插入:

function sum(a,b){

????let result = a+b;? // 瀏覽器在這里暫停

????return result;

};

debug? (sum);? // 參數(shù)是一個(gè)函數(shù),不是字符串

sum();

控制臺調(diào)用:

控制臺輸入debug(sum)俩莽,點(diǎn)擊 enter旺坠,再觸發(fā)一次 sum 操作,就進(jìn)入斷點(diǎn)頁面扮超。

要注意確保目標(biāo)函數(shù)與 debug 函數(shù)在同一個(gè)作用域里面取刃,否則會報(bào) ReferenceError:


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市出刷,隨后出現(xiàn)的幾起案子璧疗,更是在濱河造成了極大的恐慌,老刑警劉巖馁龟,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件崩侠,死亡現(xiàn)場離奇詭異,居然都是意外死亡坷檩,警方通過查閱死者的電腦和手機(jī)却音,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來淌喻,“玉大人僧家,你說我怎么就攤上這事÷闵荆” “怎么了八拱?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我肌稻,道長清蚀,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任爹谭,我火速辦了婚禮枷邪,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘诺凡。我一直安慰自己东揣,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布腹泌。 她就那樣靜靜地躺著嘶卧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪凉袱。 梳的紋絲不亂的頭發(fā)上芥吟,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機(jī)與錄音专甩,去河邊找鬼钟鸵。 笑死,一個(gè)胖子當(dāng)著我的面吹牛涤躲,可吹牛的內(nèi)容都是我干的棺耍。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼种樱,長吁一口氣:“原來是場噩夢啊……” “哼烈掠!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起缸托,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎瘾蛋,沒想到半個(gè)月后俐镐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡哺哼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年佩抹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片取董。...
    茶點(diǎn)故事閱讀 39,696評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡棍苹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出茵汰,到底是詐尸還是另有隱情枢里,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站栏豺,受9級特大地震影響彬碱,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜奥洼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一巷疼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧灵奖,春花似錦嚼沿、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至尉尾,卻和暖如春爆阶,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背沙咏。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工辨图, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人肢藐。 一個(gè)月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓故河,卻偏偏與公主長得像,于是被迫代替她去往敵國和親吆豹。 傳聞我的和親對象是個(gè)殘疾皇子鱼的,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評論 2 353