1. 程式人生 > >黑科技!Fundebug支援視覺化重現出錯場景

黑科技!Fundebug支援視覺化重現出錯場景

摘要: Fundebug一直專注於提高Debug效率!

各位老鐵,你們在解決bug的時候,是否有過這樣的困擾:

  • bug嚴不嚴重,要不要立即修復?
  • 使用者有沒有受到影響,是否影響使用?
  • 到底是如何觸發這個bug的?

很多前端的bug,比如WeixinJSBridge is not definedJQuery is not definedScript error.。它們到底有沒有影響到使用者,除非是使用者主動反饋,否則我們不得而知。另一方面,研究表明Debug的絕大部分時間是花在bug復現(reproduce)。而復現的關鍵就是高精度還原使用者觸發錯誤的環境,以及使用者的操作行為。

Fundebug在2017年上線了

使用者行為回溯功能,通過記錄滑鼠點選、網路請求等幫助開發者更好地理解出錯原因。如今,我們對JavaScript監控外掛再次進行重大升級,通過全面視覺化重現出錯場景,來方便開發者分析使用者觸發錯誤的方式。下面使用了最常見的例子(Vue.js框架開發的餓了麼App)為大家演示:



也許你會疑惑:這不就是一個短視訊,沒啥特別的!
其實該畫面擷取自Fundebug的報錯控制檯,完整的畫面是這樣的(請點選播放按鈕):

它並不是一個真正的視訊!Fundebug通過獨特的技術將使用者的使用過程“錄”了下來,並完全視覺化重現。演算法經過優化,整個“錄製”過程CPU的使用率非常低。和傳統的視訊相比,體積小了成百上千倍。Fundebug外掛“錄製”的“短視訊”,壓縮後的體積只有幾十KB。

另外,Fundebug的JavaScript外掛已經對密碼等敏感資料進行了自動化過濾。 並且,如果您在某個(DOM)節點配置了_fun-hide的class,那麼該元素在外掛進行錄製前就會被預先刪除掉來保障隱私安全。具體請檢視文件

通過視覺化重現出錯前使用者的使用情況,可以方便開發者更好地去理解bug的成因,更快復現bug!歡迎各位老鐵註冊體驗!

參考

關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了9億+錯誤事件,得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用!

您的使用者遇到BUG了嗎?

體驗Demo 免費使用