JavaScript 開發大師 Remy Sharp 談調試的藝術

繼2012年的經典演講《Mobile Debugging》之后，JavaScript開發大師Remy Sharp近日又在Fronteers 2015上發表了題為《The Art of Debugging》的演講。隨后，Remy在博客中對調試的藝術進行了詳細描述。接下來，本文就走近大師，聆聽其對調試的心得。

在開篇，Remy就提到，程序開發人員總是免不了編寫bug。那么，調試就是一項必須要掌握的技能。Remy認為，調試是不存在捷徑的，開發人員需要時間和經驗的積累才能提升相關能力。10年前，當Remy還是個新人的時候，他曾遇到一個CSS大牛——Chris。每當Remy遇到問題時，Chris總能一針見血的指出問題所在。其原因就是Chris已經積累了足夠的經驗，對代碼和可能遇到的問題有了清楚的認識。

另外一方面，調試其實也是很好的工作機會。Remy提到，當10年前在一家公司工作的時候，老員工總是會給新人炫耀程序員工作的成果和他們正在解決的問題。然后，新員工實習期的主要工作就是負責調試代碼。這看起來非常艱難的工作，其實是對新人而言一個非常好的鍛煉機會。程序編寫人員可能已經花費了3 個月、6個月甚至一年的時間在代碼上。調試人員則可以根據工作需要迅速了解這些代碼的方方面面，并因為解決若干個bug而享受項目成功所帶來的榮耀。因此，調試雖然艱難，卻最能給開發人員最好的精神和物質回報。

在進一步介紹調試藝術之前，Remy提出了兩條免責聲明。第一條，文中所提及的框架和工具不一定對任何人和任何項目都適用。Remy更多的希望讀者能夠關注文章所表達的一些思路和想法。第二條，Remy很少進行跨瀏覽器測試。他認為，如果代碼存在bug，在任何瀏覽器中訪問都應該存在問題；反之，就不應該存在問題。

Remy將調試劃分了三個步驟——復制、隔離和消除。復制主要完成問題的重現工作，是調試中最困難的部分。問題重現不僅要保存現場，還需要收集盡可能多的相關信息。Remy建議，復制要一步步的進行。一般情況下，bug都是由一系列事件造成。調試人員需要理解這些事件，并在以后重現這些事件以進行調試中的分析。Remy介紹了兩個幫助復制環境的工具——匿名模式（incognito）和多賬戶（multiple profiles）。匿名模式可以很好的避免擴展、緩存和離線存儲等引起的問題。Remy表示，他每年都會遇到擴展應用引起的古怪問題。而匿名模式可以幫助盡快確認問題是否與擴展有關。多賬戶包括了日常賬戶、匿名賬戶和Troll賬戶。Troll賬戶主要用于發現高安全級別引起的問題。

隔離主要負責縮小并鎖定可疑代碼的范圍。如果是擴展引起的問題，調試人員最好一個一個的使能以最終鎖定目標。一旦范圍鎖定到足夠小，就可以開始消除 bug的工作了。在走完上述兩個步驟后，消除bug就變得容易很多。調試人員只需要針對問題，修改代碼即可。真正麻煩的是，復制操作有時候很難完成——例如，Heisenbug的情況。 Remy表示，他曾經遇到過只在CI系統中出現的bug。盡管Remy已經對代碼非常熟悉，并且非常確定問題已經在本地環境中得以修復，CI系統的測試仍然無法通過。Remy建議，這時候就需要對測試環境進行調試。另外一種情況是，調試人員使用的調試工具可能會引起bug。Remy曾經使用的 Firebug就引起過這樣的問題。因此，進行帶開發工具時間線的調試時，程序員最好關閉部分錄制選項、所有的其他標簽和可能使用WebKit的東西。

在調試方法方面，Remy將其分為Inside out和Outside in兩類。前者是指bug的原因已經確定。這種情況下，調試人員只需要添加一個函數、幾行代碼或者設置相應斷點即可。而后者是指調試人員只看到了問題的表相，并不清楚問題的根源。針對這種情況，調試人員可以使用DOM斷點、Ajax斷點、重新運行XHR請求和時間線截屏。

最后，Remy分享了他部分他所使用的工作流和最常用的工具。在工作區和實時更新方面，Remy會直接把本地目錄拖拽到工具區中，并選擇至少一個文件映射到文件系統資源中。這樣，任何在源面板中的修改都會直接保存到磁盤中。如果CSS文件也同樣被映射，任何元素面板中對風格的改變都會更新相應的 CSS文件。在元素面板的撤銷操作方面，Remy推薦源控制和撤銷。而，Chrome的開發工具很好的支持了撤銷操作。在控制臺快捷方式方面，Remy使用$_來表示最后一個表達式的結果、$0表示當前元素面板中選中的DOM節點、copy(...)完成拷貝到粘貼板的操作等。

此外，Remy使用時間線截圖來修復兩類問題。第一個問題是字體加載是否正確、是否占用太長時間。時間線截圖可以很好的反映該問題。第二個與標簽系統加載延遲太慢相關。利用“camera”按鈕中的截圖可以很好的記錄渲染時間線，從而反映該問題。網絡節流也是很好研究網絡慢或者離線所造成影響的有效手段。而檢查網絡報文頭和拷貝原始的反饋也非常有用。在調試、修復和重啟服務器后，調試人員利用“Replay XHR”即可重新運行請求，測試服務器反饋是否已經調整。“Break on DOM changes”是Remy調試方法outside in中的一種。針對只知道問題表象的情況，該方法非常有用。

針對內存泄漏這類常見的問題，Remy推薦兩種方法：階梯形表面測試和利用分析工具來抓取泄露源的線索。階梯效應是判斷是否存在內存泄漏的第一條線索。Remy通常會首先建立一個參考的內存使用情況，然后運行一個會話后使用垃圾回收，查看是否內存會增加。如果存在內存泄漏，就可以繼續進行下一步分析了。分析需要在會話開始和結束時分別抓取HeapDump。然后，通過比較兩個HeapDump之間的delta值，內存中標紅的條目即是無法進行垃圾回收的條目。調試人員針對這些條目進行進一步分析就可找到問題的根源。

在博客最后，Remy再次強調，調試技巧是需要長期積累的，希望讀者可以抓住每次調試的機會多多學習。而且，Remy提醒讀者在調試時多多休息。很多bug就是在走路和洗澡的時候想到解決方案的。