?

Microsoft Visual Studio Code：https://blog.csdn.net/freeking101/article/details/86715578

IntelliJ IDEA：https://www.jetbrains.com/products/

?

?

在調(diào)試 JavaScript 代碼時(shí)， 其中 三種 比較 簡單：

• 1.使用 Chrome 等 瀏覽器 調(diào)試
• 2.?使用 Ctrl+Shift+B?快捷鍵運(yùn)行 html 文件，需要在 Tasks.json 配置
• 2.在 vscode 配置 JavaScript 運(yùn)行環(huán)境

?

?

1.?使用 Chrome 等 瀏覽器 調(diào)試

?

Debugger for Chrome：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Microsoft Visual Studio Code 中文手冊：https://www.cntofu.com/book/98/README.md
vs code debug：https://code.visualstudio.com/docs/editor/debugging#_launch-configurations

?

VSCode 內(nèi)置 Node.js 運(yùn)行時(shí)，能調(diào)試 javascript，TypeScript。如果要 啟動(dòng)調(diào)試，?需要設(shè)置啟動(dòng)配置文件 launch.json。

單擊調(diào)試視圖頂部的配置齒輪圖標(biāo)

選擇調(diào)試環(huán)境，vscode將在 .vscode 目錄下生成一個(gè) launch.json 的配置文件

launch.json 中有很多屬性可以設(shè)置，通過 智能提示 可以 查看有那些屬性可以設(shè)置。

如果 要查看屬性的具體含義，可以把鼠標(biāo)懸停在屬性上面，會(huì)屬性的使用說明。

在 launch.json 文件中的配置如下：

{"version": "0.2.0","configurations": [{"name": "谷歌瀏覽器", //運(yùn)行html文件，用谷歌瀏覽器打開"type": "chrome","request": "launch","url": "${file}","sourceMaps": true,"webRoot": "${workspaceRoot}"},{"name": "nodeLauch", //單獨(dú)調(diào)試js，即可以直接運(yùn)行js"type": "node","request": "launch","program": "${file}", //這個(gè)配置成你要調(diào)試的文件、${file}當(dāng)前打開的文件"stopOnEntry": false,"args": [],"cwd": "${workspaceRoot}","runtimeExecutable": null,"runtimeArgs": ["--nolazy"],"env": {"NODE_ENV": "development"},"console": "internalConsole","preLaunchTask": "","sourceMaps": false,"outDir": null}] }

在 launch.json 中會(huì)使用到一些 預(yù)定變量，這些變量的具體含義如下

${workspaceRoot} the path of the folder opened in VS Code(VSCode中打開文件夾的路徑)
${workspaceRootFolderName} the name of the folder opened in VS Code without any solidus (/)(VSCode中打開文件夾的路徑, 但不包含"/")
${file} the current opened file(當(dāng)前打開的文件)
${relativeFile} the current opened file relative to workspaceRoot(當(dāng)前打開的文件,相對于workspaceRoot)
${fileBasename} the current opened file's basename(當(dāng)前打開文件的文件名, 不含擴(kuò)展名)
${fileDirname} the current opened file's dirname(當(dāng)前打開文件的目錄名)
${fileExtname} the current opened file's extension(當(dāng)前打開文件的擴(kuò)展名)
${cwd} the task runner's current working directory on startup()

?

?

?

2.?使用?Ctrl+Shift+B?快捷鍵 運(yùn)行html文件

?

?Ctrl+Shift+B 快捷鍵運(yùn)行 html 文件，在 Tasks.json 中配置如下：

{"version": "0.1.0","command": "","isShellCommand": false,"args": ["${file}"],"showOutput": "always","windows": {"command": "C:/Users/shannonliang/AppData/Local/Google/Chrome/Application/chrome.exe"},"tasks": [{"taskName": "webserver","isBuildCommand": true,"showOutput": "always"}] }

不想每次都按這個(gè)快捷鍵，請參考 npm 配置 node 服務(wù)方法：

How to view my HTML code in browser with Visual Studio Code?
https://stackoverflow.com/questions/30039512/how-to-view-my-html-code-in-browser-with-visual-studio-code

?

?

?

3.?在vscode配置JavaScript運(yùn)行環(huán)境

?

1. 下載并安裝 Node.js（ Node.js 是 JavaScript 的一個(gè)運(yùn)行環(huán)境 ）

這個(gè)在 Node.js 官網(wǎng)或者中文網(wǎng)都可以找到

?

2. 配置vscode

點(diǎn)擊 vscode中 “調(diào)試” 按鈕，打開 launch.json 文件（或者使用 Ctrl+Shift+P 輸入launch.json)

在里面添加

"version": "0.2.0","configurations": [{"name": "Launch","type": "node","request": "launch","program": "${workspaceRoot}/1.js","stopOnEntry": false,"args": [],"cwd": "${workspaceRoot}","runtimeExecutable": null,"runtimeArgs": ["--nolazy"],"env": { "NODE_ENV": "development" },"externalConsole": false,"preLaunchTask": "","sourceMaps": false,"outDir": null},{"name": "Attach","type": "node","request": "attach","port": 5858}]

注意：${workspaceRoot} 為當(dāng)前程序工作的絕對路徑。

?

3.調(diào)試

新建一個(gè)js文件，將launch.json中program里面的1.js改為你要調(diào)試的文件名，并把改文件放在絕對路徑下

(function name(params) {console.log("message"); })();

使用 F5調(diào)試，得到

node --debug-brk=37692 --nolazy Untitled-1.js

Debugger listening on [::]:37692

message

調(diào)試成功

?

?

?

3.?vscode C++開發(fā)環(huán)境配置教程(教你如何用vscode寫C++)

?

From：https://www.cnblogs.com/baihualiaoluan/p/10661669.html

MinGW、MinGW-w64 與TDM-GCC 應(yīng)該如何選擇？：https://www.zhihu.com/question/39952667

tdm-gcc：https://jmeubank.github.io/tdm-gcc/download/

?

VSCode 連接遠(yuǎn)程 linux 服務(wù)器進(jìn)行 C++ 開發(fā)：https://www.cnblogs.com/sinicheveen/p/14203670.html

使用 VSCode 的 Remote-SSH 連接 Linux 進(jìn)行遠(yuǎn)程開發(fā)：https://www.jb51.net/article/193264.htm

?

C/C++ for Visual Studio Code：https://code.visualstudio.com/docs/languages/cpp

?

打開vscode

點(diǎn)擊左側(cè)欄第五個(gè)，在搜索框中輸入"chinese"，安裝第一個(gè)插件（漢化），

然后輸入"c++"，也安裝第一個(gè)插件，然后重啟，繼續(xù)進(jìn)行下一步操作。

?

下載編譯環(huán)境

在這里用的是 TDM-GCC，下載完成后按照默認(rèn)安裝即可，但要記住TDM-GCC的安裝路徑，在接下來要用到。

配置環(huán)境變量

在TDM-GCC安裝完成后，我們需要將它的路徑加入到系統(tǒng)的環(huán)境變量里

操作如下：我的電腦 --->右鍵 屬性?--->?高級系統(tǒng)設(shè)置 ---> 環(huán)境變量 ---> 系統(tǒng)環(huán)境變量?

在?系統(tǒng)變量?中點(diǎn)擊 path，然后點(diǎn)擊編輯，將上面的路徑加入即可。格式形如：C:\TDM-GCC-64\bin;

?

配置vscode里的環(huán)境

在 vscode 中，文件 --->?打開文件夾 ---> 選擇文件夾 ---> 選中，這樣就直接加入到 vscode 中了。或者直接把一個(gè)文件拖入vscode中。接著，在這個(gè)文件下創(chuàng)建一個(gè) .vscode 文件夾（注意名字一定是.vscode），這是必須的（一般來說，每個(gè)文件夾中都會(huì)有這么一個(gè) .vscode 配置文件）。注意：將此文件夾放在常用文件夾頂層，就不需要重復(fù)配置了。

在 .vscode 文件夾 中，新建兩個(gè)（只需兩個(gè)）配置文件，即 launch.json、tasks.json。將下列內(nèi)容復(fù)制進(jìn)去即可：

tasks.json

{"version": "2.0.0","tasks": [{"label": "g++","command": "g++","args": ["-g","${file}","-o","${fileDirname}/${fileBasenameNoExtension}.exe"],"problemMatcher": {"owner": "cpp","fileLocation": ["relative","${workspaceRoot}"],"pattern": {"regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$","file": 1,"line": 2,"column": 3,"severity": 4,"message": 5}},"group": {"kind": "build","isDefault": true}}] }

launch.json：

一定要注意：miDebuggerPath 這一條，要與你TDM-GCC安裝路徑一致，注意在路徑中 '\'要替換為'\\',就像下面一樣。

{"version": "0.2.0","configurations": [{"name": "(gdb) Launch", // 配置名稱，將會(huì)在啟動(dòng)配置的下拉菜單中顯示"type": "cppdbg", // 配置類型，這里只能為cppdbg"request": "launch", // 請求配置類型，可以為launch（啟動(dòng)）或attach（附加）"program": "${fileDirname}/${fileBasenameNoExtension}.exe",// 將要進(jìn)行調(diào)試的程序的路徑"args": [], // 程序調(diào)試時(shí)傳遞給程序的命令行參數(shù)，一般設(shè)為空即可"stopAtEntry": false, // 設(shè)為true時(shí)程序?qū)和Ｔ诔绦蛉肟谔?#xff0c;一般設(shè)置為false"cwd": "${workspaceRoot}",// 調(diào)試程序時(shí)的工作目錄，一般為${workspaceRoot}即代碼所在目錄"environment": [],"externalConsole": true,// 調(diào)試時(shí)是否顯示控制臺窗口，一般設(shè)置為true顯示控制臺"MIMode": "gdb","miDebuggerPath": "C:\\TDM-GCC-64\\bin\\gdb64.exe",// miDebugger的路徑，注意這里要與MinGw的路徑對應(yīng)"preLaunchTask": "g++", // 調(diào)試會(huì)話開始前執(zhí)行的任務(wù)，一般為編譯程序，c++為g++, c為gcc"setupCommands": [{"description": "Enable pretty-printing for gdb","text": "-enable-pretty-printing","ignoreFailures": true}]}] }

編寫第一個(gè)C++程序

在配置完成后，建立一個(gè) test.cpp 文件，粘貼以下代碼

#include <iostream> using namespace std; int main() {cout << "Hello Vscode" << endl;getchar();return 0; }

打上斷點(diǎn)，如圖：

因?yàn)?vscode 在執(zhí)行完程序后會(huì)退出，所以可以選擇增加一個(gè)斷點(diǎn)或者加一句 getchar(); 接下來，Ctrl+F5 運(yùn)行

?

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的vscode 调试 C++/JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。