搜尋
首頁開發工具VSCodevscode中如何斷點調試nodejs

vscode中如何斷點調試nodejs

May 14, 2021 am 11:24 AM
nodejsvscode斷點調試

vscode中如何斷點調試nodejs

在平時前端開發時,前端程式碼在瀏覽器上能很方便的斷點調試,那麼如果要調試node後端接口的話,該如何實現斷點調試呢?

配置

vscode開啟node專案點選左側偵錯按鈕

vscode中如何斷點調試nodejs

點擊Run and Debug

vscode中如何斷點調試nodejs

選擇語言為nodejs

vscode中如何斷點調試nodejs

#點選設定按鈕新增設定

vscode中如何斷點調試nodejs

【推薦學習:《vscode教程》】

更改lanuch.json設定檔

vscode中如何斷點調試nodejs

新增自己的專案啟動腳本文件和設定

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "env": {
                "NODE_ENV": "development"
            },
            "program": "${workspaceFolder}/bin/www"
        }
    ]
}
//program这个是我自己的node项目的启动文件

再次點選斷點偵錯按鈕啟動斷點偵錯

vscode中如何斷點調試nodejs

#直接點選啟動程式啟動斷點偵錯

vscode中如何斷點調試nodejs

直接在程式碼左側需要斷點的位置打個斷點標記,執行方法是會自動出發斷點

vscode中如何斷點調試nodejs

然後經過上面的調試按鈕一步步斷點

vscode中如何斷點調試nodejs

滑鼠懸浮還可以看到斷點的資料

vscode中如何斷點調試nodejs

##當然也可在debug console控制台輸出斷點資料的結果相當於瀏覽器斷點是的console控制台

vscode中如何斷點調試nodejs

#如果要結束斷點直接點擊上面的暫停鍵

vscode中如何斷點調試nodejs

以上就是整個vscode斷點配置和斷點偵錯的教學

更多程式相關知識,請造訪:

程式設計入門! !

以上是vscode中如何斷點調試nodejs的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:segmentfault。如有侵權,請聯絡admin@php.cn刪除
Visual Studio:其功能的綜合指南Visual Studio:其功能的綜合指南May 01, 2025 am 12:14 AM

VisualStudio提供了多種功能來提高開發效率。 1.界面與導航:通過菜單欄、工具欄等組件管理項目。 2.代碼編輯與智能感知:提供代碼補全和格式化工具。 3.調試與測試:支持斷點設置和變量監視。 4.版本控制:與Git等系統集成,方便團隊協作。

Visual Studio與代碼:安裝,設置和易用性Visual Studio與代碼:安裝,設置和易用性Apr 30, 2025 am 12:05 AM

VisualStudio和VSCode各有優劣,適合不同開發需求。 VisualStudio適合大型項目,提供豐富功能;VSCode則輕量、靈活,跨平台支持。

Visual Studio的目的:代碼編輯,調試等等Visual Studio的目的:代碼編輯,調試等等Apr 29, 2025 am 12:48 AM

VisualStudio是一款多功能的集成開發環境,支持多種編程語言和完整的開發流程。 1)代碼編輯:提供智能代碼補全和重構。 2)調試:內置強大調試工具,支持斷點和變量監視。 3)版本控制:集成Git和TFVC,方便團隊協作。 4)測試:支持多種測試類型,確保代碼質量。 5)部署:提供多種部署選項,支持從本地到雲端的部署需求。

Visual Studio vs.vs代碼:代碼編輯器的比較Visual Studio vs.vs代碼:代碼編輯器的比較Apr 28, 2025 am 12:15 AM

VisualStudio適合大型項目開發,VSCode則適用於輕量級和高度可定制的環境。 1.VisualStudio提供強大的智能感知和調試功能,適合大型項目和企業級開發。 2.VSCode通過擴展系統提供靈活性和自定義能力,適用於多種編程語言和跨平台開發。

Visual Studio的定價:了解訂閱模型Visual Studio的定價:了解訂閱模型Apr 27, 2025 am 12:15 AM

VisualStudio訂閱提供多種級別,適合不同開發者需求。 1.基礎版免費,適用於個人和小型團隊。 2.高級版如Professional和Enterprise,提供高級工具和團隊協作功能,適合企業用戶。

Visual Studio與代碼:性能和資源使用情況Visual Studio與代碼:性能和資源使用情況Apr 26, 2025 am 12:18 AM

VisualStudio和VSCode在性能和資源使用上的區別主要體現在:1.啟動速度:VSCode更快;2.內存佔用:VSCode更低;3.CPU使用率:VisualStudio在編譯和調試時更高。選擇時需根據項目需求和開發環境決定。

Visual Studio:C#,C等的IDEVisual Studio:C#,C等的IDEApr 25, 2025 am 12:10 AM

VisualStudio(VS)是微軟開發的一款功能強大的集成開發環境(IDE),支持多種編程語言,如C#、C 、Python等。 1)它提供了豐富的功能集,包括代碼編輯、調試、版本控制和測試。 2)VS通過強大的編輯器和調試器處理代碼,並使用Roslyn和Clang/MSVC編譯器平台支持高級代碼分析和重構。 3)基本用法如創建C#控制台應用程序,高級用法如實現多態性。 4)常見錯誤可通過設置斷點、查看輸出窗口和使用即時窗口調試。 5)性能優化建議包括使用異步編程、代碼重構和性能分析。

Visual Studio:代碼編譯,測試和部署Visual Studio:代碼編譯,測試和部署Apr 24, 2025 am 12:05 AM

在VisualStudio中,代碼編譯、測試和部署的步驟如下:1.編譯:使用VisualStudio的編譯器選項將源代碼轉化為可執行文件,支持多種語言如C#、C 和Python。 2.測試:利用內置的MSTest和NUnit等框架進行單元測試,提高代碼質量和可靠性。 3.部署:通過Web部署、Azure部署等方式,將應用程序從開發環境轉移到生產環境,確保安全性和性能。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)