深入讲解 VsCode 各场景高级调试与使用技巧

,VsCode自从诞生以来，以其各自优异的特性迅速走红。尤其是对于前端开发小伙伴来说，几乎成为必不可少的开发工具。所以，熟练掌握VsCode的各自使用技巧与调试技巧会让你的日常开发工作效率倍增。,本文将会以大量图文的方式，从下面几个方面详细介绍VsCode的各种技巧：,VsCode安装后，会自动写入环境变量，终端输入code即可唤起VsCode应用程序。,,,在配置文件中添加如下配置，可以增加字符数标尺辅助线。,,下面以在VsCode中快速调试一个Node项目为例，演示断点的基本使用。后文会继续结束各种高级断点。,,,program字段用于指定你的程序入口文件，${workspaceFolder}表示当前项目根路径。,,,,浮窗的操作按钮功能依次为：,日志断点是普通断点的一种变体，区别在于不会中断调试，而是可以把信息记录到控制台。日志断点对于调试无法暂停或停止的服务时特别有用。步骤如下:,,可以使用{}使用变量，比如在此处添加日志断点，b的值为${b},,,条件断点是表达式结果为true时才会进行断点，步骤如下:,,,,,只有该行代码命中了指定次数，才会进行断点。步骤如下:,,,,仅当执行到达与内联断点关联的列时，才会命中内联断点。这在调试在一行中包含多个语句的缩小代码时特别有用。比如for循环，短路运算符等一行代码包含多个表达式时会特别有用。步骤如下:,,,补充知识点：数据面板介绍,,,,,可以将变量添加到监听面板，实时观察变量的变化。,,,,补充知识点：调试服务器时打开一个URI,开发 Web 程序通常需要在 Web 浏览器中打开特定 URL，以便在调试器中访问服务器代码。VS Code 有一个内置功能“ serverReadyAction ”来自动化这个任务。,pattern是设置匹配的程度端口号，端口号放在小括号内，即作为一个正则的捕获组使用。uriFormat映射为URI，其中%s使用pattern中的第一个捕获组替换。最后使用该URI作为外部程序打开的URI。,,关于NodeJs项目的调试方法，已经在上述的断点的基本使用部分做了介绍，可以网上滚动翻阅。,调试Typescript项目,VS Code 内置了对 Ts 调试的支持。为了支持调试 Ts 与正在执行的 Js 代码相结合，VS Code 依赖于调试器的source map在 Ts 源代码和正在运行的 Js 之间进行映射，所以需要需要开启sourceMap选项。,   在上述的ts基本项目中：,,,,,,,注意，如果你使用的是其他终端(比如cmder)的话，有可能会生成不了，如下图所示，使用默认的powershell即可：,,,,补充知识点：tasks配置文件的创建方式,,,,,,,注意，如果编译后的js文件不在相应的位置，通过图中的outFiles字段可以指定ts编译后的js路径。,,修改工作区ts版本的方法：,,,,学会了上述ts的调试后，我们尝试调试html文件，并且html文件中引入ts文件:,,,下面介绍两种调试vue2项目的3种方法，其他框架的调试也类似：,不使用vscode插件Debugger for chrome的方法,,该脚本的作用是运行npm run serve编译命令。,注意：此方式的主要点在于launch.json配置文件中，通过preLaunchTask字段指定调试前先运行一个任务脚本，preLaunchTask的值对应tasks.json文件中的label值。,更多详细内容，大家可以点击这里的参考文档查阅。,借助vscode插件Debugger for Chrome在Chrome中调试,,,更多详细内容，请点击这里的参考文档查阅。,借助vscode插件Debugger for Firfox在Firefox中调试。,,Electron很多人都使用过，主要用于开发跨平台的系统桌面应用。那么来看下vue-cli-electron-builder创建的Electron项目怎么调试。步骤如下：,此处配置了两个调试命令: Electron: Main用于调试主进程，Electron: Renderer用于调试渲染进程；compounds[].选项用于定义复合调试选项; configurations定义的复合命令是并行的;,preLaunchTask用于配置命令执行前先执行的任务脚本，其值对应tasks.json中的label字段; preLaunchTask用在compounds时，用于定义configurations复合任务执行前先执行的脚本。,在主进程相关代码上打上断点，然后启动调试主进程命令就可以调试主进程了,,注意，这里的options参数是根据实际的情况，自定义添加我们运行项目时所需要的参数，比如我这里因为启动项目的npm命令是:,,切换到渲染进程的调试选项，在渲染进程的代码处打上断点，点击调试。注意，此时并不会有断点终端，需要ctrl+r手动刷新软件进程才会看到渲染进程的断点。,,,同时开启渲染进程和主进程的调试，只需要切换到调试全部的选项即可。注意，此种方式因为compounds[].configurations配置是并行执行的，并不一定能保证渲染进程调试一定能附加到主进程调试成功（估计是时机问题），有些时候会调试渲染进程不成功。所以，可以采取上面的方式进行调试。,,更多调试Electron的内容，可以点击参考文档查阅。,补充：更进一步,从扩展商店中安装snippets,,创建全局代码片段,,,,用两个竖线包含多个选择值，|多个选择值直接用逗号隔开|,,新建当前工作区的代码片段,只需要选择文件 -> 首选项 -> 用户片段 -> 新建xxx文件夹的代码片段, 新建后会在当前工作区生成.vscode/xxx.code-snippets文件,,vscode内置了对Emmet的支持，无需额外扩展。例如html的Emmet演示如下:,,选中或者光标所处的位置，按F2可以对所有的变量重命名,,,,,,,VsCode扩展插件可以做什么事情？,基于Yeoman快速开发VsCode插件，步骤如下:,,,,,