VSCode Node.js 調試配置 (npm 腳本啟動)
相當于直接使用 node 命令,用 npm run script 腳本 來啟動 Node.js 程序是更為常見的場景,比如當目標是運行一個應用。
假設項目的 package.json 有一個用來調試的 debug 腳本:
我們要怎么啟動項目的跟蹤調試呢?
文檔指路 ➡️ 【Node.js 調試入門】 、 【VSCode 中的 Node.js 調試】 、 【Launch 對 npm 及其他工具的配置支持】
VS Code 支持兩種核心調試模式 Launch 和 Attach ,Launch 方式是直接以 debug 模式啟動應用,并為我們自動添加一個調試器;而 Attach 方式則是將 VSCode 調試器連接到已經運行中的應用程序或進程。我們這里用的是 Launch 方式。
在終端運行:
或點擊VSCode 的小甲蟲圖標:
上面藍色位置圈錯了,應該是第一個 Node.js。
VSCode 十分智能,預設了很多針對不同需求的啟動配置:
讓我們來做進一步的修改:
之前那個啟動配置項可以刪除,留下這個需要的即可。
我們將 console 屬性 設置為外部終端,我們啟動調試時 VScode 就會自動打開下圖中對應的終端(根據操作系統)。可以根據個人使用習慣,自定義用什么終端 (比如我在 VSCode 設置的 Terminal › External: Osx Exec,從默認的改為了 iTerm2)。
別忘了先把我們的腳本加上端口
NodeJs VSCode 斷點調試
1.首先 你已經有一個.js 文件了,例如我的demo12.js
2.在工作區內打一些斷點,如無異常的話應該是實心紅點
3.點擊 運行和調試 按鈕
4.點擊小齒輪按鈕,修改配置文件
5.右鍵剛才那個js文件,復制出其相對路徑,放在配置文件${workplaceFolder} 的后面
6.點擊開始按鈕,進行調試
運行成功后,程序會定位到打斷點的地方,并且,調試控制臺可以看到輸入結果,上面的一排按鈕與其他調試工具類似,不贅述了
在實際開發當中,可以配置多分launch.json文件,以應對不同項目的調試
修改name值用于區分,并且,要修改program ,將對應項目的入口文件配置在這里即可
如何在SubLime里用 Node.js 調試 JavaScript 程序
1. 首先到 nodejs.org 下載 Node.js 安裝包并安裝。
2. 打開 Sublime Text 2 編輯器。選擇菜單 Tools --> Build System --> new Build System...
3. 將文件保存為 JavaScript.sublime-build
4. 文件內容為:
{
"cmd": ["node", "$file"],
"file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
"lector": "source.javascript"
}
5. 重新啟動 Sublime Text 2. 勾選菜單 Tools --> Build Syst
[Node] 如何使用 VSCode 調試 child_process
使用 VSCode 調試 Node.js 的時候,
遇到 child_process 中的斷點,是跟不進去的。
(1)目錄結構
打開 VSCode,并以 main 作為根目錄,
(2)app.js
(3)child/process.js
(4).vscode/launch.json
main 項目中按 F5 ,程序會停在 app.js 中的斷點處,單步調試,
然后,調試進程就結束了。并不會跑到第 6 行的斷點處,
child/process.js 中的斷點,也跑不進去,
以上示例中,我們發現 VSCode 無法調試到 child_process 中。
也不確定 VSCode 未來是否會支持。
當前我們可以通過 Debug 的 Attach 方式,對 child_process 進行調試。
我們需要另一個 VSCode 實例來 Attach,兩個 VSCode 一起使用。
main 項目的 .vscode/launch.json 啟動 main/app.js
attach 項目的 .vscode/launch.json attach 到 child_process
目錄結構分別如下,
為了能 attach 成功,我們需要同步修改 main/app.js 與 attach/.vscode/launch.json,
調試端口號可以任選,不一定的 9001 ,但應保持一致。
(1)main/app.js
(2)attach/.vscode/launch.json
(1)啟動 main 項目
(2)debug attach 項目
attach 項目中按 F5 ,VSCode 會 attach 到已經啟動的子進程上,
(1)main 項目,按 F5 啟動調試
main 項目單步調試,
這時子進程已經啟動了,切換到 attach 項目啟動調試。
(2)attach 項目,按 F5 啟動調試
attach 項目單步調試,
(3)main 項目 child.nd
main 項目單步調試,斷點直接跑到了 attach 項目中,
attach 項目單步調試,斷點又回到 main 項目,
Debugging in Visual Studio Code
如何使用DevTools調試Nodejs運行的Javascript
目前,常用的瀏覽器IE、Chrome、Firefox都有相應的腳本調試功能。我們先來看IE的:
1、在F12開發人員工具中進行調試
打開IE瀏覽器,按下F12鍵,就會打開開發人員工具,這是IE內置的開發人員開發工具,方便開發人員對HTML、CSS、Javascript等網頁資源進行跟蹤調試使用的。
如果你打開的時候沒有固定在網頁底部,可以點擊右上角菜單欄中的按鈕來完成。
我們看到在這個工具窗口里面有幾個標簽頁,分別是:HTML、CSS、控制臺、腳本、探查器和網絡,點開每一個標簽,可以執行相應的任務。
在HTML標簽窗口中,工具欄中的按鈕所執行的操作如下圖:
CSS標簽是用來查看樣式的;控制臺顯示網頁中JS的各種輸出信息,包括錯誤信息、用戶日志等;打開腳本標簽頁,這里面才是我們想要的內容。
我在圖中用黃色矩形選中連個控件,左側的下拉列表用來選擇文件,右側的按鈕用來啟動調試。當點擊啟動調試后,調試程序會將窗口最大化,我們在選中的文件中找到需要調試的位置,點擊左側邊欄添加斷點即可進行調試。
當有程序運行到我們的斷點處時,就可以進行調試了:
在這里,我們可以使用快捷鍵進行操作,常用的快捷鍵如下:
F9:添加/移除 斷點
F10:逐過程,即跳過該語句中的方法、表達式等
F11:逐語句調試,即單步調試,會跳入方法、表達式,進行逐語句的跟蹤調試
在執行過程中,如果我們要執行即時的代碼,我們就需要在右側的窗格中輸入代碼,按回車即可:
如果要執行多行代碼,點擊運行按鈕右側的雙箭頭,就會打開多行模式。我就不再截圖片了。
這種直接在瀏覽器中調試的方法同樣適用于Google瀏覽器Chrome和FireFox FireDebug,只不過在細枝末葉上面有些不同罷了,主體的功能都是一樣的。
按F12鍵進入開發者工具,可以查看源代碼、樣式和js:
點擊Scripts按鈕,可以打開這個調試窗口,里面包含了網頁中腳本文件源碼,點擊左側的按鈕可以打開選擇文件的側窗口。
2、使用debugger關鍵字進行調試
這種方法很簡單,我們只需要在進行調試的地方加入debugger關鍵字,然后當瀏覽器運行到這個關鍵字的時候,就會中斷:
設置以后就可以使用debugger關鍵字進行調試了;進過這樣的設置,我們還可以捕獲到意外的錯誤,進行跟蹤調試。
node.js(express)在vscode中打斷點
首先點擊vscode菜單欄的運行 > 打開配置,進行配置斷點啟動內容
{
"type": "node",
"request": "launch",
"name": "node debugger",
"program": "${workspaceFolder}/bin/www"
}
然后運行調試即可
如果這個項目已經通過node start 或者其他配置啟動了項目,用調試的啟動項目是啟動不了的,端口已經被占用。所以應該直接點擊啟動調試