Microsoft Visual Studio Code
在调试 JavaScript 代码时， 其中 三种 比较 简单：
- 1.使用 Chrome 等 浏览器 调试
- 2. 使用 Ctrl+Shift+B 快捷键运行 html 文件，需要在 Tasks.json 配置
- 2.在 vscode 配置 JavaScript 运行环境
1. 使用 Chrome 等 浏览器 调试
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 内置 Node.js 运行时，能调试 javascript，TypeScript。如果要 启动调试， 需要设置启动配置文件 launch.json。
单击调试视图顶部的配置齿轮图标
选择调试环境，vscode将在 .vscode
launch.json 中有很多属性可以设置，通过 智能提示 可以 查看有那些属性可以设置。
如果 要查看属性的具体含义，可以把鼠标悬停在属性上面，会属性的使用说明。
在 launch.json 文件中的配置如下：
{
"version": "0.2.0",
"configurations": [{
"name": "谷歌浏览器", //运行html文件，用谷歌浏览器打开
"type": "chrome",
"request": "launch",
"url": "${file}",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "nodeLauch", //单独调试js，即可以直接运行js
"type": "node",
"request": "launch",
"program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"preLaunchTask": "",
"sourceMaps": false,
"outDir": null
}
]
}在 launch.json 中会使用到一些 预定变量，这些变量的具体含义如下
${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(当前打开的文件)
${relativeFile} the current opened file relative to workspaceRoot(当前打开的文件,相对于workspaceRoot)
${fileBasename} the current opened file's basename(当前打开文件的文件名, 不含扩展名)
${fileDirname} the current opened file's dirname(当前打开文件的目录名)
${fileExtname} the current opened file's extension(当前打开文件的扩展名)
${cwd} the task runner's current working directory on startup()
2. 使用 Ctrl+Shift+B 快捷键 运行html文件
Ctrl+Shift+B 快捷键运行 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"
}]
}不想每次都按这个快捷键，请参考 npm 配置 node 服务方法：
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运行环境
1. 下载并安装 Node.js（ Node.js 是 JavaScript 的一个运行环境 ）
这个在 Node.js 官网或者中文网都可以找到
2. 配置vscode
点击 vscode中 “调试” 按钮，打开 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} 为当前程序工作的绝对路径。
3.调试
新建一个js文件，将launch.json中program里面的1.js改为你要调试的文件名，并把改文件放在绝对路径下
(function name(params) {
console.log("message");
})();使用 F5调试，得到
node --debug-brk=37692 --nolazy Untitled-1.js
Debugger listening on [::]:37692
message
调试成功
3. vscode C++开发环境配置教程(教你如何用vscode写C++)
MinGW、MinGW-w64 与TDM-GCC 应该如何选择？：https://www.zhihu.com/question/39952667
tdm-gcc：https://jmeubank.github.io/tdm-gcc/download/
VSCode 连接远程 linux 服务器进行 C++ 开
使用 VSCode 的 Remote-SSH 连接 Linux 进行远程开发：https://www.jb51.net/article/193264.htm
C/C++ for Visual Studio Code：https://code.visualstudio.com/docs/languages/cpp
打开vscode
点击左侧栏第五个，在搜索框中输入"chinese"，安装第一个插件（汉化），
然后输入"c++"，也安装第一个插件，然后重启，继续进行下一步操作。
下载编译环境
在这里用的是 TDM-GCC，下载完成后按照默认安装即可，但要记住TDM-GCC的安装路径，在接下来要用到。
配置环境变量
在TDM-GCC安装完成后，我们需要将它的路径加入到系统的环境变量里
操作如下：我的电脑 --->右键 属性 ---> 高级系统设置 ---> 环境变量 ---> 系统环境变量
在 系统变量 中点击 path，然后点击编辑，将上面的路径加入即可。格式形如：C:\TDM-GCC-64\bin;
配置vscode里的环境
在 vscode 中，文件 ---> 打开文件夹 ---> 选择文件夹 ---> 选中，这样就直接加入到 vscode 中了。或者直接把一个文件拖入vscode中。接着，在这个文件下创建一个 .vscode 文件夹（注意名字一定是.vscode），这是必须的（一般来说，每个文件夹中都会有这么一个 .vscode 配置文件）。注意：将此文件夹放在常用文件夹顶层，就不需要重复配置了。
在 .vscode 文件夹 中，新建两个（只需两个）配置文件，即 launch.json、tasks.json。将下列内容复制进去即可：
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", // 配置名称，将会在启动配置的下拉菜单中显示
"type": "cppdbg", // 配置类型，这里只能为cppdbg
"request": "launch", // 请求配置类型，可以为launch（启动）或attach（附加）
"program": "${fileDirname}/${fileBasenameNoExtension}.exe",// 将要进行调试的程序的路径
"args": [], // 程序调试时传递给程序的命令行参数，一般设为空即可
"stopAtEntry": false, // 设为true时程序将暂停在程序入口处，一般设置为false
"cwd": "${workspaceRoot}",// 调试程序时的工作目录，一般为${workspaceRoot}即代码所在目录
"environment": [],
"externalConsole": true,// 调试时是否显示控制台窗口，一般设置为true显示控制台
"MIMode": "gdb",
"miDebuggerPath": "C:\\TDM-GCC-64\\bin\\gdb64.exe",// miDebugger的路径，注意这里要与MinGw的路径对应
"preLaunchTask": "g++", // 调试会话开始前执行的任务，一般为编译程序，c++为g++, c为gcc
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
}
]
}
]
}编写第一个C++程序
在配置完成后，建立一个 test.cpp 文件，粘贴以下代码
#include <iostream>
using namespace std;
int main()
{
cout << "Hello Vscode" << endl;
getchar();
return 0;
}
打上断点，如图：
因为 vscode 在执行完程序后会退出，所以可以选择增加一个断点或者加一句 getchar(); 接下来，Ctrl+F5 运行
标签：workspaceRoot,launch,vscode,JavaScript,C++,json,file,调试 From： https://blog.51cto.com/csnd/5956124