首頁  >  文章  >  開發工具  >  聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境

聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境

青灯夜游
青灯夜游轉載
2023-04-18 17:22:394099瀏覽

VSCode中怎麼配置偵錯環境?以下這篇文章跟大家介紹VSCode配置JavaScript基於Node.js調試環境的方法,希望對大家有幫助!

聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境

一、安裝VSCode和Node.js

       前言:做科研之後確實很少會總結積累,可能是科學研究中出現的問題的解決方法比較多元靈活,別說了其實就是偷懶哈哈哈哈哈。這不又要做前端才又開始寫部落格記錄環境配置了。行了不說廢話了趕緊開始正文。

       再囉嗦一句,本文配置的環境主要針對單獨JS檔案的斷點除錯,主要是為了調試LeetCode裡面的程式碼。

本人環境:

  • Visual Studio Code 1.66.0
  • Node.js 16.14.2
  • Windows10 64位元

         VScode的下載不多說了,主要記錄Node的安裝(其實以前安裝過好多遍)。 【推薦學習:vscode教學程式設計教學

  1. #先去官網下載對應的版本:https://nodejs.org/ en/
    聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境
  2. 開始安裝,可以自訂選擇安裝路徑。
    聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境
  3. 這裡選擇Add Path,系統變數會自動設置,但使用者變數並沒有自動設置,需要的話可以自己手動加一下。
    聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境
  4. 測試是否安裝成功,在命令列輸入node -vnpm -v,如果能顯示版本號說明安裝成功,且已經有了正確的環境變數。
    聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境
           使用者變數嘛最好也手動自行加入一個比較穩健,因為我之前沒有加,有時候在VSCode中會出現node.js找不到路徑的情況,雖然重啟會解決問題,但是彈了兩次我總覺得還有些不對勁,所以就還是加了一下,大家在安裝的時候最好提前加一下。
    聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境
  5. 到這裡,Node.js安裝完成

#二、VSCode配置

  1. 先在VSCode裡面安裝兩個插件,一個是負責運行的Code Runner,一個是JS的語法提示JavaScript(ES6) code snippets
    聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境
  2. 建立設定文件,打開你的程式碼資料夾,先隨便建立一個test.js,隨便寫幾句測試程式碼。然後點選左邊側邊欄的偵錯工具,選擇建立launch.json檔案。
    聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境
  3. 選擇node.js調試環境,測試程式碼也可以用圖中的。
    聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境
  4. 此時設定檔會自動生成,注意重點要修改一個地方,這裡不要寫死。將program屬性改成${file},這樣可以辨識目前偵錯的文件,不需要每次都在這裡更換文件名,調試哪個文件直接F5就OK。
    聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境
  5. 到這裡,其實就配置好了,此時的檔案結構是這樣的,可以直接在test.js檔案打上斷點,按F5進行調試
    聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境
    聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境

三、可能出現的問題

        若設定完成之後啟動除錯VSCode錯誤:無法在Path上找到可運行的Node時,重啟VSCode再進行偵錯就沒問題了。

        一點小感動:為了今年的秋招工作,前端的學習之路又開始了。工欲善其事,必先利其器,所以又要開始寫配置環境的博客,不出所料的話下一篇要在VSCode裡面配置Vue。以前在實習的時候寫了一篇banlakeji的也不太好,現在又重新走了一遍搞個完整的。既然選擇做技術了就得踏實的做下去,不能愛一行幹一行就得乾一行盡量愛一行,衝!

更多關於VSCode的相關知識,請造訪:vscode基礎教學

以上是聊聊在VSCode怎麼配置JS基於Node.js的偵錯環境的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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