Firefox DevTools新增多項好用的JavaScript除錯功能

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％的加速。