一、建立配置文件
1、選擇你的項目
2、選擇你項目的語言
3、當前項目路徑下生成 .vscode/launch.json
{ ????//?Use?IntelliSense?to?learn?about?possible?attributes. ????//?Hover?to?view?descriptions?of?existing?attributes. ????//?For?more?information,?visit:?https://go.microsoft.com/fwlink/?linkid=830387 ????"version":?"0.2.0", ????"configurations":?[ ????????{ ????????????"type":?"node", ????????????"request":?"launch", ????????????"name":?"Launch?Program", ????????????"program":?"${workspaceFolder}/test.js" ????????} ????] }
type – 用于此啟動配置的調試器類型。每個安裝的調試擴展都會引入一種類型,例如,node 內置節點調試器,php 以及 goPHP 和 Go 擴展。
request – 此啟動配置的請求類型。目前支持的是 launch 和 attach。( request 的詳解見下面的第三章)
name – 友好名稱,顯示在“調試啟動配置”下拉列表中。
program – 啟動調試器時要運行的可執行文件或文件。
args – 傳遞給程序進行調試的參數。
env- 環境變量(該值 null 可用于“取消定義”變量)。
cwd – 當前工作目錄,用于查找依賴項和其他文件。
注1:${workspaceFolder} 表示工作空間文件夾的根路徑,${file} 表示活動編輯器中打開的文件。
注2:“program”: “${workspaceFolder}/test.js”,我不太清楚 vscode 是怎么識別我想要調試當前目錄下的 /test.js。[待解決]
注3:還可以把配置文件寫進 User Settings 成為全局配置。
4、快速回到你的配置文件
二、打斷點
1、Breakpoint (傳統斷點)
(1)圖形用圓形代替;
(2)不可以打在空行上。
2、Logpoint
(1)可以在 debug console 里打印出信息(用 {} 包裹表達式);
(2)圖形用菱形代替;
(3)如果不打在語句上,而是空行,則調試執行的時候,會消失,但不影響效果。所以還是推薦打在語句上!
3、Conditional Breakpoint
分兩種條件:表達式 / 命中數
(1)可以在符合條件時中斷到離此斷點下方最近的一條語句上;
(2)圖形用正方形代替;
(3)如果不打在語句上,而是空行,則調試執行的時候,會消失,但不影響效果。
三、調試
第一章提到的 launch.json 配置文件里有 request 字段,取值范圍為:launch 和 attach
launch:vscod e獨立自主的跑起一個調試進程
attach:你通過 node –inspect-brk xxx.js 自行啟動調試,然后 vscode 再去 attach 它
下面就分這兩類來說說具體調試方式的區別:
1、launch 方式
(1)點擊 Launch Program
(2)選擇啟動哪個配置文件
注:launch.json 配置文件中 name 屬性的值會顯示在這個下拉列表中。
(3)開始調試
2、attach 方式
(1)把 Auto Attach:On 打開
(2)以調試的方式啟動 node
node?--inspect-brk?test.js
(3)開始調試
四、調試相關功能
1、DEBUG CONSOLE
可以在此操作變量
五、多目標調試
需求:同時調試 server.js 和 client.js
1、建立配置文件
{ ????"version":?"0.2.0", ????"configurations":?[ ????????{ ????????????"type":?"node", ????????????"request":?"launch", ????????????"name":?"Server", ????????????"program":?"${workspaceFolder}/server.js", ????????????"cwd":?"${workspaceFolder}" ????????}, ????????{ ????????????"type":?"node", ????????????"request":?"launch", ????????????"name":?"Client", ????????????"program":?"${workspaceFolder}/client.js", ????????????"cwd":?"${workspaceFolder}" ????????} ????], ????"compounds":?[ ????????{ ????????????"name":?"Server/Client", ????????????"configurations":?["Server",?"Client"] ????????} ????] }
2、開始調試
注1:調試的時候,可以同時運行程序。注2:當修改代碼,同時運行的程序會立即生效,而調試的代碼還是老的。
PHP中文網,有大量免費的vscode入門教程,歡迎大家學習!