vscode怎么運(yùn)行js代碼 vscode調(diào)試javascript程序教程

在 vscode 中運(yùn)行和調(diào)試 JavaScript 的方法有三種：1. 使用終端執(zhí)行 JS 文件，需安裝 node.js，適合簡單測試；2. 配置 launch.json 調(diào)試器，可打斷點(diǎn)、查看變量，適合排查邏輯問題；3. 安裝 code runner 插件一鍵運(yùn)行代碼，適合快速驗(yàn)證小段腳本但不便調(diào)試。

在 vscode 里運(yùn)行和調(diào)試 JavaScript 代碼其實(shí)挺簡單的，只要配置好環(huán)境，就能快速上手。下面會從基礎(chǔ)操作到調(diào)試設(shè)置一步步說清楚，適合剛接觸 VSCode 的用戶。

直接運(yùn)行 JS 文件：使用終端執(zhí)行

最直接的方法就是寫好 .js 文件后，在 VSCode 內(nèi)置終端中用 Node.js 執(zhí)行。
前提是你的電腦已經(jīng)安裝了 Node.js，可以在命令行輸入 node -v 看有沒有版本號來確認(rèn)。

舉個例子：

1. 新建一個文件，比如叫 app.js
2. 里面寫點(diǎn)內(nèi)容，比如：

   console.log("Hello, VSCode!");
3. 打開 VSCode 下方的終端（Terminal）
4. 輸入 node app.js 并回車，就能看到輸出結(jié)果

這個方法適合簡單測試腳本，不需要額外配置，但沒法打斷點(diǎn)調(diào)試。

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

配置調(diào)試器：圖形化調(diào)試 JS 程序

如果想像瀏覽器那樣打斷點(diǎn)、查看變量值，就需要配置 VSCode 的調(diào)試功能。

步驟如下：

• 打開左側(cè)活動欄的“運(yùn)行和調(diào)試”圖標(biāo)（或按快捷鍵 Ctrl+Shift+D）
• 點(diǎn)擊“創(chuàng)建 launch.json 文件”，選擇 “Node.js”
• VSCode 會在 .vscode 文件夾下生成一個調(diào)試配置文件
• 修改配置文件中的 program 字段，指向你要調(diào)試的 JS 文件，比如：

  "program": "${workspaceFolder}/app.js"

然后你就可以：

• 在代碼左邊點(diǎn)擊添加斷點(diǎn)
• 回到調(diào)試界面，點(diǎn)擊“啟動程序”按鈕開始調(diào)試
• 使用調(diào)試工具欄里的“繼續(xù)”、“單步執(zhí)行”等功能

這樣調(diào)試起來就更直觀，適合排查邏輯問題或者學(xué)習(xí)代碼流程。

小技巧：用 Code Runner 插件一鍵運(yùn)行

如果你不想打開終端，也不想配調(diào)試器，可以安裝一個叫 Code Runner 的插件。

它的好處是：

• 安裝后右鍵點(diǎn)擊 JS 文件，選“Run Code”就能直接執(zhí)行
• 快捷鍵 Ctrl+Alt+N 可以快速運(yùn)行當(dāng)前文件
• 支持多種語言，不只限于 JS

不過它默認(rèn)是在內(nèi)聯(lián)終端顯示結(jié)果，如果你想用外部終端，可以在設(shè)置里調(diào)整。

缺點(diǎn)是不能方便地調(diào)試，適合快速驗(yàn)證小段代碼。

基本上就這些方法了。你可以根據(jù)自己的需要選擇：簡單跑一下用終端，要調(diào)試就配 launch.json，圖方便就用 Code Runner。配置一次之后，后面都挺順手的。

以上就是