首頁 > web前端 > js教程 > 主體

javascript調試之DOM斷點調試法使用技巧分享_javascript技巧

WBOY
發布: 2016-05-16 16:52:19
原創
1383 人瀏覽過

有的同學會說,可以使用原始碼搜尋的辦法。的確,對於一個相對簡單的頁面,這個方法時常奏效。但是,對於構成相對複雜的頁面(例如頁面嵌入很多腳本文件和片段、使用了大段面向對象的實現、隱藏了實現的代碼),可能找起來就不那麼順利了。

在Javascript調試中,我們經常會使用到斷點調試。其實,在DOM結構的調試中,我們也可以使用斷點方法,這就是DOM Breakpoint(DOM斷點)。

具體的使用方法:

1. 在Chrome瀏覽器中,開啟開發者工具,先選取一個頁面元素,然後點選滑鼠右鍵,依序點選選單中的」Break on …」-勾選「Attributes modifications」。刷新頁面,當該元素的屬性發生變化時,就會暫停腳本的執行,並且定位到改變發生的地方。

2. 在安裝了firebug 的Firefox 瀏覽器中,開啟firebug,切換到「HTML」選項卡,選取需要監視的DOM元素,滑鼠右鍵,勾選選單中的「在屬性改變時中斷」。這樣就成功加入了一個HTML 斷點。刷新頁面後,firebug 也會幫助我們定位到更改該元素屬性的程式碼。

除了可以監視DOM元素本身的屬性變化,Chrome 和 Firebug 還可以監視其子元素的變化,以及何時元素被刪除。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板