vscode調試nodejs打斷點,vscode斷點調試vue

本文目錄一覽：

• 1、nodejs掛在windows IIS運行的，VScode怎麼可以附加調試的？
• 2、如何在vscode中使用nodejs
• 3、[Node] 如何使用 VSCode 調試 child_process
• 4、VSCode + make + makefile + c++ 斷點調試
• 5、VSCode調試egg.js項目
• 6、如何調試nodejs

nodejs掛在windows IIS運行的，VScode怎麼可以附加調試的？

Step 1： 點擊Debug按鈕，調出launch.json文件，更改program的路徑為目標js文件。

生成的luanch.json文件在.vscode文件下

step2:接下來就可以加斷點調試了

如何在vscode中使用nodejs

一、使用Express創建項目[這兩步都在dos 模式下執行]

1,安裝全局的Express！(已安裝請忽略)

npm install -g express

2,創建項目

創建項目（創建文件夾名稱ExpressApp）

express ExpressApp

小插曲：如果你習慣了Linux下的環境，你可以在自己電腦上安裝cmder(不知道是什麼東西，請自行百度),這個命令行工具排版漂亮，不像微軟的dos 那麼枯燥!我用的是Mini版本，如果你想體驗linux下的全部功能，可以下載full版本。

3，下載第三方包

（1）cmd命令行切換到項目目錄

cd d:\nodejs\ExpressApp

（2）根據需要編輯package.json，運行如下指令安裝第三方包

npm install

在項目目錄下node_modules可見安裝好的第三方包

ExpressApp

|– node_modules

（3）運行項目

npm start

輸出如下：

ExpressApp@0.0.0 start d:\Nodejs_Workspace\ExpressApp

node ./bin/www

註：npm start指令會自動執行node ./bin/www

在瀏覽器中輸入，可訪問Express歡迎頁面

二、使用VSCode開發Nodejs

1、VSCode打開Nodejs

code d:\nodejs\ExpressAppcode.

註：在當前項目下創建ExpressApp.bat，輸入“code .”即可，下次直接此文件直接使用VSCode打開Nodejs項目

2、添加智能提示

VSCode打開Nodejs項目，默認是沒有智能提示。

（1）使用TypeScript Definition Manager(TSD)在項目中下載所需的tsd文件，VSCode中打開時有智能

全局安裝tsd（如已安裝忽略）

npm install -g tsd

下載所需的組件提示（以下載node、express、requirejs提示為例）

tsd query node –action installtsd query express –action installtsd install require

註：

①多個提示組件在query參數後可以空格分隔簡寫為tsd query node express –action install

②組件會項目目錄下添加typings文件夾

|– typings

|– node

|– express

|– require

（2）添加js文件引用的智能提示

假如在文件引用另外一個文件common.js時，文件頭添加如下

{ // See // for the documentation about the jsconfig.json format “compilerOptions”: { “target”: “es6”, “module”: “commonjs”, “allowSyntheticDefaultImports”: true }, “exclude”: [ “node_modules”, “bower_components”, “jspm_packages”, “tmp”, “temp” ]}

（小提示，如果你引入了rquire，那麼你的編輯器右下方會顯示一個“燈泡”的提示，你只要點燈泡就不用自己苦逼的寫這個配置文件了）

此配置表示代碼服從ES5標準並使用commonjs規範，發VScode下有此配置之後，可以實現在文件中對require引用js文件的智能提示。（我測試時無此配置也會有智能提示，不清楚什麼原因）

[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.send

main 項目單步調試，斷點直接跑到了 attach 項目中，

attach 項目單步調試，斷點又回到 main 項目，

Debugging in Visual Studio Code

VSCode + make + makefile + c++ 斷點調試

一、VSCode 自帶

新建文件夾 Test – VSCode 打開 Test – 新建文件 main.cpp – 

DEBUG “執行按鈕”右邊“add configuration…”  選擇 “g++ build and debug” – 

VSCode 自動生成 tasks.json 和 laugh.json 即可斷點調試

二、makefile 文件

1. VSCode 新建文件 makefile 內容如下：

.default: all

all: main

main: main.o

    g++ -Wall -Werror -std=c++14 -g -O -o $@ $^

%.o: %.cpp

    g++ -Wall -Werror -std=c++14 -g -O -c $^

clean:

    rm -rf qwirkle *.o *.dSYM

此時，打開命令行，make，可以生成可執行文件

2. task.json 改成如下：

{

    “tasks”: [

        {

            “type”: “shell”,

            “label”: “shell”,

            “command”: “/usr/bin/make”,

        }

    ],

    “version”: “2.0.0”

}

3. launch.json 改成如下：

{

    // Use IntelliSense to learn about possible attributes.

    // Hover to view descriptions of existing attributes.

    // For more information, visit:

    “version”: “0.2.0”,

    “configurations”: [

        {

            “name”: “g++ build and debug active file”,  // 配置名稱，將會在啟動配置的下拉菜單中顯示

            “type”: “cppdbg”,

            “request”: “launch”,  // 請求配置類型，可以為launch（啟動）或attach（附加）

            “program”: “${fileDirname}/main”,  //將要進行調試的程序的路徑，與 makefile 中的 main 一致

            “args”: [],

            “stopAtEntry”: true,  // 設為true時程序將暫停在程序入口處

            “cwd”: “${workspaceFolder}”,

            “environment”: [],

            “externalConsole”: true, // 調試時是否顯示控制台窗口，必須為true顯示控制台，才能輸入，交互

            “MIMode”: “lldb”,  // 指定連接的調試器，可以為gdb或lldb。

            “preLaunchTask”: “shell”   //調試會話開始前執行的任務，一般為編譯程序。與 tasks.json 的 label 一致

        }

    ]

}

點擊 VSCode 執行按鈕即可斷點調試，找到彈出的窗口，即可輸入，交互

注意斷點打到  std::cout”start”std::endl;  不停留

VSCode調試egg.js項目

首先，在需要調試的地方打好斷點

如上圖，點擊左側的行數，158行就可以打上斷點了

點擊 vscode 左側的debug窗口，如果你之前沒有配置過 launch.json 文件，那麼現實效果就會如下圖一樣。

點擊左上方，【沒有配置】，添加配置

VSCode本身就內置了Node.js的調試工具，如果將來你需要調試別的東西，可以在這裡選擇添加對應的調試插件工具。

這裡我們調試的是Node.js，就選擇Node.js，然後VSCode會在 /.vscode 目錄中新建一個 launch.json 文件

launch.json 文件新建好後，我們需要進行一些配置操作，這裡我們選擇的是，附加到進程。

後面我們是先啟動egg的調試進程，然後再將vscode附加到進程中的。

這裡有一個很關鍵的節點， program 這個屬性寫的就是你需要調試的js文件，我這邊調試的是剛才打上斷點的文件 pledges.js

使用 iterm 進入到工程目錄，開啟調試模式

在VSCode中選擇 Attach to Process ，並且選擇egg-cluster這個進程。

等請求進入到剛才打斷點的地方，VSCode就會自己跳轉到調試點啦，然後就可以盡情調試啦~

BTW，如果你有更好，更簡單的調試方式請告訴我…

如何調試nodejs

Node Inspector 是一個可在webkit內核瀏覽器下進行nodejs調試的工具，其界面基本上跟chrome的調試工具一樣，使用非常方便。

首先在全局環境中安裝node inspector

[javascript] view plaincopy

npm install -g node-inspector

安裝完成之後，以調試模式運行需要調試的node代碼，比如

[javascript] view plaincopy

node –debug-brk app.js

這種方式會在代碼運行的時候，強制在第一行添加斷點

這時，會出現“debugger listening on port 5858”的提示

默認的端口是5858，也可以像這樣修改:

node –debug-brk[=3000] app.js

然後，啟動node-inspector，

[javascript] view plaincopy

node-inspector 

（因為之前的nodejs代碼在運行，所以命令行窗口沒辦法輸入新的命令，所以啟動node-inspector需要新打開一個命令行窗口來輸入）

根據提示中的地址，打開

就可以看到，一個模擬Chrome調試窗口的頁面，加載了node中的所有代碼，具體的調試方式，就和Chrome一樣了。

還有一種方式是在代碼中需要添加斷點的地方，加入

[javascript] view plaincopy

debugger；

以下面這種方式運行

[javascript] view plaincopy

node –debug app.js

這樣代碼會運行到需要debugger的地方暫停。