在開發(fā)中，偶爾會(huì)遇到類似這樣的問題：頁面上的一個(gè)DOM元素被改了屬性，但是我們卻不知道是哪個(gè)腳本更改的。有的同學(xué)會(huì)說，可以使用源代碼搜索的辦法。的確，對(duì)于一個(gè)相對(duì)簡(jiǎn)單的頁面，這個(gè)方法時(shí)常奏效。但是，對(duì)于構(gòu)成相對(duì)復(fù)雜的頁面(比如頁面嵌入很多腳本文件和片段、使用了大段面向?qū)ο蟮膶?shí)現(xiàn)、隱藏了實(shí)現(xiàn)的代碼)，可能找起來就不那么順利了。
在Javascript調(diào)試中，我們經(jīng)常會(huì)使用到斷點(diǎn)調(diào)試。其實(shí)，在DOM結(jié)構(gòu)的調(diào)試中，我們也可以使用斷點(diǎn)方法，這就是DOM Breakpoint（DOM斷點(diǎn)）。
具體的使用方法：
1. 在Chrome瀏覽器中，打開開發(fā)者工具，先選中一個(gè)頁面元素，然后點(diǎn)擊鼠標(biāo)右鍵，依次點(diǎn)擊菜單中的”Break on …”——勾選“Attributes modifications”。刷新頁面，當(dāng)該元素的屬性發(fā)生變化時(shí)，就會(huì)暫停腳本的執(zhí)行，并且定位到改變發(fā)生的地方。
2. 在安裝了firebug 的Firefox 瀏覽器中，打開firebug，切換到“HTML”選項(xiàng)卡，選中需要監(jiān)視的DOM元素，鼠標(biāo)右鍵，勾選菜單中的“在屬性改變時(shí)中斷”。這樣就成功添加了一個(gè)HTML 斷點(diǎn)。刷新頁面后，firebug 也會(huì)幫助我們定位到更改該元素屬性的代碼。
除了可以監(jiān)視DOM元素本身的屬性變化，Chrome 和 Firebug 還可以監(jiān)視其子元素的變化，以及何時(shí)元素被刪除。
喜歡 
頂
難過
囧
圍觀
無聊
