Firefox Web Replay - 前端開發者的未來利器

如果你是一個前端開發者，那麼最困擾你的問題通常不是如何修復bug，還是如何在你的開發環境上重現bug。經常會遇到的情況是，收到測試團隊或用戶發來的bug，在自己的開發環境上死活也重現不了。差一點的bug報告只有文字描述或屏幕截圖，好一點的bug報告可能有錄製的視頻。即便是有視頻，按照上面的步驟一步一步來，也未必能夠重現bug。前端代碼的運行情況比較複雜，bug的出現可能與數據相關，也可能與時序相關。如何可靠的重現bug就成了前端開發中的一個老大難問題。現在好了，Firefox的Web Replay可能會在未來成爲你的必備工具，成爲Firefox的殺手鐗功能，並改變目前在開發者中Chrome獨大的局面。

Firefox Web Replay是什麼？

Firefox Web Replay是Firefox還在試驗性階段的新功能。目前該功能只在macOS上的Firefox Nightly版本可用。簡單來說，Firefox Web Replay可以錄製Firefox標籤頁上的行爲，並進行重放。這裏所說的重放，可不是簡單的視覺上的重放，而是高保真的。JavaScript、DOM和CSS的行爲都可以精準的重放。這就意味着在重放時，你可以檢查任意時刻中頁面上的JavaScript對象、DOM元素和CSS的狀態，還可以隨時插入斷點進行調試。

有了Firefox Web Replay的功能，不管是測試人員還是用戶，都只需要把錄製的結果保存下來併發給你。你就可以在Firefox中加載錄製結果文件進行查看，還可以隨時添加JavaScript斷點進行調試。這實在是太cool了。

嚐鮮試用Firefox Web Replay

如果你想嘗試Firefox Web Replay，需要下載macOS上的Firefox Nightly版本。Web Replay功能應該已經默認啓用。可以在地址欄訪問about:config，並檢查設置devtools.recordreplay.enabled的值是否爲true。如果Web Replay已啓用，可以在Firefox的Tools -> Web Developer菜單項下看到Web Replay菜單。

如果你只是需要進行錄製並報告錯誤，通過菜單項Tools -> Web Developer -> Web Replay -> Open New Recording Tab打開一個標籤頁。在這個標籤頁中進行操作。等操作完成之後，通過Tools -> Web Developer -> Web Replay -> Save Recording菜單項保存錄制結果，就可以發送給開發人員了。

當你收到一個錄製文件時，使用Tools -> Web Developer -> Web Replay -> Load Recording in New Tab來加載錄製文件。這個時候你可以看到完整的回放過程。如果需要調試，可以打開Firefox的開發者工具，添加斷點即可。

在錄製過程中，同樣可以添加斷點進行調試。這些斷點和在Console上輸出的消息會在錄製結果中以檢查點的形式出現。點擊這些檢查點可以直接跳轉到相應的時間點。

下面的截圖是Firefox Web Replay回放時的界面。開發者工具上的藍色條是回放時間軸。上面的小藍點代表檢查點。通過時間軸上的按鈕可以往前或往後移動。當添加斷點之後，可以看到在某一時刻JavaScript對象的實際值。

Firefox Web Replay的狀態

目前的Firefox Web Replay還是處於非常早期的階段，非常的不穩定。如果在錄製時進行調試，經常會出現標籤頁崩潰的情況。建議等到該功能相對穩定之後再嘗試。

可以預期到的是，Firefox Web Replay一旦成熟，將成爲前端開發人員手中的利器。很多開發人員會從Chrome轉移到Firefox上來。