靈活應(yīng)用js調(diào)試技巧解決樣式問(wèn)題的步驟分享
更新時(shí)間：2012年03月15日 01:11:01 作者：
在很多時(shí)候，前端開(kāi)發(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下的開(kāi)發(fā)人員工具、Firebug、Chrome的開(kāi)發(fā)人員工具等），實(shí)時(shí)查看當(dāng)前HTML片段內(nèi)容
Step 3：在合適的位置增加debugger
例如：先找出大概可能出問(wèn)題的js代碼，在合適的地方加debugger，或者是使用工具增加類(lèi)似于“在屬性被修改時(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下的開(kāi)發(fā)人員工具、Firebug、Chrome的開(kāi)發(fā)人員工具等），實(shí)時(shí)查看當(dāng)前HTML片段內(nèi)容
Step 3：在合適的位置增加debugger
例如：先找出大概可能出問(wèn)題的js代碼，在合適的地方加debugger，或者是使用工具增加類(lèi)似于“在屬性被修改時(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)文章
詳解javascript對(duì)數(shù)組和json數(shù)組的操作
這篇文章主要介紹了javascript對(duì)數(shù)組和json數(shù)組的操作，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript有“預(yù)解析”行為。理解這一特性是很重要的，不然在實(shí)際開(kāi)發(fā)中你可能會(huì)遇到很多無(wú)從解析的問(wèn)題，甚至導(dǎo)致程序bug的存在。下面這篇文章就給大家詳細(xì)介紹了JavaScript中的預(yù)解析，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
認(rèn)識(shí)延遲時(shí)間為0的setTimeout
由 John Resig 的 How JavaScript Timers Work 可以知道，現(xiàn)有的 JavaScript 引擎是單線程處理任務(wù)的。它把任務(wù)放到隊(duì)列中，不會(huì)同步去執(zhí)行，必須在完成一個(gè)任務(wù)后才開(kāi)始另外一個(gè)任務(wù)。2008-05-05
js實(shí)現(xiàn)圖片輪播效果學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片輪播效果的學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
js與vue如何實(shí)現(xiàn)自動(dòng)全屏顯示效果
這篇文章主要給大家介紹了關(guān)于js與vue如何實(shí)現(xiàn)自動(dòng)全屏顯示效果的相關(guān)資料,在vue項(xiàng)目中做一個(gè)可以控制頁(yè)面全屏展示的效果,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法,涉及javascript事件響應(yīng)及針對(duì)頁(yè)面dom元素節(jié)點(diǎn)與屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
javascript實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲
本文很簡(jiǎn)單，給大家分享了一段使用javascript實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲的代碼，算是對(duì)自己學(xué)習(xí)javascript的一次小小的總結(jié)，代碼參考了網(wǎng)友的部分內(nèi)容，推薦給大家，希望對(duì)大家能夠有所幫助。2015-03-03
火狐和ie下獲取javascript 獲取event的方法(推薦)
下面小編就為大家?guī)?lái)一篇火狐和ie下獲取javascript 獲取event的方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
javascript globalStorage類(lèi)代碼
非IE瀏覽器“userdata”的解決方案2009-06-06
記錄滾動(dòng)條位置（使用userdate）...2007-01-01