在开发过程中，几乎不可能一口气写出完美的程序。断点调试代码是一个常见的需求。作为一名前端开发工程师，我们以往开发的JavaScript程序都是运行在浏览器端的。使用Chrome提供的开发者工具，我们可以很方便的进行源码断点调试。一共有四个步骤，具体的就不一一列举了，大致概括如下：打开Chrome开发者工具；点击进入Sources选项卡，在页面左侧可以看到JS代码目录；找到需要设置断点的源文件，在被打断的代码行左侧点击鼠标左键设置断点。如果你的代码被丑化了，你需要导入对应的source-map来映射源码。刷新页面（如果设置断点的位置是事件处理函数，直接触发事件即可），当代码运行到断点处时，程序会挂起，鼠标悬停可以查看当前变量的值，并以此来判断程序是否正常运行。但是，当我们使用JavaScript开发运行在服务器端的Node.js程序时，Chrome开发者工具暂时就派不上用场了。虽然也有在Chrome上实现调试的方法，但这不是我们今天讨论的范围。还有，说要用console.log的同学，请不要乱说。。。其实很多IDE都集成了Debug功能，包括较新版本的WebStorm，对Node.js的调试支持非常好。但是很多开发者觉得这个IDE太重了。有没有更轻便的工具来实现断点调试？今天我将向您展示如何在VScode上调试断点。除了开箱即用地支持JavaScript和TypeScript，VScode还支持Node.js调试。它是为前端工程师而生的，对吧……调试Node.js的前提是你的电脑上已经安装了Node.js。.js环境。什么？如何安装Node.js？给你一点提示：打开百度，搜索【安装Node.js】，嗯，提示不了了。本文以调试express应用为例，假设您已经安装了Node.js运行环境。创建express应用程序我们使用express-generator创建一个新的express应用程序。1.全局安装express-generatora。打开终端输入：npminstallexpress-generator-gMacBook用户记得在全局安装前加上sudob。安装完成后，在终端输入express-v，看到下图信息，说明安装成功。2、生成express应用目录，假设应用名称为myapp，在终端输入expressmyapp，会在当前目录下生成一个myapp目录。资源文件夹、指导文件夹和路由配置。3.运行快递应用程序在终端输入命令cdmyapp&&npminstall进入项目目录，安装所有依赖。此步骤可能需要较长时间，请耐心等待安装完成。b.然后输入命令npmstart启动应用程序。这时候我们在浏览器中访问localhost:3000，可以看到如下页面：这说明express应用可以正常运行，接下来我们就可以使用VScode调试代码了。提示：为了避免调试时出现端口冲突，我们先回到刚才运行express应用的终端，按ctrl+c关闭正在运行的express应用。调试快递应用1、进入VScode界面，点击界面左侧第四个类似bug的按钮，进入调试界面：2、点击页面上方的“NoConfiguration”下拉菜单，选择“添加配置”。3.选择Node.js环境。4、选择完成后，会在项目根目录下生成一个.vscode目录，里面存放各种VScode编辑器配置。现在这个目录包含一个名为lanuch.json的配置文件。配置文件内容如下：最重要的配置项是“Program”字段，它定义了整个应用程序的入口点。启动调试器时应用程序将从该条目启动。我们发现这个字段已经有值了，不用慌，那是因为VScode在初始化这个配置文件的时候，会检查package.json中是否有key名为start的脚本，如果有，就会把内容启动配置的值用作“程序”字段的值。5.单击StartDebugging按钮（绿色三角形）开始调试。这时界面上方会出现一个调试控制面板，页面右下方会出现一个调试控制台，可以在这里查看自己输出的信息。状态栏将出现在界面底部。当前橙色表示应用运行正常，如下图所示：6、当我们在浏览器中再次访问localhost:3000时，会发现页面可以打开，应用已经正常启动。7、接下来我们开始为应用程序设置断点。我们打开myapp/routes/index.js文件。该文件配置应用程序根路径的路由。目前的处理是返回一个页面，传入字符串“Express”作为视图的参数。8、我们在第6行左边用鼠标点击左键来设置断点。请注意，在添加断点之前必须关闭调试。关闭的方法是点击界面上方调试控制面板中的停止按钮（红色方块）。9、设置断点后，重启调试，然后在浏览器中访问localhost:3000。这时断点的形状发生变化，程序停留在断点处，调试控制面板的按钮也发生变化。从左到右依次为stepover、stepthrough、stepout、restart、stopdebugging。这些是常见的断点调试指令。设置断点后重启调试，然后在浏览器中访问localhost:3000。这时断点的形状发生了变化，程序停留在断点处，调试控制面板的按钮也发生了变化，从左到右的顺序是stepover，stepintodebugging，stepout，重启，停止调试。这些是常见的断点调试指令。10.界面左侧可以查看当前上下文和设置变量监控。11、将鼠标放在断点前的变量或参数上，也可以查看变量的当前值。体验和调试ChromeDeveloperTools一致。好了，开始VScode的Node.js调试之旅吧！！那个console.log同学，你可以说话了……作者：方浩，转载请注明出处！！！我的微信公众号：webcoding，欢迎扫码关注
