靈活應(yīng)用js調(diào)試技巧解決樣式問題的步驟分享
更新時間：2012年03月15日 01:11:01 作者：
在很多時候，前端開發(fā)人員使用JS腳本，對頁面Dom結(jié)構(gòu)或者是樣式做出了修改，會造成一些意想不到的bug
由于種種原因，例如：代碼邏輯復(fù)雜、時間久了遺忘處理細(xì)節(jié)、或者根本就是接手修改別人遺留的bug，在這種情況下，debug就會變成一件頭疼的事情。
在此分享一些JS調(diào)試方面的技巧，針對各種疑難雜癥，往往能起到較好的效果。
Step 1：檢查服務(wù)器直接render出來的內(nèi)容
使用查看源文件的方式，這一步首先明確，頁面HTML片段是否在服務(wù)器端就已經(jīng)不正常了。
Step 2：比較實(shí)際的HTML內(nèi)容和服務(wù)器render出來的原始內(nèi)容之間的差異
可以使用一些前端工具（例如：IE下的開發(fā)人員工具、Firebug、Chrome的開發(fā)人員工具等），實(shí)時查看當(dāng)前HTML片段內(nèi)容
Step 3：在合適的位置增加debugger
例如：先找出大概可能出問題的js代碼，在合適的地方加debugger，或者是使用工具增加類似于“在屬性被修改時中斷”的斷點(diǎn)，例如實(shí)際的HTML比原始內(nèi)容多出了一個width屬性
Step 4：運(yùn)行你的頁面，進(jìn)入中斷，并檢查js調(diào)用堆棧（關(guān)鍵的一步）
推薦使用IE支持的Visual Studio調(diào)試器（需要先設(shè)置IE：取消“禁用腳本調(diào)試”），這時基本就能確定是哪個js方法修改了樣式
在此分享一些JS調(diào)試方面的技巧，針對各種疑難雜癥，往往能起到較好的效果。
Step 1：檢查服務(wù)器直接render出來的內(nèi)容
使用查看源文件的方式，這一步首先明確，頁面HTML片段是否在服務(wù)器端就已經(jīng)不正常了。
Step 2：比較實(shí)際的HTML內(nèi)容和服務(wù)器render出來的原始內(nèi)容之間的差異
可以使用一些前端工具（例如：IE下的開發(fā)人員工具、Firebug、Chrome的開發(fā)人員工具等），實(shí)時查看當(dāng)前HTML片段內(nèi)容
Step 3：在合適的位置增加debugger
例如：先找出大概可能出問題的js代碼，在合適的地方加debugger，或者是使用工具增加類似于“在屬性被修改時中斷”的斷點(diǎn)，例如實(shí)際的HTML比原始內(nèi)容多出了一個width屬性
Step 4：運(yùn)行你的頁面，進(jìn)入中斷，并檢查js調(diào)用堆棧（關(guān)鍵的一步）
推薦使用IE支持的Visual Studio調(diào)試器（需要先設(shè)置IE：取消“禁用腳本調(diào)試”），這時基本就能確定是哪個js方法修改了樣式
相關(guān)文章
詳解javascript對數(shù)組和json數(shù)組的操作
這篇文章主要介紹了javascript對數(shù)組和json數(shù)組的操作，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript有“預(yù)解析”行為。理解這一特性是很重要的，不然在實(shí)際開發(fā)中你可能會遇到很多無從解析的問題，甚至導(dǎo)致程序bug的存在。下面這篇文章就給大家詳細(xì)介紹了JavaScript中的預(yù)解析，有需要的朋友們可以參考借鑒，下面來一起看看吧。2017-01-01
由 John Resig 的 How JavaScript Timers Work 可以知道，現(xiàn)有的 JavaScript 引擎是單線程處理任務(wù)的。它把任務(wù)放到隊列中，不會同步去執(zhí)行，必須在完成一個任務(wù)后才開始另外一個任務(wù)。2008-05-05
js實(shí)現(xiàn)圖片輪播效果學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片輪播效果的學(xué)習(xí)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要給大家介紹了關(guān)于js與vue如何實(shí)現(xiàn)自動全屏顯示效果的相關(guān)資料,在vue項目中做一個可以控制頁面全屏展示的效果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
JS實(shí)現(xiàn)動態(tài)添加DOM節(jié)點(diǎn)和事件的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)動態(tài)添加DOM節(jié)點(diǎn)和事件的方法,涉及javascript事件響應(yīng)及針對頁面dom元素節(jié)點(diǎn)與屬性的動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
javascript實(shí)現(xiàn)簡單的貪吃蛇游戲
本文很簡單，給大家分享了一段使用javascript實(shí)現(xiàn)簡單的貪吃蛇游戲的代碼，算是對自己學(xué)習(xí)javascript的一次小小的總結(jié)，代碼參考了網(wǎng)友的部分內(nèi)容，推薦給大家，希望對大家能夠有所幫助。2015-03-03
火狐和ie下獲取javascript 獲取event的方法(推薦)
下面小編就為大家?guī)硪黄鸷蚷e下獲取javascript 獲取event的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
非IE瀏覽器“userdata”的解決方案2009-06-06
記錄滾動條位置（使用userdate）...2007-01-01