javascript調(diào)試之DOM斷點(diǎn)調(diào)試法使用技巧分享
有的同學(xué)會(huì)說，可以使用源代碼搜索的辦法。的確，對(duì)于一個(gè)相對(duì)簡單的頁面，這個(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í)元素被刪除。
- JavaScript必備的斷點(diǎn)調(diào)試技巧總結(jié)（推薦）
- JavaScript快速調(diào)試的兩個(gè)技巧
- 實(shí)用Javascript調(diào)試技巧分享(小結(jié))
- JavaScript調(diào)試之console.log調(diào)試的一個(gè)小技巧分享
- JavaScript的兼容性與調(diào)試技巧
- 必備的JS調(diào)試技巧匯總
- 淺析JavaScript 調(diào)試方法和技巧
- 推薦5 個(gè)常用的JavaScript調(diào)試技巧
- JavaScript調(diào)試技巧之console.log()詳解
- 實(shí)用的Javascript調(diào)試技巧整理
相關(guān)文章
ES6實(shí)現(xiàn)的遍歷目錄函數(shù)示例
這篇文章主要介紹了ES6實(shí)現(xiàn)的遍歷目錄函數(shù),涉及ES6文件目錄的遍歷、讀取、回調(diào)函數(shù)及json相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
15個(gè)非常實(shí)用的JavaScript代碼片段
這篇文章主要為大家詳細(xì)介紹了15個(gè)非常實(shí)用的JavaScript代碼片段，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Javascript處理DOM元素事件實(shí)現(xiàn)代碼
DOM元素都有一些標(biāo)準(zhǔn)事件，一般使用時(shí)只要使用onclick=function的方式就可以了，但是當(dāng)需要為DOM元素添加多個(gè)事件，刪除事件，或在用Javascript封裝控件的時(shí)候，為封裝的控件添加自定義事件的時(shí)候2012-05-05
最丑的時(shí)鐘效果！js canvas時(shí)鐘制作方法
最丑的時(shí)鐘效果，這篇文章主要為大家詳細(xì)介紹了js canvas時(shí)鐘制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
H5如何實(shí)現(xiàn)喚起APP及調(diào)試bug解決
這篇文章主要為大家介紹了H5如何實(shí)現(xiàn)喚起APP及調(diào)試bug解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了TypeScript常見類型及應(yīng)用示例講解，本章我們會(huì)講解?JavaScript?中最常見的一些類型，以及對(duì)應(yīng)的描述方式，有需要的朋友可以借鑒參考下2022-02-02
這篇文章主要詳細(xì)介紹了javascript 閉包的相關(guān)資料，十分詳盡,需要的朋友可以參考下2015-02-02
JS+H5 Canvas實(shí)現(xiàn)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了JS+H5 Canvas實(shí)現(xiàn)時(shí)鐘效果，利用JavaScript和Canvas實(shí)現(xiàn)簡單時(shí)鐘效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
最近面試有道題是至少寫出 15 個(gè)數(shù)組方法，數(shù)組方法平時(shí)經(jīng)常用到的也就6-7個(gè)，突然要一下子寫出15個(gè)，還是有點(diǎn)卡殼了，今天整理一波，需要的可以參考一下2022-05-05
JS實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04