javascript調(diào)試之DOM斷點調(diào)試法使用技巧分享
有的同學(xué)會說，可以使用源代碼搜索的辦法。的確，對于一個相對簡單的頁面，這個方法時常奏效。但是，對于構(gòu)成相對復(fù)雜的頁面(比如頁面嵌入很多腳本文件和片段、使用了大段面向?qū)ο蟮膶崿F(xiàn)、隱藏了實現(xiàn)的代碼)，可能找起來就不那么順利了。
在Javascript調(diào)試中，我們經(jīng)常會使用到斷點調(diào)試。其實，在DOM結(jié)構(gòu)的調(diào)試中，我們也可以使用斷點方法，這就是DOM Breakpoint（DOM斷點）。
具體的使用方法：
1. 在Chrome瀏覽器中，打開開發(fā)者工具，先選中一個頁面元素，然后點擊鼠標右鍵，依次點擊菜單中的”Break on …”——勾選“Attributes modifications”。刷新頁面，當該元素的屬性發(fā)生變化時，就會暫停腳本的執(zhí)行，并且定位到改變發(fā)生的地方。
2. 在安裝了firebug 的Firefox 瀏覽器中，打開firebug，切換到“HTML”選項卡，選中需要監(jiān)視的DOM元素，鼠標右鍵，勾選菜單中的“在屬性改變時中斷”。這樣就成功添加了一個HTML 斷點。刷新頁面后，firebug 也會幫助我們定位到更改該元素屬性的代碼。
除了可以監(jiān)視DOM元素本身的屬性變化，Chrome 和 Firebug 還可以監(jiān)視其子元素的變化，以及何時元素被刪除。
相關(guān)文章
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡單彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript數(shù)據(jù)存儲 Cookie篇
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)存儲 Cookie篇，感興趣的朋友可以參考一下2016-07-07
使用JavaScript進行進制轉(zhuǎn)換將字符串轉(zhuǎn)換為十進制
JS 是一個很神奇的語言，可以將任意進制字符串轉(zhuǎn)換為十進制，如二進制，八進制，十六進制, 第二數(shù)數(shù)不寫即為最常用的轉(zhuǎn)換為整型十進制2014-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)顯示隱藏表單文字，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細分享了laypage分頁控件使用實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了JS實現(xiàn)當前頁居中分頁效果的方法,涉及javascript操作頁面元素與樣式的相關(guān)技巧,需要的朋友可以參考下2015-06-06
用js實現(xiàn)的拖動表格的tr行的實現(xiàn)代碼，需要的朋友可以參考下。2011-05-05
JSON創(chuàng)建鍵值對（key是中文或者數(shù)字）方式詳解
這篇文章主要介紹了JSON創(chuàng)建鍵值對（key是中文或者數(shù)字）方式詳解,需要的朋友可以參考下2017-08-08
Js實現(xiàn)當前點擊a標簽變色突出顯示其他a標簽回復(fù)原色
當一個頁面有多個a標簽，實現(xiàn)當前點擊a標簽變色，其他a標簽回復(fù)原色，具體實現(xiàn)如下，喜歡的朋友可以參考下2013-11-11
如何使用JavaScript快速創(chuàng)建一個1到100的數(shù)組
平時寫代碼時,我們會生產(chǎn)一些測試用的數(shù)組數(shù)據(jù),比如[1,100]的數(shù)組值,下面這篇文章主要給大家介紹了關(guān)于如何使用JavaScript快速創(chuàng)建一個1到100數(shù)組的相關(guān)資料,需要的朋友可以參考下2022-08-08