首頁  >  文章  >  開發工具  >  詳解vscode中如何更簡單、有效地調試Node.js程式! !

詳解vscode中如何更簡單、有效地調試Node.js程式! !

青灯夜游
青灯夜游轉載
2021-04-29 18:58:544376瀏覽

本篇文章跟大家介紹一下使用vscode偵錯Node.js的超簡單方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

詳解vscode中如何更簡單、有效地調試Node.js程式! !

推薦學習:《vscode教學》、《nodejs 教學

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

詳解vscode中如何更簡單、有效地調試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

詳解vscode中如何更簡單、有效地調試Node.js程式! !

好吧,讓我們來設定 VS Code 來偵錯 Node,開始設定它。

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

詳解vscode中如何更簡單、有效地調試Node.js程式! !

現在進入專案文件,然後透過點擊文件的左側邊欄,在你想要看到程式碼暫停的地方設定一些斷點。在終端內輸入 node --inspect <file name></file>。現在看,神奇的事情發生了...

詳解vscode中如何更簡單、有效地調試Node.js程式! !

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

如果你需要一個Node .js 專案來測試它,可以下載我的repo。它是用來測試使用 Node 傳輸大量資料的不同形式的,但是它在這個演示中非常好用。

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

詳解vscode中如何更簡單、有效地調試Node.js程式! !

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

至此,你可以在螢幕的左下角看到你設定的斷點(而且你可以透過複選框切換這些斷點的啟用狀態),而且,你可以像在瀏覽器中那樣去偵錯.在 IDE 的頂部中心有小小的繼續、步出、步入、重新運行等按鈕,從而逐步完成程式碼。 VS Code 甚至用黃色突出顯示了你已經停止的斷點和行,使其更容易被追蹤。

詳解vscode中如何更簡單、有效地調試Node.js程式! !

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

詳解vscode中如何更簡單、有效地調試Node.js程式! !

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

這很簡單,對吧?

總結

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

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

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

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

原文網址:https://itnext.io/the-absolute-easiest-way-to-debug-node-js-with-vscode-2e02ef5b1bad

原文作者: Paige Niedringhaus

譯文永久連結:https://github.com/xitu/gold-miner/blob/master/TODO1/the-absolute-easiest-way-to-debug-node-js-with- vscode.md

譯者:iceytea

更多程式相關知識,請造訪:程式設計影片! !

以上是詳解vscode中如何更簡單、有效地調試Node.js程式! !的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除