VSCode
7/4/2019 VSCode
# VSCode
# 插件同步
下载安装 Settings Sync
配置 Github token ,Settings --
Developer settings -- Personal access token
使用Settings Sync
1. Upload Key : Shift + Alt + U 2. Download Key : Shift + Alt + D
注意,该功能使用了Github 的glist功能,glist被墙了,上传同步需要开全局VPN
参考 三分钟教你同步 Visual Studio Code 设置 (opens new window)
# 断点调试
VSCode断点调试需要先安装插件:Debugger for Chrome
# 调试模式 launch 和 attach
VSCode有两种调试模式,launch 和 attach,简单来说就是 launch重新打开应用,attach用来调试已经打开的应用,区别可以参考这篇文章:Visual Studio Code 前端调试不完全指南 (opens new window)
- launch模式:由 vscode 来启动一个独立的具有 debug 模式的程序,使用 launch 模式调试前端代码存在一个问题,就是 vscode 会以新访客的身份打开一个新的 Chrome 进程,也就是说你之前在 Chrome 上装的插件都没法在这个页面上生效
- attach模式:附加于(也可以说“监听”)一个已经启动的程序(必须已经开启 Debug 模式),在这种情况下 attach 模式就有它存在的意义了:对一个已经启动的 Chrome 进行监听调试。
# launch.json文件
要配置断点调试必须配置launch.json文件,该文件必须在工程根目录的 .vscode
文件夹内
# 调试页面
- 用VSCode装载项目
- 按F5后会出现选择框,选择Crome,会自动生成launch.json文件
- 然后就可以正常断点调试了
# 纯js调试
- 用VSCode装载项目
- 按F5后会出现选择框,选择Node.js,会自动生成launch.json文件
- 然后就可以正常断点调试了
# launch.json说明
# Launch模式下
{
"version": "0.1.0",
"configurations": [
//本地有服务,URL模式
{
"name": "Launch localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost/mypage.html",
"webRoot": "${workspaceFolder}/wwwroot"
},
//本地文件,local file
{
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceFolder}/index.html"
},
]
}
# Attach模式
{
"version": "0.1.0",
"configurations": [
{
"name": "Attach to url with files served from ./out",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "<url of the open browser tab to connect to>",
"webRoot": "${workspaceFolder}/out"
}
]
}
# 附录
详细配置参见官方文档 vscode-chrome-debug (opens new window)