[譯] 使用 VS Code 除錯 Node.js 的超簡單方法

iceytea發表於2019-05-05
除錯Node.js

讓我們面對現實吧...除錯 Node.js 一直是我們心中的痛。

[譯] 使用 VS Code 除錯 Node.js 的超簡單方法

觸達除錯 Node.js 的痛點

如果你曾經有幸為 Node.js 專案編寫程式碼，那麼當我說除錯它以找到出錯的地方並不是最簡單的事情時，你就知道我在談論什麼。

不像瀏覽器中的 JavaScript，也不像有類似 IntelliJ 這樣強大的 IDE 的 Java，你無法到處設定斷點，重新整理頁面或者重啟編譯器，也無法慢慢審閱程式碼、檢查物件、評估函式、查詢變異或者遺漏的變數等。你無法那樣去做，這簡直太糟糕了。

但 Node.js 也是可以被除錯的，只是需要多費些體力。讓我們認真討論這些可選方法，我會展示給你在我開發經歷中遇到的最簡單除錯方法。

除錯 Node.js 的一些可選方法

有一些方式能除錯有問題的 Node.js 程式。我把這些方法（包含詳細連結）都列在了下面。如果你感興趣，可以去了解下。

  • Console.log() — 如果你曾經編寫過 JavaScript 程式碼，那麼這個可靠的備用程式真的不需要進一步解釋。它被內建在 Node.js 並在終端中列印，就像內建到 JavaScript，並在瀏覽器控制檯中列印一樣。

在 Java 語言下，它是 System.out.println()。在 Python 語言下，它是 print()。你明白我的意思了吧。這是最容易實現的方法，也是用額外的行資訊來“弄髒”乾淨程式碼的最快方法 —— 但它（有時）也可以幫助你發現和修復錯誤。

  • Node.js 文件 —-inspect — Node.js 文件撰寫者本身明白除錯不大簡單，所以他們做了一些方便的參考幫助人們開始除錯。

這很有用，但是老實說，除非你已經編寫了一段時間的程式，否則它並不是最容易破譯的。它們很快就進入了 UUIDs、WebSockets 和安全隱患的陷阱，我開始感到無所適從。我心裡想：一定有一種不那麼複雜的方法來做這件事。

  • Chrome DevTools — Paul Irish 在 2016 年撰寫了一篇有關使用 Chrome 開發者工具除錯 Node.js 的博文（並在 2018 年更新）。它看起來相當簡單，對於除錯來說是一個很大的進步。

半個小時之後，我仍然沒有成功地將 DevTools 視窗連線到我的簡單 Node 程式上，我不再那麼肯定了。也許我只是不能按照說明去做，但是 Chrome DevTools 似乎讓除錯變得比它應該的更復雜。

  • JetBrains — JetBrains 是我最喜歡的軟體開發公司之一，也是 IntelliJ 和 WebStorm 的開發商之一。他們的工具有一個奇妙的外掛生態系統，直到最近，他們還是我的首選 IDE。

有了這樣一個專業使用者基礎，就出現了許多有用的文章，比如這一篇，它們除錯 Node，但與 Node 文件和 Chrome DevTools 選項類似，這並不容易。你必須建立除錯配置，附加正在執行的程式，並在 WebStorm 準備就緒之前在首選項中進行大量配置。

  • Visual Studio Code — 這是我新的 Node 除錯黃金標準。我從來沒有想過我會這麼說，但是我完全投入到 VS Code 中，並且團隊所做的每一個新特性的釋出，都使我更加喜愛這個 IDE。

VS Code 做了其他所有選項在除錯 Node.js 都沒能做到的事情，這讓它變得傻瓜式簡單。如果你想讓你的除錯變得更高階，這當然也是可以的，但是他們把它分解得足夠簡單，任何人都可以快速上手並執行，不論你對 IDE、Node 和程式設計的熟練度如何。這太棒了。

配置 VS Code 來除錯 Node.js

[譯] 使用 VS Code 除錯 Node.js 的超簡單方法

好吧，讓我們來配置 VS Code 來除錯 Node。我假設你已經從這裡下載了 VS Code，開始配置它吧。

開啟 Preferences > Settings，在搜尋框中輸入 node debug。在 Extensions 選項卡下應該會有一個叫 Node debug 的擴充套件。在這裡點選第一個方框： Debug > Node: Auto Attach，然後設定下拉框的選項為 on。你現在幾乎已經配置完成了。是的，這相當的簡單。

這是當你點選 Settings 選項卡，你應該能看到的內容。設定第一個下拉框 **Debug > Node: Auto Attach** 選項為 `on`。

現在進入專案檔案，然後通過點選檔案的左側邊欄，在你想要看到程式碼暫停的地方設定一些斷點。在終端內輸入 node --inspect <FILE NAME>。現在看，神奇的事情發生了...

看到紅色斷點了嗎？看到終端中的 `node — inspect readFileStream.js` 了嗎？就像這樣。

VS Code 正在進行的程式碼除錯

如果你需要一個 Node.js 專案來測試它，可以在這裡下載我的 repo。它是用來測試使用 Node 傳輸大量資料的不同形式的，但是它在這個演示中非常好用。如果你想了解更多關於流資料節點和效能優化的內容，你可以點選這裡和這裡。

當你敲擊 Enter 鍵時，你的 VS Code 終端底部會變成橙色，表示你處於除錯模式，你的控制檯會列印一些類似於 Debugger Attached 的資訊。

橙色的工具欄和 `Debugger attached` 訊息會告訴你 VS Code 正常執行在除錯模式。

當你看到這一幕發生時，恭喜你，你已經讓 Node.js 執行在除錯模式下啦！

至此，你可以在螢幕的左下角看到你設定的斷點（而且你可以通過核取方塊切換這些斷點的啟用狀態），而且，你可以像在瀏覽器中那樣去除錯。在 IDE 的頂部中心有小小的繼續、步出、步入、重新執行等按鈕，從而逐步完成程式碼。VS Code 甚至用黃色突出顯示了你已經停止的斷點和行，使其更容易被跟蹤。

單擊頂部的繼續按鈕，從一個斷點跳轉到程式碼中的下一個斷點。

當你從一個斷點切換到另一個斷點時，你可以看到程式在 VS Code 底部的除錯控制檯中列印出一堆 console.log，黃色的高亮顯示也會隨之一起移動。

如你所見，當我們暫停在斷點上時，我們可以在 VS Code 的左上角看到可以在控制檯中探索到的所有區域性作用域資訊。

正如你所看到的，隨著程式的執行，除錯控制檯輸出的內容越多，斷點就越多，在此過程中，我可以使用 VS Code 左上角的工具在本地範圍內探索物件和函式，就像我可以在瀏覽器中探索範圍和物件一樣。不錯！

這很簡單，對吧？

總結

Node.js 的除錯不需要像過去那樣麻煩，也不需要在程式碼庫中包含 500 多個 console.log 來找出 bug 的位置。

Visual Studio Code 的 Debug > Node: Auto Attach 設定使之成為過去，我對此非常感激。

再過幾周，我將會寫一些關於端到端測試的文章，使用 Puppeteer 和 headless Chrome，或者使用 Nodemailer 在 MERN 應用程式中重置密碼，所以請關注我，以免錯過。

感謝閱讀，希望這篇文章能讓你瞭解如何在 VS Code 的幫助下更容易、更有效地除錯 Node.js 程式。非常感謝你給我的掌聲和對我文章的分享！

如果你喜歡閱讀這篇文章，你可能也會喜歡我的其他文章：

參考資料和進階資源：

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章