###1.前言 很多時(shí)候，頁面的dom元素是動(dòng)態(tài)添加的，而我們不知道具體是哪段js代碼在操作這個(gè)dom元素，所以需要進(jìn)行斷點(diǎn)，對(duì)相應(yīng)的dom元素進(jìn)行斷點(diǎn)監(jiān)聽，這樣才能找出相關(guān)的js代碼。

在瀏覽器的調(diào)試工具中，切到elements一欄，右鍵想要操作的dom元素，在彈出的菜單中選中 "Break on"，會(huì)彈出三個(gè)子選項(xiàng)： subtree modifications:當(dāng)此dom元素子節(jié)點(diǎn)發(fā)生變化時(shí)觸發(fā)斷點(diǎn) Attribute modifications:當(dāng)此dom元素屬性發(fā)生變化時(shí)觸發(fā)斷點(diǎn) node removal:當(dāng)此dom元素被移除時(shí)觸發(fā)斷點(diǎn)

###2.監(jiān)聽dom元素子節(jié)點(diǎn)的改變，為其設(shè)置斷點(diǎn) 選中subtree modifications即可 這個(gè)改變包括 添加修改子元素/添加子元素/移除子元素/修改文本節(jié)點(diǎn)

點(diǎn)擊改變H3的內(nèi)容

添加h2標(biāo)簽

刪除h3標(biāo)簽

我是H3

在這個(gè)例子中，為div#box元素設(shè)置html斷點(diǎn)，一旦子節(jié)點(diǎn)發(fā)生改變，程序都會(huì)中斷執(zhí)行

此時(shí)上面的3個(gè)按鈕，點(diǎn)擊時(shí)都會(huì)觸發(fā)斷點(diǎn)，并跳轉(zhuǎn)到相應(yīng)的代碼位置

###3.監(jiān)聽dom元素屬性變化，為其設(shè)置斷點(diǎn) 選中Attribute modifications即可 屬性的修改/添加/移除都會(huì)觸發(fā)斷點(diǎn)

點(diǎn)擊改變div#box的title屬性

添加class屬性

刪除title屬性

我是H3

function changeAttr() {

document.querySelector("#box").setAttribute('title','新的title')

}

function addAttr() {

document.querySelector("#box").setAttribute('class','newClass')

}

function removeAttr() {

document.querySelector("#box").removeAttribute('title')

}

依次點(diǎn)擊3個(gè)按鈕，程序會(huì)中斷并跳轉(zhuǎn)到相應(yīng)的位置

document.querySelector("#box").setAttribute('title','新的title')

document.querySelector("#box").setAttribute('class','newClass')

document.querySelector("#box").removeAttribute('title')

###4.dom元素被移除時(shí)觸發(fā)斷點(diǎn)

給h3標(biāo)簽設(shè)置斷點(diǎn)，在其被移除時(shí)觸發(fā)斷點(diǎn)

刪除h3標(biāo)簽

我是H3

function removeH3() {

var h3 = document.querySelector("h3")

document.querySelector("#box").removeChild(h3)

}

點(diǎn)擊按鈕移除h3標(biāo)簽時(shí)，程序中斷并跳轉(zhuǎn)到相應(yīng)的位置

document.querySelector("#box").removeChild(h3)

總結(jié)

以上是生活随笔為你收集整理的html怎么加断点快捷键,HTML添加断点 - osc_vyztkm1b的个人空间 - OSCHINA - 中文开源技术交流社区...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。