譯者 | 晶顏

審校 | 重樓

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

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

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

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

全棧調(diào)試方法

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

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

并非“只是Console.log”

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

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

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

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

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

在Chrome上，我們可以使用這個(gè)選項(xiàng)：

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

處理代碼混淆

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

另一個(gè)對(duì)抗混淆的重要工具是源映射。源映射是將混淆代碼映射回其原始源代碼（包括注釋?zhuān)┑奈募Ｉ刹⒄_配置后，源代碼映射允許開(kāi)發(fā)人員調(diào)試原始代碼，而不是經(jīng)過(guò)混淆的版本。在Chrome中，此功能可以通過(guò)確保在開(kāi)發(fā)人員工具設(shè)置中勾選“啟用JavaScript源映射”來(lái)啟用。

你可以在JavaScript文件中使用下述代碼來(lái)指向sourcemap文件：

//@sourceMappingURL=myfile.js.map

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

跨層調(diào)試

跨堆棧隔離問(wèn)題

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

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

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

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

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

擁抱復(fù)雜性

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

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

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

結(jié)語(yǔ)

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

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

原文標(biāo)題：The Art of Full Stack Debugging，作者：Shai Almog