이 글은 일상적인 개발 작업의 효율성을 두 배로 높일 수 있도록 각 시나리오에 대한 일부VSCode고급 디버깅 및 사용 기술을 요약하고 공유할 것입니다.
VsCode는 탄생 이후 뛰어난 기능으로 빠르게 인기를 얻었습니다. 특히 프런트엔드 개발 파트너에게는 거의 필수적인 개발 도구가 되었습니다. 따라서 VsCode의 각 사용 기술과 디버깅 기술을 익히면 일상적인 개발 작업의 효율성이 두 배로 높아집니다. 이 글에서는 많은 사진과 텍스트를 사용하여 VsCode의 다양한 기술을 다음과 같은 측면에서 자세히 소개합니다.
VsCode가 설치되면 환경 변수가 자동으로 작성됩니다. 터미널에code
를 입력하면 VsCode 응용 프로그램이 호출됩니다.code
即可唤起VsCode应用程序。
ctrl + p
快速搜索文件并跳转,添加:
可以跳转到指定行ctrl + shift + p
根据您当前的上下文访问所有可用命令。
ctrl + shift + c
在外部打开终端并定位到当前项目路径
ctrl + 按键1左边的符号
显示隐藏终端面板
Ctrl+B
切换侧边栏
Ctrl+
快速拆分文件编辑
alt + 单机左键
添加多处光标
alt + shift + 单击左键
同一列所有位置添加光标
alt + shift + 鼠标选择
选择相同开始和结束的区域
alt + 上键或下键
将当前行或者选中的区域上移/下移一行在配置文件中添加如下配置,可以增加字符数标尺辅助线
"editor.rulers": [40, 80, 100]
下面以在VsCode中快速调试一个Node项目为例,演示断点的基本使用。后文会继续结束各种高级断点。
program
字段用于指定你的程序入口文件,${workspaceFolder}
表示当前项目根路径
F5
开始调试,成功调试会有浮窗操作栏浮窗的操作按钮功能依次为:
F5
)、F10
)、F11
)、Shift F11
)、Ctrl + Shift + F5
)、Shift + F5
ctrl + p
를 사용하여 빠르게 파일을 검색하고 이동하고,:
를 추가하여 해당 항목으로 이동하세요. 지정됨 OKctrl + Shift + p
현재 상황에 따라 사용 가능한 모든 명령에 액세스하세요.
ctrl + Shift + c
외부에서 터미널을 열고 현재 프로젝트 경로를 찾습니다.
ctrl + 키 1 왼쪽에 있는 기호
숨겨진 항목 표시 터미널 패널
Ctrl+B
사이드바 전환
Ctrl+
빠르게 분할 파일 편집
alt + 왼쪽 한 번 클릭
여러 커서 추가
alt + Shift + 왼쪽 클릭
동일한 열의 모든 위치에 커서 추가
alt + Shift + 마우스 선택
동일한 시작 선택 그리고 끝 영역
alt + 위 또는 아래 키
추가에서 현재 줄 또는 선택한 영역을 한 줄 위/아래로 이동
var express = require('express'); var app = express(); app.get('/', function(req, res) { res.send('Hello World!'); }); app.listen(3000, function() { console.log('Example app listening on port 3000!'); });
program
필드는 프로그램 항목 파일을 지정하는 데 사용되며${workspaceFolder}
는 현재 프로젝트를 나타냅니다. 루트 경로F5
를 누르세요. 디버깅에 성공하면 부동 창 작업 표시줄이 나타납니다< img src="https://img.php.cn/upload/image/113/104/557/16467088126363[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁" title="16467088126363[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁" alt="[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁"/>조작 버튼 기능 부동 창 중 계속(F5
), 다음 단계 디버그(F10
), 단일 단계 실행(F11< /code>), 한 단계 종료( Shift F11
), 다시 디버그(Ctrl + Shift + F5
), 디버깅 종료(Shift + F5
)로그 중단점 로그 중단점은 일반 중단점의 변형입니다. 차이점은 디버깅을 중단하지 않지만 정보를 콘솔에 기록할 수 있다는 것입니다. 로그 중단점은 일시 중지하거나 중지할 수 없는 서비스를 디버깅할 때 특히 유용합니다. 단계는 다음과 같습니다:
- 로그 중단점을 추가하는 단계
![164670881772604[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁 [피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁](https://img.php.cn/upload/image/719/543/577/164670881772604[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁)
- 로그 중단점을 기록하려는 정보를 입력하고 Enter를 클릭하면 추가가 완료됩니다.
{}
를 사용하여 다음과 같은 변수를 사용할 수 있습니다. 여기에 로그 중단점 추가의, b 값은 ${b}
{}
使用变量,比如在此处添加日志断点,b的值为${b}
![164670882273111[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁 [피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁](https://img.php.cn/upload/image/896/856/404/164670882273111[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁)
- 日志断点添加成功后会有是一个菱形图标
![164670882657138[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁 1[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁](https://img.php.cn/upload/image/854/894/659/164670882657138[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁)
- 按
F5
运行查看调试结果
![164670883321793[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁 1[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁](https://img.php.cn/upload/image/716/474/296/164670883321793[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁)
条件断点是表达式结果为true
时才会进行断点,步骤如下:
F5
调试,条件成立所以进行了断点只有该行代码命中了指定次数,才会进行断点。步骤如下:
F5
调试,如图所示,index为9时才中断仅当执行到达与内联断点关联的列时,才会命中内联断点。这在调试在一行中包含多个语句的缩小代码时特别有用。比如for循环,短路运算符等一行代码包含多个表达式时会特别有用。步骤如下:
Shift + F9
로그 중단점이 성공적으로 추가되면 다이아몬드 아이콘이 표시됩니다
F5
를 눌러 실행하고 디버깅 결과 보기
true
일 때의 중단점입니다.오른쪽- 코드 줄의 왼쪽을 클릭하세요. 중단점을 추가할 수도 있습니다. 여기에서 조건부 중단점을 추가하도록 선택하세요
F5
디버그하려면 조건이 성립되어 중단점이 만들어집니다
F5
를 눌러F5
를 누르세요. 그림과 같이 디버그는 인덱스가 9일 때 중단됩니다.< h3 data-id="heading-9">인라인 중단점
Shift + F9
를 누르세요 디버깅 후 인라인으로 실행되는 코드는 매번 중단됩니다 보조 포인트: 데이터 패널 소개데이터 패널에서는 모든 변수를 볼 수 있습니다변수를 마우스 오른쪽 버튼으로 클릭하여 변수 값 설정, 변수 값 복사 및 기타 작업 데이터 패널에 포커스를 두면 값을 입력하여 검색하고 필터링할 수 있습니다. 필터링 여부를 제어하려면 아래 표시된 버튼을 클릭하세요. 보충 포인트: 모니터링 패널 소개 모니터링 패널에 변수를 추가하고 변수의 변화를 실시간으로 관찰할 수 있습니다. 변수 패널을 마우스 오른쪽 버튼으로 클릭하고 "모니터에 추가"를 선택하여 모니터링 패널에 변수를 추가하세요모니터링 패널에서 추가 버튼을 직접 선택하여 변수를 추가할 수도 있습니다 변수 추가 후 변수의 변화를 실시간으로 모니터링할 수 있습니다
开发 Web 程序通常需要在 Web 浏览器中打开特定 URL,以便在调试器中访问服务器代码。VS Code 有一个内置功能“ serverReadyAction ”来自动化这个任务。
var express = require('express'); var app = express(); app.get('/', function(req, res) { res.send('Hello World!'); }); app.listen(3000, function() { console.log('Example app listening on port 3000!'); });
{ "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/app.js", "serverReadyAction": { "pattern": "listening on port ([0-9]+)", "uriFormat": "http://localhost:%s", "action": "openExternally" } }
pattern
是设置匹配的程度端口号,端口号放在小括号内,即作为一个正则的捕获组使用。uriFormat
映射为URI,其中%s
使用pattern
中的第一个捕获组替换。最后使用该URI作为外部程序打开的URI。
F5
调试,会自动打开浏览器,且会在下图所示处中断,当继续执行后,浏览器才能看到输出了server的内容关于NodeJs项目的调试方法,已经在上述的断点的基本使用部分做了介绍,可以网上滚动翻阅。
调试TS项目前,先创建一个TS项目
tsconfig.json
文件# 终端运行 tsc --init
tsconfig.json
文件,开启sourceMap选项和指定编译后输出的路径VS Code 内置了对 Ts 调试的支持。为了支持调试 Ts 与正在执行的 Js 代码相结合,VS Code 依赖于调试器的source map在 Ts 源代码和正在运行的 Js 之间进行映射,所以需要需要开启sourceMap
选项。
{ "sourceMap": true, "outDir": "./out" }
const num: number = 123; console.log(num); function fn(arg: string): void { console.log('fn', arg); } fn("Hello");
手动编译调试TS
在上述的ts基本项目中:
tsc
index.js
和一个index.js.map
文件F5
或者运行 -> 启动调试
,此时可以看到可以正常debug调试通过构建任务构建调试TS
Ctrl+Shift+B
或选择终端 -> 运行生成任务
,此时会弹出一个下拉菜单tsc构建选项
,此时可以看到自动生成了编译文件注意,如果你使用的是其他终端(比如cmder
)的话,有可能会生成不了,如下图所示,使用默认的powershell即可:
F5
即可监视改变并实时编译
Ctrl + Shift + B
选择监视选项,可以实时监视文件内容发生变化,重新编译终端 -> 配置任务 -> 选择任务
可以生成对应的tasks.json配置终端 -> 运行生成任务 -> 点击设置图标
也可以生成对应的tasks.json配置{ "version": "2.0.0", "tasks": [ { "type": "typescript", "tsconfig": "tsconfig.json", "problemMatcher": [ "$tsc" ], "group": "build", "label": "tsc: 构建 - tsconfig.json" } ] }
运行 -> 添加配置 -> 选择nodejs
launch.json
文件中,添加preLaunchTask
字段,值是tasks.json
的label
值,一定要相同,注意大小写。该字段的作用是在执行命令前先执行改task
任务。注意,如果编译后的js文件不在相应的位置,通过图中的outFiles
字段可以指定ts
编译后的js
路径。
index.ts
文件中按F5
启动调试,可以看到调试前已经生成了编译文件,而后就可以正常调试了。vscode本身内置了对ts的支持
vscode内置的ts版本(即工作区版本),仅仅用于IntelliSense(代码提示),工作区ts版本与用于编译的ts版本无任何关系。
修改工作区ts版本的方法:
学会了上述ts的调试后,我们尝试调试html文件,并且html文件中引入ts文件:
Document Hello
const num: number = 1221; console.log(num); function fn(arg: string): void { console.log('fn', arg); } document.body.append('World') fn("he");
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome", "url": "file:///E:/demo/vscode/debug/ts/index.html", "preLaunchTask": "tsc: 构建 - tsconfig.json", "webRoot": "${workspaceFolder}" } ] }
F5
可以正常唤起chrome浏览器,并在vscode的ts源码处会有debug效果下面介绍两种调试vue2项目的3种方法,其他框架的调试也类似:
vue.config.js
,指定要生成sourceMaps资源module.exports = { configureWebpack: { // 生成sourceMaps devtool: "source-map" } };
./vscode/launch.json文件
或者选择运行 -> 添加配置 -> Chrome
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "breakOnLoad": true, "pathMapping": { "/_karma_webpack_": "${workspaceFolder}" }, "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*", "/./*": "${webRoot}/*", "/src/*": "${webRoot}/*", "/*": "*", "/./~/*": "${webRoot}/node_modules/*" }, "preLaunchTask": "serve" } ] }
{ "version": "2.0.0", "tasks": [ { "label": "serve", "type": "npm", "script": "serve", "isBackground": true, "problemMatcher": [ { "base": "$tsc-watch", "background": { "activeOnStart": true, "beginsPattern": "Starting development server", "endsPattern": "Compiled successfully" } } ], "group": { "kind": "build", "isDefault": true } } ] }
该脚本的作用是运行npm run serve
编译命令。
F5
启动调试即可注意:此方式的主要点在于launch.json
配置文件中,通过preLaunchTask
字段指定调试前先运行一个任务脚本,preLaunchTask
的值对应tasks.json
文件中的label
值。
更多详细内容,大家可以点击这里的参考文档查阅。
https://github.com/microsoft/vscode-recipes/tree/main/vuejs-cli
vue.config.js
文件配置,指定要生成sourceMaps资源module.exports = { configureWebpack: { // 生成sourceMaps devtool: "source-map" } };
Debugger for Chrome
插件,并确保没有禁用插件tasks.json
任务# 终端执行命令,启动项目 npm run serve
F5
启动调试即可更多详细内容,请点击这里的参考文档查阅。
https://vuejs.org/v2/cookbook/debugging-in-vscode.html
Debugger for Firfox
在Firefox中调试Debugger for Chrome
基本一样,区别在于安装Debugger for Firfox
插件,并在launch.json配置中,增加调试Firefox的配置即可,配置如下{ "version": "0.2.0", "configurations": [ // 省略Chrome的配置... // 下面添加的Firefox的配置 { "type": "firefox", "request": "launch", "reAttach": true, "name": "vuejs: firefox", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }] } ] }
Firefox初始启动时不会触发调试,需要刷新一次
Electron很多人都使用过,主要用于开发跨平台的系统桌面应用。那么来看下vue-cli-electron-builder
创建的Electron
项目怎么调试。步骤如下:
vue.config.js
文件配置,增加sourceMaps配置:module.exports = { configureWebpack: { devtool: 'source-map' } }
.vscode/launch.json
{ "version": "0.2.0", "configurations": [ { "name": "Electron: Main", "type": "node", "request": "launch", "protocol": "inspector", "preLaunchTask": "bootstarp-service", "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd" }, "args": ["--remote-debugging-port=9223", "./dist_electron"], "outFiles": ["${workspaceFolder}/dist_electron/**/*.js"] }, { "name": "Electron: Renderer", "type": "chrome", "request": "attach", "port": 9223, "urlFilter": "http://localhost:*", "timeout": 0, "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/*" } }, ], "compounds": [ { "name": "Electron: All", "configurations": ["Electron: Main", "Electron: Renderer"] } ] }
此处配置了两个调试命令:Electron: Main
用于调试主进程,Electron: Renderer
用于调试渲染进程;compounds[].
选项用于定义复合调试选项;configurations
定义的复合命令是并行的;preLaunchTask
用于配置命令执行前先执行的任务脚本,其值对应tasks.json
中的label
字段;preLaunchTask
用在compounds
时,用于定义configurations
复合任务执行前先执行的脚本。
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "bootstarp-service", "type": "process", "command": "./node_modules/.bin/vue-cli-service", "windows": { "command": "./node_modules/.bin/vue-cli-service.cmd", "options": { "env": { "VUE_APP_ENV": "dev", "VUE_APP_TYPE": "local" } } }, "isBackground": true, "args": [ "electron:serve", "--debug" ], "problemMatcher": { "owner": "custom", "pattern": { "regexp": "" }, "background": { "beginsPattern": "Starting development server\\.\\.\\.", "endsPattern": "Not launching electron as debug argument was passed\\." } } } ] }
在主进程相关代码上打上断点,然后启动调试主进程命令就可以调试主进程了
注意,这里的options
参数是根据实际的情况,自定义添加我们运行项目时所需要的参数,比如我这里因为启动项目的npm命令是:
"serve-local:dev": "cross-env VUE_APP_TYPE=local VUE_APP_ENV=dev vue-cli-service electron:serve"
切换到渲染进程的调试选项,在渲染进程的代码处打上断点,点击调试。注意,此时并不会有断点终端,需要ctrl+r
手动刷新软件进程才会看到渲染进程的断点。
同时开启渲染进程和主进程的调试,只需要切换到调试全部的选项即可。注意,此种方式因为compounds[].configurations
配置是并行执行的,并不一定能保证渲染进程调试一定能附加到主进程调试成功(估计是时机问题),有些时候会调试渲染进程不成功。所以,可以采取上面的方式进行调试。
更多调试Electron的内容,可以点击参考文档查阅。 https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#debugging-with-vscode 补充:更进一步: VS调试React app文档(https://medium.com/@auchenberg/live-edit-and-debug-your-react-apps-directly-from-vs-code-without-leaving-the-editor-3da489ed905f) VS调试Next.js文档(https://github.com/microsoft/vscode-recipes/tree/main/Next-js) 更多...(https://code.visualstudio.com/docs/nodejs/debugging-recipes)
@category:"snippets"
文件 -> 首选项 -> 用户片段
新建全局代码片段文件
添加代码片段文件的文件名称,会生成.code-snippets
后缀的文件
定义用户片段
{ "自动补全console.log": { "scope": "javascript,typescript", "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "输出console.log('')" } }
关键词 | 类型 | 说明 |
---|---|---|
scope | string |
代码片段生效的作用域,可以是多个语言,比如javascript,typescript 表示在js和ts生效,不加scope 字段表示对所有文件类型生效 |
prefix | `string | string[]` |
body | string[] |
代码片段内容,数组的每一项会是一行 |
description | string |
IntelliSense 显示的片段的可选描述 |
n | - | 定义光标的位置,光标根据数字大小按tab依次跳转;注意$0 是特殊值,表示光标退出的位置,是最后的光标位置。 |
log
时效果如下"body": [ "console.log('${1:abc}');" ],
用两个竖线包含多个选择值,|多个选择值直接用逗号隔开|
"body": [ "console.log('${1:abc}');", "${2|aaa,bbb,ccc|}" ],
只需要选择文件 -> 首选项 -> 用户片段 -> 新建xxx文件夹的代码片段
, 新建后会在当前工作区生成.vscode/xxx.code-snippets
文件
vscode内置了对Emmet的支持,无需额外扩展。例如html的Emmet演示如下:
选中或者光标所处的位置,按F2
可以对所有的变量重命名
VsCode扩展插件可以做什么事情?
基于Yeoman
快速开发VsCode插件,步骤如下:
Yeoman
和用于生成模板的插件VS Code Extension Generator
(https://www.npmjs.com/package/generator-code)# 终端运行,主要node版本需要12及以上,node10会安装报错 npm i -g yo generator-code
yo code
创建命令,选择要生成的项目模板。这里演示New extension
F5
生成编译项目,此时会自动打开一个新窗口Ctrl+Shfit+P
,输入Hello World
命令更多关于VSCode的相关知识,请访问:vscode教程!!
위 내용은 [피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!