前端除錯知識, 各種除錯姿勢

2021-10-08 10:44:31 字數 1012 閱讀 5908

在日常開發過程中,如果我們的程式出問題了,要找出是**導致的問題的時候,往往會遇到乙個變數在10多20多個地方被改變了,然後找不到時哪一次的改變導致的異常;

笨的方法也有,就是每乙個有可能改到的地方都加上乙個console.log,通過log乙個數字來判斷,它執行到哪了,為什麼只跑到那一步。這種方法的缺點也很明顯,就是耗時耗力。

下面說方法:

這裡可以看到執行到這裡的時候, 就可以看到呼叫棧, 還有區域性變數等等資訊

這裡可以看到是什麼函式導致他改變的

這個是最基礎的, 控制台打斷點

這個方法可以監聽引數的改變

bloglists: ,

deep: true, // 物件內的改動

之前遇到乙個坑, 就是在watch裡面監聽, 結果監聽不到他的呼叫棧(呼叫方法), 實際上是由於vue的監聽機制的實現導致的, 那一次是因為watch的變數param實際上沒有改變, 導致沒有調重新計算的方法, 導致計算的剩餘量被初始化為0

思路就是使用 object.defineproperty() 方法, 對vue的watch進行監聽, 如果key值是param這個自定義變數, 重新定義set方法, 然後在裡面設定debugger, 就可以看到是**改動了param這個變數.

前端除錯Debug

前端頁面設定dubug 首先呢,在觸發檔案中新增debugger 然後訪問頁面觸發這個js檔案中的函式方法,此時頁面會變灰,並且在f12的彈出框中,會預設開啟sources資源 這個時候,你可以看右邊的提示資訊 f10是一步一步執行,f8是一下執行完成 日常的除錯過程,可能會需要。console.l...

除錯前端AJAX

這篇心得的由來得益於holmesian。感謝holmesian的指導 除錯前端的ajax程式。在ajax中總會出現乙個時間處理函式,在裡面會有乙個後端的程式了。這樣我們直接訪問這個程式,通過引數傳值。這樣,就可以很直觀的看到,xml返回的資料,直接進行除錯。歡迎 actionbi2010 gmail...

前端開發除錯經驗

一 ajax請求注意寫上console.log data 這裡的data是指伺服器返回的結果,同時瀏覽器開啟捕獲異常模式,這樣一旦發生異常或錯誤,前端就可以不借助後端檢視日誌就可以輕鬆知道伺服器端發生了什麼錯誤。二 前端為什麼少用submit?因為若不小心忘記寫了return false,會使頁面有...