[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁

이 글은 일상적인 개발 작업의 효율성을 두 배로 높일 수 있도록 각 시나리오에 대한 일부 VSCode고급 디버깅 및 사용 기술을 요약하고 공유할 것입니다.

VsCode는 탄생 이후 뛰어난 기능으로 빠르게 인기를 얻었습니다. 특히 프런트엔드 개발 파트너에게는 거의 필수적인 개발 도구가 되었습니다. 따라서 VsCode의 각 사용 기술과 디버깅 기술을 익히면 일상적인 개발 작업의 효율성이 두 배로 높아집니다. 이 글에서는 많은 사진과 텍스트를 사용하여 VsCode의 다양한 기술을 다음과 같은 측면에서 자세히 소개합니다.

• 첫 번째 부분에서는 일반적으로 사용되는 단축키, 보조 눈금자 등 VsCode의 기본 기술을 주로 소개합니다. 이 부분을 잘 아시는 분은 바로 건너뛰셔도 됩니다. [추천 학습: "vscode 입문 튜토리얼"]
• 두 번째 부분은 주로 다양한 중단점(예: 로그 중단점, 인라인 중단점, 표현식 중단점 등), 데이터 패널 등에 중점을 둡니다.
• 세 번째 부분은 주로 Node 프로그램, TS 프로그램, Vue 프로그램, Electron 프로그램, HTML 등의 실용적인 디버깅 등 다양한 프로젝트의 실용적인 디버깅을 설명합니다.
• 마지막 부분에서는 코드 스니펫, 리팩토링, Emmet, etc.

기본 팁

빠른 시작

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项目为例，演示断点的基本使用。后文会继续结束各种高级断点。

• 创建一个基本的node项目为Nodejs
• 打开左侧调试面板，选择你要调试的node项目名称，添加调试配置

• 选择调试的项目类型为Node.js

• 打开生成的.vscode/launch.json文件，指定程序入口文件

program字段用于指定你的程序入口文件，${workspaceFolder}表示当前项目根路径

• 在程序中添加断点，只需要点击左侧的边栏即可添加断点

• 按F5开始调试，成功调试会有浮窗操作栏

浮窗的操作按钮功能依次为：

• 继续(F5)、
• 调试下一步(F10)、
• 单步跳入(F11)、
• 单步跳出(Shift F11)、
• 重新调试(Ctrl + Shift + F5)、
• 结束调试(Shift + F5

  자주 사용하는 단축키

ctrl + p를 사용하여 빠르게 파일을 검색하고 이동하고, :를 추가하여 해당 항목으로 이동하세요. 지정됨 OK

🎜🎜ctrl + 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!');
});

🎜🎜

고급 기술🎜

중단점의 기본 사용법🎜🎜다음은 중단점의 기본 사용을 보여주기 위한 예로 VsCode에서 Node 프로젝트를 빠르게 디버깅합니다. 다음 문서에서는 계속해서 다양한 고급 중단점을 완료합니다. 🎜🎜🎜Nodejs용 기본 노드 프로젝트 만들기🎜🎜왼쪽의 디버깅 패널을 열고 디버깅하려는 노드 프로젝트 이름을 선택한 다음 디버깅 구성을 추가하세요🎜🎜🎜🎜🎜🎜디버깅을 위해 선택한 프로젝트 유형은 Node.js🎜🎜🎜 🎜🎜🎜열기 생성된 .vscode/launch.json 파일, 프로그램 항목 파일 지정🎜🎜🎜program 필드는 프로그램 항목 파일을 지정하는 데 사용되며 ${workspaceFolder}는 현재 프로젝트를 나타냅니다. 루트 경로🎜🎜🎜 🎜🎜프로그램에 중단점을 추가하세요. 중단점을 추가하려면 왼쪽 사이드바를 클릭하세요🎜🎜🎜🎜🎜🎜디버깅을 시작하려면 F5를 누르세요. 디버깅에 성공하면 부동 창 작업 표시줄이 나타납니다🎜🎜🎜< img title="16467088126363[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁" alt="[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁"/>🎜🎜조작 버튼 기능 부동 창 중 🎜🎜🎜계속(F5), 🎜🎜다음 단계 디버그(F10), 🎜🎜단일 단계 실행(F11< /code>), 🎜🎜한 단계 종료(<code> Shift F11), 🎜🎜다시 디버그(Ctrl + Shift + F5), 🎜🎜디버깅 종료(Shift + F5)🎜🎜🎜로그 중단점🎜 🎜로그 중단점은 일반 중단점의 변형입니다. 차이점은 🎜디버깅을 중단하지 않지만🎜 정보를 콘솔에 기록할 수 있다는 것입니다. 로그 중단점은 일시 중지하거나 중지할 수 없는 서비스를 디버깅할 때 특히 유용합니다. 단계는 다음과 같습니다:🎜

• 로그 중단점을 추가하는 단계

• 로그 중단점을 기록하려는 정보를 입력하고 Enter를 클릭하면 추가가 완료됩니다.

{}를 사용하여 다음과 같은 변수를 사용할 수 있습니다. 여기에 로그 중단점 추가의 , b 값은 ${b}{}使用变量，比如在此处添加日志断点，b的值为${b}

• 日志断点添加成功后会有是一个菱形图标

• 按F5运行查看调试结果

表达式条件断点

条件断点是表达式结果为true时才会进行断点，步骤如下:

• 在代码行左侧右击，也可以添加断点，此处选择添加条件断点

• 填写表达式，按回车键

• 添加成功的小图标如下

• 按F5调试，条件成立所以进行了断点

命中计数断点

只有该行代码命中了指定次数，才会进行断点。步骤如下:

• 选择条件断点，切换为命中次数选项，填写命中次数

• 填写成功如下图所示

• 按F5调试，如图所示，index为9时才中断

内联断点

仅当执行到达与内联断点关联的列时，才会命中内联断点。这在调试在一行中包含多个语句的缩小代码时特别有用。比如for循环，短路运算符等一行代码包含多个表达式时会特别有用。步骤如下:

• 在指定位置按Shift + F9

로그 중단점이 성공적으로 추가되면 다이아몬드 아이콘이 표시됩니다

• 

F5를 눌러 실행하고 디버깅 결과 보기

표현식 조건부 중단점

• 조건부 중단점은 표현식 결과가 true일 때의 중단점입니다.

오른쪽- 코드 줄의 왼쪽을 클릭하세요. 중단점을 추가할 수도 있습니다. 여기에서 조건부 중단점을 추가하도록 선택하세요

수식을 입력하고 Enter

성공적으로 추가된 작은 아이콘은 다음과 같습니다

F5</code를 누르세요 > 디버그하려면 조건이 성립되어 중단점이 만들어집니다</p><h3 data-id="heading-11"></h3> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/798/456/642/1646709675917390.png" class="lazy" title="1646709599446340 .png" alt="1[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁"/><p><h3 id="적중-횟수-중단점-p-ul-중단점은-코드-줄이-지정된-횟수에-도달하는-경우에만-실행됩니다-단계는-다음과-같습니다-li-li-ul-조건부-중단점을-선택하고-적중-수-옵션으로-전환하고-적중-수를-입력하세요-p-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-title-피-토혈-요약-개발-작업-효율성을-두-배로-높이는-디버깅-및-VSCode-활용-팁-alt-피-토혈-요약-개발-작업-효율성을-두-배로-높이는-디버깅-및-VSCode-활용-팁-p-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-title-피-토혈-요약-개발-작업-효율성을-두-배로-높이는-디버깅-및-VSCode-활용-팁-alt-피-토혈-요약-개발-작업-효율성을-두-배로-높이는-디버깅-및-VSCode-활용-팁-ul-li-li-아래-사진처럼-충전-성공-ul-p-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-title-피-토혈-요약-개발-작업-효율성을-두-배로-높이는-디버깅-및-VSCode-활용-팁-alt-피-토혈-요약-개발-작업-효율성을-두-배로-높이는-디버깅-및-VSCode-활용-팁-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-title-피-토혈-요약-개발-작업-효율성을-두-배로-높이는-디버깅-및-VSCode-활용-팁-alt-피-토혈-요약-개발-작업-효율성을-두-배로-높이는-디버깅-및-VSCode-활용-팁-p-ul-li-code-F-code-를-눌러-code-F-code-를-누르세요-그림과-같이-디버그는-인덱스가-일-때-중단됩니다-li-ul-p-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-title-피-토혈-요약-개발-작업-효율성을-두-배로-높이는-디버깅-및-VSCode-활용-팁-alt-피-토혈-요약-개발-작업-효율성을-두-배로-높이는-디버깅-및-VSCode-활용-팁-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-title-피-토혈-요약-개발-작업-효율성을-두-배로-높이는-디버깅-및-VSCode-활용-팁-alt-피-토혈-요약-개발-작업-효율성을-두-배로-높이는-디버깅-및-VSCode-활용-팁-h-data-id-heading-인라인-중단점-p-인라인-중단점은-실행이-인라인-중단점과-연결된-열에-도달할-때만-적중됩니다-이는-한-줄에-여러-문이-포함된-축소된-코드를-디버깅할-때-특히-유용합니다-예를-들어-for-루프-단락-연산자-등은-한-줄의-코드에-여러-표현식이-포함된-경우-특히-유용합니다-단계는-다음과-같습니다-지정된-위치에서-code-Shift-F-code-를-누르세요-디버깅-후-인라인으로-실행되는-코드는-매번-중단됩니다-보조-포인트-데이터-패널-소개-데이터-패널에서는-모든-변수를-볼-수-있습니다-변수를-마우스-오른쪽-버튼으로-클릭하여-변수-값-설정-변수-값-복사-및-기타-작업-데이터-패널에-포커스를-두면-값을-입력하여-검색하고-필터링할-수-있습니다-필터링-여부를-제어하려면-아래-표시된-버튼을-클릭하세요-보충-포인트-모니터링-패널-소개-모니터링-패널에-변수를-추가하고-변수의-변화를-실시간으로-관찰할-수-있습니다-변수-패널을-마우스-오른쪽-버튼으로-클릭하고-모니터에-추가-를-선택하여-모니터링-패널에-변수를-추가하세요-모니터링-패널에서-추가-버튼을-직접-선택하여-변수를-추가할-수도-있습니다-변수-추가-후-변수의-변화를-실시간으로-모니터링할-수-있습니다-h-data-id-heading-补充知识点-调试服务器时打开一个URI">적중 횟수 중단점</p><ul> 중단점은 코드 줄이 지정된 횟수에 도달하는 경우에만 실행됩니다. 단계는 다음과 같습니다. <li></li></ul>조건부 중단점을 선택하고, 적중 수 옵션으로 전환하고, 적중 수를 입력하세요<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/798/456/642/1646709675917390.png" class="lazy" title="164670965913904[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁" alt="2[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁"/></p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/798/456/642/1646709675917390.png" class="lazy" title="164670960637088[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁" alt="1[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁"/><ul><li></li>아래 사진처럼 충전 성공</ul><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/798/456/642/1646709675917390.png" class="lazy" title="164670966578223[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁" alt="2[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁"/><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/798/456/642/1646709675917390.png" class="lazy" title="164670961339653[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁" alt="1[피 토혈 요약] 개발 작업 효율성을 두 배로 높이는 디버깅 및 VSCode 활용 팁"/></p><ul><li><code>F5를 눌러 F5를 누르세요. 그림과 같이 디버그는 인덱스가 9일 때 중단됩니다.

< h3 data-id="heading-9">인라인 중단점

🎜인라인 중단점은 실행이 인라인 중단점과 연결된 열에 도달할 때만 적중됩니다. 이는 한 줄에 여러 문이 포함된 축소된 코드를 디버깅할 때 특히 유용합니다. 예를 들어 for 루프, 단락 연산자 등은 한 줄의 코드에 여러 표현식이 포함된 경우 특히 유용합니다. 단계는 다음과 같습니다. 🎜🎜🎜지정된 위치에서 Shift + F9를 누르세요 🎜🎜🎜🎜🎜🎜🎜디버깅 후 인라인으로 실행되는 코드는 매번 중단됩니다 🎜🎜🎜🎜🎜 🎜보조 포인트: 데이터 패널 소개🎜🎜🎜데이터 패널에서는 모든 변수를 볼 수 있습니다🎜🎜🎜🎜🎜🎜🎜변수를 마우스 오른쪽 버튼으로 클릭하여 변수 값 설정, 변수 값 복사 및 기타 작업🎜🎜🎜🎜 🎜🎜🎜데이터 패널에 포커스를 두면 값을 입력하여 검색하고 필터링할 수 있습니다. 필터링 여부를 제어하려면 아래 표시된 버튼을 클릭하세요. 🎜🎜🎜🎜🎜🎜🎜🎜🎜보충 포인트: 모니터링 패널 소개🎜🎜 모니터링 패널에 변수를 추가하고 변수의 변화를 실시간으로 관찰할 수 있습니다. 🎜🎜🎜변수 패널을 마우스 오른쪽 버튼으로 클릭하고 "모니터에 추가"를 선택하여 모니터링 패널에 변수를 추가하세요🎜🎜🎜🎜🎜🎜🎜모니터링 패널에서 추가 버튼을 직접 선택하여 변수를 추가할 수도 있습니다🎜🎜🎜🎜 🎜🎜🎜변수 추가 후 변수의 변화를 실시간으로 모니터링할 수 있습니다🎜🎜🎜🎜🎜

补充知识点：调试服务器时打开一个URI

开发 Web 程序通常需要在 Web 浏览器中打开特定 URL，以便在调试器中访问服务器代码。VS Code 有一个内置功能“ serverReadyAction ”来自动化这个任务。

• 一段简单的server代码

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!');
});

• 配置launch.json，以支持打开URI

{
  "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项目

关于NodeJs项目的调试方法，已经在上述的断点的基本使用部分做了介绍，可以网上滚动翻阅。

调试Typescript项目

• 调试TS项目前，先创建一个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"
  }

  • 新建index.ts文件，写一个基本的ts代码

  const num: number = 123;
  console.log(num);
  
  function fn(arg: string): void {
    console.log('fn', arg);
  }
  
  fn("Hello");

• 手动编译调试TS

  在上述的ts基本项目中：

  • 终端执行ts的编译命令tsc

  
  

  • 此时可以看到生成了out文件夹，里面包含一个index.js和一个index.js.map文件

  

  • 在index.ts中随意添加一个断点

  

  • 按F5或者运行 -> 启动调试，此时可以看到可以正常debug调试

  

• 通过构建任务构建调试TS

  • 按Ctrl+Shift+B或选择终端 -> 运行生成任务，此时会弹出一个下拉菜单

  

  • 选择tsc构建选项，此时可以看到自动生成了编译文件

  

  注意，如果你使用的是其他终端(比如cmder)的话，有可能会生成不了，如下图所示，使用默认的powershell即可：

  

  • 调试的话和上述步骤一样，在有了编译后的文件后，按F5即可

• 监视改变并实时编译

  • 按Ctrl + Shift + B选择监视选项，可以实时监视文件内容发生变化，重新编译

  

  • 如下图所示，会实时编译

补充知识点：tasks配置文件的创建方式

• 方法1：点击终端 -> 配置任务 -> 选择任务可以生成对应的tasks.json配置

• 方法2：点击终端 -> 运行生成任务 -> 点击设置图标也可以生成对应的tasks.json配置

补充知识点：每次调试时重新编译

• 按上述的操作已经生成了task.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的支持

• vscode内置的ts版本（即工作区版本），仅仅用于IntelliSense（代码提示），工作区ts版本与用于编译的ts版本无任何关系。

修改工作区ts版本的方法：

• 在状态栏选择typescript的图标，选择版本切换

• 选择你需要的版本即可

调试html项目

学会了上述ts的调试后，我们尝试调试html文件，并且html文件中引入ts文件:

• 创建html，引入ts编译后的js文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3 id="Hello">Hello</h3>
  <script ></script>
</body>
</html>

• ts源文件如下：

const num: number =  1221;
console.log(num);

function fn(arg: string): void {
  console.log('fn', arg);
}

document.body.append('World')

fn("he");

• 打debug

• launch.json启动命令配置

{
  // 使用 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效果

调试Vue项目的两种方式

下面介绍两种调试vue2项目的3种方法，其他框架的调试也类似：

不使用vscode插件Debugger for chrome的方法

• 初始化vue项目，配置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

借助vscode插件Debugger for Chrome在Chrome中调试

• 第一步还是初始化vue项目，添加vue.config.js文件配置，指定要生成sourceMaps资源

module.exports = {
  configureWebpack: {
    // 生成sourceMaps
    devtool: "source-map"
  }
};

• vscode中扩展中安装Debugger for Chrome插件，并确保没有禁用插件

• 手动启动项目的运行, 此方式不需要配置tasks.json任务

# 终端执行命令，启动项目
npm run serve

• 按F5启动调试即可

更多详细内容，请点击这里的参考文档查阅。

https://vuejs.org/v2/cookbook/debugging-in-vscode.html

借助vscode插件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项目

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）

其他技巧

技巧一：代码片段（snippets）

从扩展商店中安装snippets

@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 显示的片段的可选描述
$1 -$n	-	定义光标的位置，光标根据数字大小按tab依次跳转；注意$0是特殊值，表示光标退出的位置，是最后的光标位置。

• 在键盘输入log时效果如下

• 指定光标处的默认值并选中

"body": [
  "console.log('${1:abc}');"
],

• 指定光标处的默认值有多个，并提供下拉选择

用两个竖线包含多个选择值，|多个选择值直接用逗号隔开|

"body": [
  "console.log('${1:abc}');",
  "${2|aaa,bbb,ccc|}"
],

新建当前工作区的代码片段

只需要选择文件 -> 首选项 -> 用户片段 -> 新建xxx文件夹的代码片段, 新建后会在当前工作区生成.vscode/xxx.code-snippets文件

技巧二：Emmet

vscode内置了对Emmet的支持，无需额外扩展。例如html的Emmet演示如下:

技巧三：对光标处代码变量快速重命名

选中或者光标所处的位置，按F2可以对所有的变量重命名

技巧四：代码重构建议

• 选中要重构的代码，点击出现的黄色小灯的图标

• 选中重构的类型

• 输入新的变量名

• 还可以重构到函数

• TS中还可以提取接口等等

补充：VsCode扩展插件开发

VsCode扩展插件可以做什么事情？

• 定制主题、文件图标
• 扩展工作台功能
• 创建webView
• 自定义新的语言提示
• 支持调试特定的runtime

基于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 중국어 웹사이트의 기타 관련 기사를 참조하세요!