偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

JS 的 六種打斷點(diǎn)的方式,你用過幾種?

開發(fā) 前端
Debugger 是前端開發(fā)很重要的一個(gè)工具,它可以在我們關(guān)心的代碼處斷住,通過單步運(yùn)行來理清邏輯。而 Debugger 用的好壞與斷點(diǎn)打得好壞有直接的關(guān)系。

[[440675]]

Debugger 是前端開發(fā)很重要的一個(gè)工具,它可以在我們關(guān)心的代碼處斷住,通過單步運(yùn)行來理清邏輯。而 Debugger 用的好壞與斷點(diǎn)打得好壞有直接的關(guān)系。

Chrome Devtools 和 VSCode 都提供了 Debugger,它們支持的打斷點(diǎn)的方式有 6 種。

普通斷點(diǎn)

在想斷住的那一行左側(cè)單擊一下就可以添加一個(gè)斷點(diǎn),運(yùn)行到該處就會(huì)斷住。

這是最基礎(chǔ)的斷點(diǎn)方式,VSCode 和 Chrome Devtools 都支持這種斷點(diǎn)。

條件斷點(diǎn)

右鍵單擊代碼所在的行左側(cè),會(huì)出現(xiàn)一個(gè)下拉框,可以添加一個(gè)條件斷點(diǎn)。

輸入條件表達(dá)式,當(dāng)運(yùn)行到這一行代碼并且表達(dá)式的值非空時(shí)就會(huì)斷住,這比普通斷點(diǎn)靈活些。

這種根據(jù)條件來斷住的斷點(diǎn) VSCode 和 Chrome Devtools 也都支持。

DOM 斷點(diǎn)

在 Chrome Devtools 的 Elements 面板的對(duì)應(yīng)元素上右鍵,選擇 break on,可以添加一個(gè) dom 斷點(diǎn),也就是當(dāng)子樹有變動(dòng)、屬性有變動(dòng)、節(jié)點(diǎn)移除這三種情況的時(shí)候會(huì)斷住。可以用來調(diào)試導(dǎo)致 dom 變化的代碼。

涉及到 DOM 的調(diào)試,只有 Chrome Devtools 支持這種斷點(diǎn)。

URL 斷點(diǎn)

在 Chrome Devtools 的 Sources 面板可以添加 XHR 的 url 斷點(diǎn),當(dāng) ajax 請(qǐng)求對(duì)應(yīng) url 時(shí)就會(huì)斷住,可以用來調(diào)試請(qǐng)求相關(guān)的代碼。

 

這個(gè)功能只有 Chrome Devtools 有。

Event Listener 斷點(diǎn)

在 Chrome Devtools 的 Sources 面板還可以添加 Event Listener 的斷點(diǎn),指定當(dāng)發(fā)生什么事件時(shí)斷住,可以用來調(diào)試事件相關(guān)代碼。

這個(gè)功能也是只有 Chrome Devtools 有。

異常斷點(diǎn)

在 VSCode 的 Debugger 面板勾選 Uncaught Exceptions 和 Caught Exceptions 可以添加異常斷點(diǎn),在拋出異常未被捕獲或者被捕獲時(shí)斷柱。用來調(diào)試一些發(fā)生異常的代碼時(shí)很有用。

這個(gè)功能只有 VSCode 有。

總結(jié)

Debugger 打斷點(diǎn)的方式除了直接在對(duì)應(yīng)代碼行單擊的普通斷點(diǎn)以外,還有很多根據(jù)不同的情況來添加斷點(diǎn)的方式。

一共有六種:

  • 普通斷點(diǎn):運(yùn)行到該處就斷住
  • 條件斷點(diǎn):運(yùn)行到該處且表達(dá)式為真就斷住,比普通斷點(diǎn)更靈活
  • DOM 斷點(diǎn):DOM 的子樹變動(dòng)、屬性變動(dòng)、節(jié)點(diǎn)刪除時(shí)斷住,可以用來調(diào)試引起 DOM 變化的代碼
  • URL 斷點(diǎn):URL 匹配某個(gè)模式的時(shí)候斷住,可以用來調(diào)試請(qǐng)求相關(guān)代碼
  • Event Listener 斷點(diǎn):觸發(fā)某個(gè)事件監(jiān)聽器的時(shí)候斷住,可以用來調(diào)試事件相關(guān)代碼
  • 異常斷點(diǎn):拋出異常被捕獲或者未被捕獲的時(shí)候斷住,可以用來調(diào)試發(fā)生異常的代碼

這些打斷點(diǎn)方式大部分都是 Chrome Devtools 支持的(普通、條件、DOM、URL、Event Listener),也有的是 VSCode Debugger 支持的(普通、條件、異常)。

不同情況下的代碼可以用不同的打斷點(diǎn)方式,這樣調(diào)試代碼會(huì)高效很多。

JS 的六種打斷點(diǎn)方式,你用過幾種呢?

 

責(zé)任編輯:姜華 來源: 神光的編程秘籍
相關(guān)推薦

2022-03-28 20:57:31

私有屬性class屬性和方法

2023-10-30 11:53:37

繼承JS父類

2025-01-21 10:04:40

Java并發(fā)阻塞隊(duì)列

2025-04-17 07:10:03

API架構(gòu)項(xiàng)目

2019-09-02 11:14:08

隔離虛擬機(jī)操作系統(tǒng)

2018-08-03 16:40:06

前端前端框架微服務(wù)

2024-11-08 09:37:10

C#組件庫(kù)

2025-02-27 00:00:30

SpringJava方式

2019-05-16 13:00:18

異步編程JavaScript回調(diào)函數(shù)

2017-06-26 10:35:58

前端JavaScript繼承方式

2022-03-23 12:55:50

農(nóng)業(yè)物聯(lián)網(wǎng)

2020-07-31 11:12:39

安全威脅網(wǎng)絡(luò)攻擊網(wǎng)絡(luò)安全

2022-01-14 10:34:50

黑客隱藏蹤跡網(wǎng)絡(luò)安全

2020-04-27 09:00:00

雙因素認(rèn)證身份認(rèn)證生物識(shí)別

2017-07-20 08:47:19

網(wǎng)頁(yè)加載時(shí)間移動(dòng)開發(fā)IT

2009-02-11 09:46:00

ASON網(wǎng)絡(luò)演進(jìn)

2024-10-30 16:39:45

2019-01-17 10:58:52

JS異步編程前端

2019-04-30 10:00:59

CSS居中前端

2022-02-14 10:30:37

Java方式框架
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)