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

• 原文地址：The Absolute Easiest Way to Debug Node.js — with VSCode
• 原文做者：Paige Niedringhaus
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：iceytea
• 校對者：fireairforce, cyz980908

讓咱們面對現實吧...調試 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。我假設你已經從這裏下載了 VS Code，開始配置它吧。

打開 Preferences > Settings，在搜索框中輸入 node debug。在 Extensions 選項卡下應該會有一個叫 Node debug 的擴展。在這裏點擊第一個方框： Debug > Node: Auto Attach，而後設置下拉框的選項爲 on。你如今幾乎已經配置完成了。是的，這至關的簡單。

如今進入項目文件，而後經過點擊文件的左側邊欄，在你想要看到代碼暫停的地方設置一些斷點。在終端內輸入 node --inspect <FILE NAME>。如今看，神奇的事情發生了...

VS Code 正在進行的代碼調試

若是你須要一個 Node.js 項目來測試它，能夠在這裏下載個人 repo。它是用來測試使用 Node 傳輸大量數據的不一樣形式的，可是它在這個演示中很是好用。若是你想了解更多關於流數據節點和性能優化的內容，你能夠點擊這裏和這裏。

當你敲擊 Enter 鍵時，你的 VS Code 終端底部會變成橙色，表示你處於調試模式，你的控制檯會打印一些相似於 Debugger Attached 的信息。

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

至此，你能夠在屏幕的左下角看到你設置的斷點（並且你能夠經過複選框切換這些斷點的啓用狀態），並且，你能夠像在瀏覽器中那樣去調試。在 IDE 的頂部中心有小小的繼續、步出、步入、從新運行等按鈕，從而逐步完成代碼。VS Code 甚至用黃色突出顯示了你已經中止的斷點和行，使其更容易被跟蹤。

當你從一個斷點切換到另外一個斷點時，你能夠看到程序在 VS Code 底部的調試控制檯中打印出一堆 console.log，黃色的高亮顯示也會隨之一塊兒移動。

正如你所看到的，隨着程序的運行，調試控制檯輸出的內容越多，斷點就越多，在此過程當中，我可使用 VS Code 左上角的工具在本地範圍內探索對象和函數，就像我能夠在瀏覽器中探索範圍和對象同樣。不錯！

這很簡單，對吧？

總結

Node.js 的調試不須要像過去那樣麻煩，也不須要在代碼庫中包含 500 多個 console.log 來找出 bug 的位置。

Visual Studio Code 的 Debug > Node: Auto Attach 設置使之成爲過去，我對此很是感激。

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

感謝閱讀，但願這篇文章能讓你瞭解如何在 VS Code 的幫助下更容易、更有效地調試 Node.js 程序。很是感謝你給個人掌聲和對我文章的分享！

若是你喜歡閱讀這篇文章，你可能也會喜歡個人其餘文章：

• 使用 Node.js 讀取超大數據集和文件（第一部分）
• Sequelize: Node.js SQL ORM 框架
• 流的勝利：用於讀取大型數據集的 Node.js 方法的性能比較（第二部分）

---

參考資料和進階資源：

• Github, Node 讀取文件 Repo：github.com/paigen11/fi…
• Node.js 文檔 — 調試部分：nodejs.org/en/docs/gui…
• Paul Irish’s：使用 Chrome DevTools 調試 Node.js：medium.com/@paul_irish…
• JetBrains 提供的文檔 — 《運行和調試 Node.js》 — www.jetbrains.com/help/websto…
• Visual Studio Code 下載連接：code.visualstudio.com/download
• VS Code 調試 Node.js 文檔：code.visualstudio.com/docs/nodejs…

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

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