Mozilla對Firefox Quantum開發者版本中的網頁應用程式除錯工具DevTools進行許多更新,在除錯功能上,開始支援行內中斷點(Inline Breakpoint),開發者也能對JavaScript Worker進行除錯,並且還重新設計原始碼地圖(Source Map),讓變數名稱一目瞭然,而DevTools整體執行效率也獲得進一步提升。

開發者將可以使用DevTools,在程式碼設中設置行內中斷點(下圖),讓開發者能夠檢視一行程式碼中的多個狀態,以更容易的方法對壓縮腳本(Minified Script)、箭頭函式以及方法鏈呼叫(Chained Method Call)進行除錯。而DevTools也更好地支援JavaScript Worker除錯,開發者可以在Threads面板上切換不同執行緒,並暫停不同的執行上下文,而這項功能允許開發者在同一個Debugger面板,對Worker與其腳本進行除錯。

而為幫助開發者監控變數,DevTools提供了Logpoint功能,由於使用printf()除錯過程繁瑣,開發者需要不停地執行編輯、建置和刷新的迴圈,但是新提供的Logpoint功能,讓開發者只要在程式碼設置中斷點並加入日誌陳述,DevTool便會為執行中程式動態插入console.log() ,使得開發者不需要暫停或是編輯程式碼,就能在瀏覽器內監控變數。

同時,為了讓壓縮程式碼除錯起來更容易,新版DevTools結合原始碼地圖與Babel解析器,提供Debugger預覽原始變數的功能,並能自動隱藏來自編譯器與打包工具無關除錯的內容。Mozilla提到,由於這項功能會帶來一些效能的負擔,因此想要使用的開發者,需要自行在Debugger中的Scopes面板手動開啟。

原始碼地圖是這次DevTools的更新重點之一,Mozilla對原始碼地圖進行大幅度地改寫,提高整體執行效率,很明顯的是在應用程式暫停時,滑鼠游標停在變數上進行數值預覽的操作更加順暢,而且使用者不再只是對Babel、Webpack、TypeScript以及vue.js的編譯輸出進行操作,而是會有更加一致的除錯體驗。為了改善原始碼地圖,Mozilla從上游進行修補,因此也順帶貢獻了整個生態系。

除了上述功能之外,由於Mozilla刪除了DevTools許多耗費資源的計算,因此執行效能都獲得不少提升,且Debugger的開啟速度更快速,DevTools整體約獲得30%的加速。


Advertisement

更多 iThome相關內容