靈活應(yīng)用js調(diào)試技巧解決樣式問題的步驟分享
更新時(shí)間：2012年03月15日 01:11:01 作者：
在很多時(shí)候，前端開發(fā)人員使用JS腳本，對(duì)頁(yè)面Dom結(jié)構(gòu)或者是樣式做出了修改，會(huì)造成一些意想不到的bug
由于種種原因，例如：代碼邏輯復(fù)雜、時(shí)間久了遺忘處理細(xì)節(jié)、或者根本就是接手修改別人遺留的bug，在這種情況下，debug就會(huì)變成一件頭疼的事情。
在此分享一些JS調(diào)試方面的技巧，針對(duì)各種疑難雜癥，往往能起到較好的效果。
Step 1：檢查服務(wù)器直接render出來(lái)的內(nèi)容
使用查看源文件的方式，這一步首先明確，頁(yè)面HTML片段是否在服務(wù)器端就已經(jīng)不正常了。
Step 2：比較實(shí)際的HTML內(nèi)容和服務(wù)器render出來(lái)的原始內(nèi)容之間的差異
可以使用一些前端工具（例如：IE下的開發(fā)人員工具、Firebug、Chrome的開發(fā)人員工具等），實(shí)時(shí)查看當(dāng)前HTML片段內(nèi)容
Step 3：在合適的位置增加debugger
例如：先找出大概可能出問題的js代碼，在合適的地方加debugger，或者是使用工具增加類似于“在屬性被修改時(shí)中斷”的斷點(diǎn)，例如實(shí)際的HTML比原始內(nèi)容多出了一個(gè)width屬性
Step 4：運(yùn)行你的頁(yè)面，進(jìn)入中斷，并檢查js調(diào)用堆棧（關(guān)鍵的一步）
推薦使用IE支持的Visual Studio調(diào)試器（需要先設(shè)置IE：取消“禁用腳本調(diào)試”），這時(shí)基本就能確定是哪個(gè)js方法修改了樣式
在此分享一些JS調(diào)試方面的技巧，針對(duì)各種疑難雜癥，往往能起到較好的效果。
Step 1：檢查服務(wù)器直接render出來(lái)的內(nèi)容
使用查看源文件的方式，這一步首先明確，頁(yè)面HTML片段是否在服務(wù)器端就已經(jīng)不正常了。
Step 2：比較實(shí)際的HTML內(nèi)容和服務(wù)器render出來(lái)的原始內(nèi)容之間的差異
可以使用一些前端工具（例如：IE下的開發(fā)人員工具、Firebug、Chrome的開發(fā)人員工具等），實(shí)時(shí)查看當(dāng)前HTML片段內(nèi)容
Step 3：在合適的位置增加debugger
例如：先找出大概可能出問題的js代碼，在合適的地方加debugger，或者是使用工具增加類似于“在屬性被修改時(shí)中斷”的斷點(diǎn)，例如實(shí)際的HTML比原始內(nèi)容多出了一個(gè)width屬性
Step 4：運(yùn)行你的頁(yè)面，進(jìn)入中斷，并檢查js調(diào)用堆棧（關(guān)鍵的一步）
推薦使用IE支持的Visual Studio調(diào)試器（需要先設(shè)置IE：取消“禁用腳本調(diào)試”），這時(shí)基本就能確定是哪個(gè)js方法修改了樣式
相關(guān)文章
原生js實(shí)現(xiàn)對(duì)Ajax的封裝(仿jquery)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)對(duì)Ajax的封裝，模仿jquery，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
layui問題之自動(dòng)滾動(dòng)二級(jí)iframe頁(yè)面到指定位置的方法
今天小編就為大家分享一篇layui問題之自動(dòng)滾動(dòng)二級(jí)iframe頁(yè)面到指定位置的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
JavaScript實(shí)現(xiàn)Excel表格效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Excel表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
JavaScript中函數(shù)聲明優(yōu)先于變量聲明的實(shí)例分析
同一個(gè)標(biāo)示符，先后用var和function聲明它。最后它是什么呢2012-03-03
TypeScript 憑借其強(qiáng)大的類型系統(tǒng),提供了一項(xiàng)稱為泛型的功能,它使開發(fā)人員能夠編寫可重用和類型安全的代碼,泛型允許您創(chuàng)建可以處理多種類型（而不是單個(gè)類型）的組件,本文深入探討了 TypeScript 泛型,提供了詳盡的解釋和代碼示例來(lái)說(shuō)明它們的用法和好處2024-02-02
JavaScript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)跳轉(zhuǎn)(推薦)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)跳轉(zhuǎn)(推薦)的相關(guān)資料,涉及到settimeout和setinterval方法的介紹，非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
基于aotu.js實(shí)現(xiàn)微信自動(dòng)添加通訊錄中的聯(lián)系人功能
這篇文章主要介紹了利用aotu.js實(shí)現(xiàn)微信自動(dòng)添加通訊錄中的聯(lián)系人,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
這篇文章主要介紹了javascript實(shí)現(xiàn)微信分享，非常的實(shí)用，小伙伴們參考下吧2014-12-12
相信大家都知道在SVG中添加文本是使用text元素。但這個(gè)元素不能夠自動(dòng)換行，超出的部分就顯示不出來(lái)了，怎么辦呢？下面通過這篇文章來(lái)給大家詳細(xì)介紹下實(shí)現(xiàn)的過程。2016-10-10
JavaScript html5 canvas畫布中刪除一個(gè)塊區(qū)域的方法
這篇文章主要介紹了JavaScript html5 canvas畫布中刪除一個(gè)塊區(qū)域的方法,涉及JavaScript結(jié)合html5操作canvas畫布圖形繪制的技巧,需要的朋友可以參考下2016-01-01