譯者 | 晶顏

審校 | 重樓

全棧開發(fā)通常被比作一種復(fù)雜的平衡行為，開發(fā)人員需要兼顧前端、后端、數(shù)據(jù)庫等多個職責。隨著全棧開發(fā)的定義不斷發(fā)展，調(diào)試方法也在不斷發(fā)展。對于開發(fā)人員來說，全棧調(diào)試是一項必要的技能，但由于它涉及到通過應(yīng)用程序的多個層跟蹤問題，所以通常會觸及個人的知識盲區(qū)。在本文中，我的目標是探索全棧調(diào)試的細微差別，為開發(fā)人員在現(xiàn)代軟件開發(fā)的復(fù)雜網(wǎng)絡(luò)中導航提供實用的技巧和見解。

請注意，這是一篇介紹性的文章，主要關(guān)注前端調(diào)試方面。在后續(xù)文章中，我將深入探討全站調(diào)試的其他方面。

全棧開發(fā)：一個不斷變化的定義

全棧開發(fā)的定義和技術(shù)棧本身一樣多變。傳統(tǒng)上，全棧開發(fā)人員被定義為能夠在應(yīng)用程序的前端和后端工作的人員。然而，隨著行業(yè)的發(fā)展，這個定義已經(jīng)擴展到包括操作（OPS）和配置方面?，F(xiàn)代的全棧開發(fā)人員被賦予了更高的期待，他們提交的pull請求最好能夠涵蓋實現(xiàn)一個特性所需的所有部分——后端、數(shù)據(jù)庫、前端和配置。這就要求他們能夠在領(lǐng)域?qū)＜业闹笇略诟?/span>領(lǐng)域間自由導航。

全棧調(diào)試方法

正如全棧開發(fā)涉及跨不同領(lǐng)域的工作一樣，全棧調(diào)試也需要類似的方法。錯誤的癥狀可能出現(xiàn)在前端，但其根源可能深藏在后端或數(shù)據(jù)庫層。全棧調(diào)試就是通過各層跟蹤這些問題，并盡可能快地隔離它們。這不是一項簡單的任務(wù)，特別是在處理多個層以多種方式交互的復(fù)雜系統(tǒng)時。成功的全棧調(diào)試的關(guān)鍵在于了解如何通過堆棧的每一層跟蹤問題，并識別開發(fā)人員可能遇到的常見陷阱。

前端調(diào)試：工具和技術(shù)

并非“只是Console.log”

前端開發(fā)人員通常被定性為只依賴Console.log進行調(diào)試。雖然這種方法對于基本的調(diào)試任務(wù)是簡單有效的，但在處理現(xiàn)代Web開發(fā)的復(fù)雜挑戰(zhàn)時卻表現(xiàn)不足。前端代碼的復(fù)雜性顯著增加，這使得高級調(diào)試工具成為必要選項。然而，盡管市場上有許多強大的調(diào)試工具，一些開發(fā)人員仍然回避它們，固守舊習慣。

開發(fā)者工具的力量

現(xiàn)代Web瀏覽器配備了強大的開發(fā)者工具，這些工具提供了廣泛的調(diào)試前端問題的功能。這些工具可以在Chrome和Firefox等瀏覽器中使用，允許開發(fā)人員檢查元素，查看和編輯HTML和CSS，監(jiān)控網(wǎng)絡(luò)活動等等。這些工具中最強大但尚未得到充分利用的特性之一就是JavaScript調(diào)試器。

該調(diào)試器允許開發(fā)人員設(shè)置斷點，逐步執(zhí)行代碼，并在執(zhí)行過程的不同點檢查變量的狀態(tài)。然而，前端代碼的復(fù)雜性，特別是由于性能原因?qū)ζ溥M行混淆時，可能會使調(diào)試成為一項具有挑戰(zhàn)性的任務(wù)。

我們可以使用以下菜單在Firefox上啟動瀏覽器工具：

在Chrome上，我們可以使用這個選項：

就我個人而言，更喜歡使用Firefox，因為它們的開發(fā)工具更方便，但兩種瀏覽器都有類似的功能。兩者都有很棒的調(diào)試器（正如你可以在下面的Firefox調(diào)試器中看到的那樣）；不幸的是，許多開發(fā)人員并沒有投入精力來探索這個強大的工具。

處理代碼混淆

代碼混淆是前端開發(fā)中的一種常見做法，用于保護專有代碼并減少文件大小以獲得更好的性能。然而，混淆也使代碼難以閱讀和調(diào)試。幸運的是，Chrome和Firefox開發(fā)工具都提供了去混淆代碼的功能，使其更易于閱讀和調(diào)試。通過單擊工具欄中的大括號按鈕，開發(fā)人員可以將一行混淆的代碼轉(zhuǎn)換為格式良好、可調(diào)試的文件。

另一個對抗混淆的重要工具是源映射。源映射是將混淆代碼映射回其原始源代碼（包括注釋）的文件。生成并正確配置后，源代碼映射允許開發(fā)人員調(diào)試原始代碼，而不是經(jīng)過混淆的版本。在Chrome中，此功能可以通過確保在開發(fā)人員工具設(shè)置中勾選“啟用JavaScript源映射”來啟用。

你可以在JavaScript文件中使用下述代碼來指向sourcemap文件：

//@sourceMappingURL=myfile.js.map

為了在Chrome中運行，我們需要確保在設(shè)置中勾選“啟用JavaScript源映射”。雖然有時它是默認開啟的，但驗證一下也無妨：

跨層調(diào)試

跨堆棧隔離問題

在全棧開發(fā)中，問題通常出現(xiàn)在一個層，但根源卻在另一層。例如，前端錯誤可能是由配置錯誤的后端服務(wù)或返回意外結(jié)果的數(shù)據(jù)庫查詢引起的。隔離這些問題的根本原因需要一種有條不紊的方法，從癥狀開始，然后逐層向后工作。

一種常見的策略是在受控環(huán)境中模擬問題，例如本地開發(fā)設(shè)置，其中可以單獨測試堆棧的每個層。這有助于縮小問題的潛在根源。一旦問題被隔離到特定層，開發(fā)人員就可以使用適當?shù)墓ぞ吆图夹g(shù)來診斷和解決問題。

系統(tǒng)級調(diào)試的重要性

全棧調(diào)試并不局限于應(yīng)用程序代碼。通常，問題是由周圍環(huán)境引起的，例如網(wǎng)絡(luò)配置、第三方服務(wù)或硬件限制。舉個例子，幾年前我們遇到了WebSocket連接經(jīng)常斷開而影響生產(chǎn)的問題。經(jīng)過大量的調(diào)試，我們發(fā)現(xiàn)這個問題是由CDN提供商（CloudFlare）引起的——這個問題只能通過調(diào)試整個系統(tǒng)來確定，而不僅僅是調(diào)試應(yīng)用程序代碼。

系統(tǒng)級調(diào)試需要對基礎(chǔ)設(shè)施的不同組件如何相互作用有廣泛的了解。它還涉及到使用可以監(jiān)視和分析整個系統(tǒng)行為的工具，例如網(wǎng)絡(luò)分析器、日志記錄框架和性能監(jiān)視工具。

擁抱復(fù)雜性

全棧調(diào)試本質(zhì)上是復(fù)雜的，因為它要求開發(fā)人員瀏覽應(yīng)用程序的多個層，且經(jīng)常處理不熟悉的技術(shù)和工具。然而，這種復(fù)雜性也提供了增長的機會。通過接受全棧調(diào)試的挑戰(zhàn)，開發(fā)人員可以擴展他們的知識，并在他們的角色中變得更加全能。

全棧開發(fā)的關(guān)鍵優(yōu)勢之一是能夠與領(lǐng)域?qū)＜覅f(xié)作。在調(diào)試跨越多個層的問題時，利用專門研究特定領(lǐng)域的同事的專業(yè)知識是很重要的。這種協(xié)作方法不僅有助于更有效地解決問題，而且還在團隊中培養(yǎng)了一種知識共享和持續(xù)學習的文化。

隨著工具的不斷發(fā)展，可用于調(diào)試的工具和技術(shù)也在不斷發(fā)展。開發(fā)人員應(yīng)該努力跟上調(diào)試工具和最佳實踐的最新進展。無論是學習使用瀏覽器開發(fā)工具中的新特性，還是掌握系統(tǒng)級調(diào)試技術(shù)，持續(xù)學習對于全棧開發(fā)的成功至關(guān)重要。

結(jié)語

全棧調(diào)試是現(xiàn)代開發(fā)人員的一項關(guān)鍵技能，我們錯誤地認為它需要對應(yīng)用程序及其周圍環(huán)境都有深入的了解。事實上，通過掌握本文/后續(xù)文章中討論的工具和技術(shù)，開發(fā)人員可以更有效地診斷和解決跨越多個堆棧層的問題。無論你是在處理混淆的前端代碼、配置錯誤的后端服務(wù)還是系統(tǒng)級問題，成功調(diào)試的關(guān)鍵在于有條理的協(xié)作方法。

你不需要了解系統(tǒng)的每個部分，只需要具備排除不可能的能力。

原文標題：The Art of Full Stack Debugging，作者：Shai Almog