靈活應用js調(diào)試技巧解決樣式問題的步驟分享

更新時間：2012年03月15日 01:11:01 作者：

在很多時候，前端開發(fā)人員使用JS腳本，對頁面Dom結(jié)構(gòu)或者是樣式做出了修改，會造成一些意想不到的bug

由于種種原因，例如：代碼邏輯復雜、時間久了遺忘處理細節(jié)、或者根本就是接手修改別人遺留的bug，在這種情況下，debug就會變成一件頭疼的事情。

在此分享一些JS調(diào)試方面的技巧，針對各種疑難雜癥，往往能起到較好的效果。

Step 1：檢查服務器直接render出來的內(nèi)容

　　　　使用查看源文件的方式，這一步首先明確，頁面HTML片段是否在服務器端就已經(jīng)不正常了。

Step 2：比較實際的HTML內(nèi)容和服務器render出來的原始內(nèi)容之間的差異

　　　　可以使用一些前端工具（例如：IE下的開發(fā)人員工具、Firebug、Chrome的開發(fā)人員工具等），實時查看當前HTML片段內(nèi)容

Step 3：在合適的位置增加debugger

　　　　例如：先找出大概可能出問題的js代碼，在合適的地方加debugger，或者是使用工具增加類似于“在屬性被修改時中斷”的斷點，例如實際的HTML比原始內(nèi)容多出了一個width屬性

Step 4：運行你的頁面，進入中斷，并檢查js調(diào)用堆棧（關鍵的一步）

　　　　推薦使用IE支持的Visual Studio調(diào)試器（需要先設置IE：取消“禁用腳本調(diào)試”），這時基本就能確定是哪個js方法修改了樣式

您可能感興趣的文章:

js調(diào)試技巧

詳解javascript對數(shù)組和json數(shù)組的操作
這篇文章主要介紹了javascript對數(shù)組和json數(shù)組的操作，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
深入理解JavaScript中的預解析
JavaScript有“預解析”行為。理解這一特性是很重要的，不然在實際開發(fā)中你可能會遇到很多無從解析的問題，甚至導致程序bug的存在。下面這篇文章就給大家詳細介紹了JavaScript中的預解析，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2017-01-01
認識延遲時間為0的setTimeout
由 John Resig 的 How JavaScript Timers Work 可以知道，現(xiàn)有的 JavaScript 引擎是單線程處理任務的。它把任務放到隊列中，不會同步去執(zhí)行，必須在完成一個任務后才開始另外一個任務。
2008-05-05
js實現(xiàn)圖片輪播效果學習筆記
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片輪播效果的學習筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
js與vue如何實現(xiàn)自動全屏顯示效果
這篇文章主要給大家介紹了關于js與vue如何實現(xiàn)自動全屏顯示效果的相關資料,在vue項目中做一個可以控制頁面全屏展示的效果,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-12-12
JS實現(xiàn)動態(tài)添加DOM節(jié)點和事件的方法示例
這篇文章主要介紹了JS實現(xiàn)動態(tài)添加DOM節(jié)點和事件的方法,涉及javascript事件響應及針對頁面dom元素節(jié)點與屬性的動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
javascript實現(xiàn)簡單的貪吃蛇游戲
本文很簡單，給大家分享了一段使用javascript實現(xiàn)簡單的貪吃蛇游戲的代碼，算是對自己學習javascript的一次小小的總結(jié)，代碼參考了網(wǎng)友的部分內(nèi)容，推薦給大家，希望對大家能夠有所幫助。
2015-03-03
火狐和ie下獲取javascript 獲取event的方法(推薦)
下面小編就為大家?guī)硪黄鸷蚷e下獲取javascript 獲取event的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
javascript globalStorage類代碼
非IE瀏覽器“userdata”的解決方案
2009-06-06
記錄滾動條位置（使用userdate）
記錄滾動條位置（使用userdate）...
2007-01-01